Fundamentos do desenvolvimento de um layout web

1,892 views

Published on

Aula de "Fundamentos do Desenvolvimento de Layout Web", ministrada para as cadeiras de Design para Meios Digitais (Curso de Publicidade) e Web Design (Curso de Design), da FANOR, em Outubro de 2013.

Published in: Education
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,892
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
79
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Fundamentos do desenvolvimento de um layout web

  1. 1. Fundamentos do desenvolvimento de um layout web @richarley
  2. 2. Fundamentos pra que!? * Metodologia de projeto gráfico * Web sites, aplicativos online ou mobile, softwares, publicações digitais, etc.
  3. 3. 1. Mapa do site * Conteúdo previsto em um site * Arquitetura da informação (Sigla: AI)
  4. 4. 1. Mapa do site * Lista estrutural de conteúdo * Seções, subseções... - Página inicial - Sobre o site - Produtos - Categoria 1 - Categoria 1.2 - Categoria 2 - Contato
  5. 5. 1. Mapa do site * Fluxo de navegação do site * Diagrama visual Página inicial Produtos Sobre o site Categoria 1 Categoria 1.2 Contato Categoria 2
  6. 6. 2. Wireframes * Representação visual básica * Organizar elementos * Hierarquia
  7. 7. 2. Wireframes * Elementos gerais CABEÇALHO MENU CONTEÚDO RODAPÉ
  8. 8. 2. Wireframes * Elementos adicionais LOGO Inicial BANNER Produtos Contato CONTEÚDO Inicial | Produtos | Contato Copyright rss f t BARRA LATERAL
  9. 9. 2. Wireframes * Lápis e papel - Rascunhos - Recortes ou post-its
  10. 10. 2. Wireframes * Softwares - Programas específicos * balsamic.com - Programas de Edição Visual
  11. 11. 2. Wireframes
  12. 12. 3. Mockup * Representação visual detalhada * Imagem estática
  13. 13. 3. Mockup * Grids
  14. 14. 3. Mockup * Cores
  15. 15. 3. Mockup * Tipografia
  16. 16. 3. Mockup * Eye-tracking
  17. 17. 3. Mockup * Diferentes resoluções e dispositivos
  18. 18. 3. Mockup
  19. 19. 4. Protótipo * Simulação interativa
  20. 20. 4. Protótipo
  21. 21. Atividade em classe * Escolher um site qualquer e fazer uma lista estrutural de seções e subseções. * Simular o wireframe de uma página do site. Atividade em casa * Definir o mapa do site (em lista e diagrama) e preparar o wireframe da página inicial para ser analisado na próxima aula. Como referência http://www.wireframeshowcase.com/

×