O documento fornece uma introdução sobre design para web, cobrindo tópicos como pesquisa, tipografia, cores, layout, grids e um estudo de caso sobre o redesign do site de notícias De Standaard. O foco é ensinar sobre os fundamentos e processos do design web, incluindo a importância da pesquisa, escolha de cores e tipografia, composição visual e criação de sistemas de grade para organizar conteúdo.

1. Design para Web:
ouse e crie
Jovem Empreendedor Digital | SEBRAE – MG
Marcos Nähr | www.marcosnahr.com

2. Web designers
precisam ser especialistas
2

3. Pesquisa
e Idéias
3

4. Pesquisa e Idéias
Todo design tem preocupação com a estética e com o
rigor técnico e aperfeiçoamento de detalhes, mas o
web design é baseado essencialmente na resolução de
problemas.
Cada projeto tem seu próprio conjunto de problemas a
serem resolvidos.
Qual é o primeiro passo na resolução de problemas?
Você começa com a pesquisa.
Você precisa mergulhar nas necessidades do cliente,
do público e do projeto em si, e se informar o máximo
possível (Walter Longo).
4

5. O Processo de Web Design
• O Briefing
– O Briefing do Cliente
– O Briefing Técnico Briefing
– O Briefing Criativo
– O Briefing de Idéias
• Pesquisa & Insights Pesquisa
– Pesquisa Qualitativa
– Pesquisa Quantitativa
– Pesquisa Primária
– Pesquisa Secundaria Ideação
– Segmentação
– Focus Groups
– Testes de Usabilidade
– Pesquisa Visual Solução
– Insights Gerados
• Geração de Ideias
– Inspiração
Produção
– Idéias Estruturadas
• Solução
• Produção/Implementação
5

6. Tipografia
6

7. Anatomia
As fontes, assim como outros
elementos do design, comunicam.
Elas possuem características que
designam personalidade ao
conteúdo.
7

8. Classificação
• Serifas
• Contraste e Espaços
• Altura—x
• Estresse
• Peso
8

9. Cor
9

10. Escolha da Cor
A escolha da cor é talvez o elemento mais dificil do projeto.
Por quê?
Porque é o elemento mais subjetivo do projeto.
Para alguns, uma paleta de cinza-escuro com salpicos de rosa
brilhante vai ser ótimo, para outros pode ser totalmente errado.
Muitos designers, com conhecimentos em teoria da cor ou não,
acabam tomando decisões subjetivas sobre a cor e então, quando
chega a hora de explicar as decisões a um cliente, as coisas começam
a complicar.
10

11. Círculo cromático
As cores, quando selecionadas a
partir do círculo cromático, em
certas combinações, interagem
entre si.
Esta é a base da paleta de cores, a
interação das cores.
Conhecer a base de tipos de
combinações de cores é essencial
na criação de paletas.
11

12. Tonalidade, Saturação e Brilho
Descrever cores pode ser difícil.
Usar termos padrões pode nos
ajudar a descrever o que
queremos.
Matiz, saturação e brilho são
maneiras de organizar e
descrever cores.
• Tonalidade
• Saturação
• Brilho
12

13. Combinações de Cores e Humor
• Ativo / Vibrante • “Silencioso” / Calmo
13

14. Combinações de Cores e Humor
• Pastel • Natural
14

15. Layout
15

16. As Bases da Composição
• A Regra dos Terços
Fotógrafos usam esta regra há
anos e antes deles artistas e
arquitetos.
A teoria é simples e fácil de aplicar
no dia-a-dia do designer.
Divida qualquer espaço de
trabalho, ou layout, em
terços horizontalmente e
verticalmente, e alinhe os pontos
chave do foco de sua composição
nos locais onde as linhas se
cruzam.
16

17. As Bases da Composição
• “Looking Room”
1. objeto
2. espaço à esquerda
3. “looking room” cria sensação
de movimento nesta direção
17

18. As Bases da Composição
• Aplicando “Looking Room”
para a web
Podemos aplicar a mesma teoria
para uma página na web.
Tomando os três elementos:
“assunto, espaço,
e movimento", podemos guiar o
olhar do usuário para os
elementos que desejarmos.
A definição correta pode ter um
sutil, mas importante efeito sobre
a forma como uma página é
visualmente percebida pelo
usuário.
18

19. Relações Espaciais
O espaço é importante no layout.
O espaço pode ser criado pelo conteúdo - como texto, imagens,
listas, logos, etc - ou pode ser criado pelo espaço entre o conteúdo,
chamado de espaço negativo, ou espaço em branco.
O espaço pode ser passivo, um subproduto do processo de layout.
Ou, pode ser ativo; estar lá por um motivo, para guiar os olhos do
usuário, ou ajudá-lo a tomar uma decisão.
19

20. Espaço em Branco
Espaço em branco, ou espaço
negativo é o espaço entre os
elementos de uma composição;
quer seja uma página web, uma
aplicação web ou uma página em
uma revista.
20

21. Sistema de Grades (Grids)
21

22. Quabrando a Grade
• Grid aparente • Grid subentendido
ideal para enfatizar a segmentação ideal para enfatizar o conteúdo
22

23. Juntando
Tudo
De Standaard
23

24. Estudo de Caso – Jornal De Standaard
O Briefing
• Aprimorar o conteúdo principal;
• Melhorar a marca e atrair novos usuários ao site,
não os leitores do jornal;
• Melhorar a inovação do novo site;
• Melhorar o modelo de negócio;
• Melhorar o visual (já desatualizado);
• Integrar um novo sistema de gerenciamento de conteúdo (CMS);
24

25. Estudo de Caso – Jornal De Standaard
Conteúdo existente Integração da Marca
www.standaard.be já existia a anos. De Standaard é um jornal com uma
Durante esse tempo, houve tentativas história rica. O público no entanto, é
típico de um jornal padrão, idosos, sexo
de reforçar padrões, de anúncios a masculino, branco.
tamanhos de imagem.
Já o site tem uma audiência um pouco
Parte do trabalho a ser feito seria de diferente. Ainda predominantemente do
auditar o máximo de conteúdo possível sexo masculino, mas eles são mais
e, em seguida, definir as novas jovens, menos conservadores em sua
guidelines que se encaixam nos padrões visão política. relacionados, mas não
marcas estão
Nesse sentido, as duas
e tendências são a mesma. Esta diferença sutil tinha
de ser levada em conta no projeto.
Receita
Como a maioria dos jornais, De Standaard depende de publicidade e assinaturas
para suas receitas. Anteriormente, o jornal utilizava alguns tamanhos de anúncio
padrão e alguns anúncios feitos sob medida para a execução de promoções
internas. Com tantos tamanhos diferentes, alguns padronizados, outros não,
quaisquer alterações de design e layout eram um desafio. Os anúncios colocados
onde se encaixavam, ao invés de em um posicionamento estratégico.
25

26. Estudo de Caso – Jornal De Standaard
Conteúdo Modular
Grade Modular
Para lidar com a variedade de
importância da uma notícia, uma
série de variações foram exploradas
e projetadas.
Era também fundamental explorar
o fato de que as histórias podem
escalar seu grau de importância. A
notícia pode começar com
pequenas quantidades de
informação e pode ir crescendo e
agregando conteúdos associados,
tais como fotos e vídeo.
Tudo isso tem de ser estruturado
em um formato de conteúdo que
permita a exibição deste fluxo de
crescimento.
26

27. Estudo de Caso – Jornal De Standaard
Elementos Tipográficos
Todo o conteúdo escrito pode ser
estruturado em elementos
tipográficos, tais como parágrafos,
listas, títulos, subtítulos, citações
etc. Os jornais cobrem histórias tão
amplas que, do ponto de vista
editorial, os escritores precisam de
todos os elementos tipográficos
com que estão acostumados a
trabalhar.
27

28. Estudo de Caso – Jornal De Standaard
Criando a Grade
As constantes definem as colunas.
De Standaard usa as unidades de
publicidade definidas pelo
Interactive Advertising Bureau.
Para o novo site, foi proposto que
as seguintes unidades de anúncio
seriam incorporadas:
28

29. Estudo de Caso – Jornal De Standaard
Criando a Grade
29

30. Estudo de Caso – Jornal De Standaard
Resultado
30

31. Estudo de Caso – Jornal De Standaard
Crie um sistema,
não um Web Site
31

32. Conclusão
O design gráfico mudou pouco em cinqüenta anos anos.
Nós continuamos a usar a cor, imagem, tipografia, ilustrações e layout
para contar uma história para os usuários. Continuamos a usar a
pesquisa para basear e informar as nossas decisões.
Uma das poucas coisas que é diferente é o meio de entrega: a web.
E com esso diferença surge uma mudança fundamental:
Nós não controlamos o conteúdo, quem controla é o usuário.
Web design precisa ir além de layout, fontes e cores, além dos
caprichos do navegador e das últimas bibliotecas de JavaScript.
Precisa abraçar as verdadeiras raízes da prática:
a comunicação de informações.
32

33. Obrigado!
Marcos Nähr
www.marcosnahr.com
33