Web design: ouse e crie
5 gostaram819 visualizações
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.
Web design: ouse e crie
- 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