O papel cobre a pedraO papel cobre a pedraO papel cobre a pedraO papel cobre a pedraAula 03

II II -- O papel cobre a pedraO papel cobre a pedra

Si ifi t i t t• Significa ter as coisas certas antesde você escrever o código.

• Ter o projeto de seu site no papelp j p p

é d ã bé d i• Na pré-produção também deixamos que ousuário aprove o que está fazendo. Assim ficamais fácil mudar algo depoismais fácil mudar algo depois.

PréPré--ProduçãoProdução

M táf i l• Metáfora visual

• Como poder expressar o tema visualmentep p

• Elementos visuais familiares:

-Imagens-Elementos da InterfaceElementos da Interface-Ícones-Cores-Fontes

O InícioO Início

ExemplosExemplos

Identificando os temas e elementos Identificando os temas e elementos do design usados na metáfora visual.do design usados na metáfora visual.

Identificando os temas e elementos Identificando os temas e elementos do design usados na metáfora visual.do design usados na metáfora visual.

1) Liste metáforas visuais para sitesnos seguintes temas:nos seguintes temas:

restaurante;instrumentos musicais;instrumentos musicais;site de piadas.

2) Descobrir a metáfora visual de 3sites à sua escolha.

AtividadesAtividades

Tema é a finalidade e o conteúdo do site.

A metáfora visual usa elementos do A metáfora visual usa elementos do design (cor, gráfico, tipografia, etc) que reforçam o tema do sitereforçam o tema do site.

Tema vs. Metáfora VisualTema vs. Metáfora Visual

Descobrir o temaDescobrir o tema

Não pensar em quantas colunas, ou p q ,navegação

Idéias sobre o conteúdo do site (elementos visuais na página)

Não desconsiderar nada, anote todas as idéias.

O C i h táf O C i h táf

idéias.

O Caminho para uma metáfora O Caminho para uma metáfora visual.visual.

Mapa do JapãoMapa do Japão

Comida: sushi, peixe, sashimi

Hiroshima

Palácio

Bandeira do Japão

IlhaIlha

Exemplo Exemplo –– Viagens JapãoViagens Japão

Cor layout localização dos elementosCor, layout, localização dos elementos

Palheta de cores (kuler adobe com)Palheta de cores (kuler.adobe.com)

Projete Layouts baseados no conteúdoProjete Layouts baseados no conteúdo

Use elementos visuais para reforçar o Use elementos visuais para reforçar o tema (usar a série de idéias)

Exibir o conteúdo para os usuáriosExibir o conteúdo para os usuários

Navegação PrincipalNavegação Principal

Sub NavegaçãoSub Navegação

Seções LateraisSeções Laterais

ConteúdoConteúdo

RodapéRodapé

Elementos de uma páginaElementos de uma página

Preciso usar todos esses elementosPreciso usar todos esses elementospara cada site?

- Não, são exemplos dos elementos gerais dapágina que você pode acabar usando. Lembre-se,cada web site é diferente. Em todos os casos, oconteúdo do seu cliente determinará quaiselementos da página ocê acaba sando em seelementos da página você acaba usando em seulayout final.

Não existem perguntas idiotas.Não existem perguntas idiotas.

Todo site precisa de um tema e deTodo site precisa de um tema e deuma metáfora visual?

- Sim e não. Nem todo site precisa de umametáfora com o tema para reforçar seuconteúdo. Mas na maioria dos casos, seu siteterá algum tipo de tema, mesmo que estejae p esso apenas no p óp io conteúdoexpresso apenas no próprio conteúdo.

Não existem perguntas idiotas.Não existem perguntas idiotas.

E se eu não iniciar com nenhumE se eu não iniciar com nenhumconteúdo? Ou quiser iniciar apenas

bl l l tcom um blog ou algo realmentesimples?- Mesmo que você não tenha nenhum conteúdo(imagens, artigos, vídeos, etc) inicialmente,ainda precisará tomar uma decisão conscientesobre o tema geral do site. Se você tiveriniciando m blog sob e q al tipo de tópicoiniciando um blog, sobre qual tipo de tópicoescreverá? Se for mais um jornal, bem, então,haverá um tema!

Não existem perguntas idiotas.Não existem perguntas idiotas.

haverá um tema!

Definir diferentes combinações de Definir diferentes combinações de layout e cores

Escrever suas considerações sobre como cada modelo representa o como cada modelo representa o conteúdo do site

Lembre-se de identificar os l i ielementos visuais

Próximos PassosPróximos Passos

Um storyboard básico desenhado à mão pode transformar se em um Web mão pode transformar-se em um Web site bem detalhado.

Di D h b d Dica: Desenhe seus storyboards em uma janela vazia do navegador.

StoryboardStoryboard (Arte Conceitual)(Arte Conceitual)

Exemplo de Mark:Exemplo de Mark:

- Gostaria de ver em algum lugar um Gostaria de ver, em algum lugar, um mapa do Japão. A geografia é tão legal e acho que ele precisa estar no site em q palgum lugar.

- Realmente eu gostaria de um layout simples com duas colunas

- Tenho muitas imagens. Acho que seria b i d b lh uma boa como a imagem do cabeçalho

principal.

Sempre perguntar ao cliente!Sempre perguntar ao cliente!

1) Encontre algum papel e faça uma grade1) Encontre algum papel e faça uma grade

2) Rascunhe seu design (foque nos 2) Rascunhe seu design (foque nos elementos maiores, não nos slogans ou nos links de texto Apenas dê uma idéia nos links de texto. Apenas dê uma idéia básica)

3) Adicione cor e finalize seu storyboard

Criando os Criando os StoryboardsStoryboards

Posso usar Photoshop ou outroPosso usar Photoshop ou outroprograma de edição de imagens paraf t b d ?fazer meus storyboards?

Você pode criar seus storyboards como quiser- Você pode criar seus storyboards como quiser.A principal idéia é modelar as imagens do design.O photoshop fornecerá, inevitavelmente, maisO photoshop fornecerá, inevitavelmente, maiscontrole e detalhe, mas poderá levar maistempo. Contudo ter versões digitais, mesmo

áescaneando seus esboços, permitirá que envierapidamente via e-mail suas idéias para seucliente

Não existem perguntas idiotas.Não existem perguntas idiotas.

cliente.

Por que não posso adicionar texto aPor que não posso adicionar texto ameus storyboards?

O texto realmente não é importante nessa fase- O texto realmente não é importante nessa fase.O principal foco deve ser nos elementos grandesdo layout, e possivelmente no esquema de cores.do layout, e possivelmente no esquema de cores.O conteúdo entrará mais tarde. Coloque apenastexto fictício ou linhas grossas.

Não existem perguntas idiotas.Não existem perguntas idiotas.

Qual é a melhor maneira deQual é a melhor maneira deadicionar cor?

Se estiver desenhando à mão lápis de cor Se o- Se estiver desenhando à mão, lápis de cor. Se ophotoshop for mais seu estilo, o céu será olimite.limite.

Não existem perguntas idiotas.Não existem perguntas idiotas.

Quando se produz previamente um site é Quando se produz previamente um site, é capaz de experimentar idéias de design no papel. Assim evita os erros em potencial na codificação que podem custar tempo, esforço e possível dinheiro.

Uma metáfora visual aproveita os elementos visuais para reforçar inconscientemente o visuais para reforçar inconscientemente o tema do site.

Ao aplicar uma metáfora visual em seu site, seja sutil e não exagere

Pontos de bala!Pontos de bala!