Fundamentos do
desenvolvimento de
um layout web
@richarley
Fundamentos pra que!?
* Metodologia de projeto gráfico
* Web sites, aplicativos online ou mobile,
softwares, publicações di...
1. Mapa do site
* Conteúdo previsto em um site
* Arquitetura da informação (Sigla: AI)
1. Mapa do site
* Lista estrutural de conteúdo
* Seções, subseções...
- Página inicial
- Sobre o site
- Produtos
- Categor...
1. Mapa do site
* Fluxo de navegação do site
* Diagrama visual
Página inicial

Produtos

Sobre o site

Categoria 1
Categor...
2. Wireframes
* Representação visual básica
* Organizar elementos
* Hierarquia
2. Wireframes
* Elementos gerais
CABEÇALHO
MENU

CONTEÚDO

RODAPÉ
2. Wireframes
* Elementos adicionais
LOGO
Inicial

BANNER
Produtos

Contato

CONTEÚDO

Inicial | Produtos | Contato
Copyri...
2. Wireframes
* Lápis e papel
- Rascunhos

- Recortes ou
post-its
2. Wireframes
* Softwares
- Programas
específicos

* balsamic.com

- Programas de
Edição Visual
2. Wireframes
3. Mockup
* Representação visual detalhada
* Imagem estática
3. Mockup
* Grids
3. Mockup
* Cores
3. Mockup
* Tipografia
3. Mockup
* Eye-tracking
3. Mockup
* Diferentes resoluções e dispositivos
3. Mockup
4. Protótipo
* Simulação interativa
4. Protótipo
Atividade em classe
* Escolher um site qualquer e fazer uma lista
estrutural de seções e subseções.
* Simular o wireframe ...
Próximos SlideShares
Carregando em…5
×

Fundamentos do desenvolvimento de um layout web

2.051 visualizações

Publicada em

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.

Publicada em: Educação
0 comentários
4 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
2.051
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
85
Comentários
0
Gostaram
4
Incorporações 0
Nenhuma incorporação

Nenhuma nota no 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/

×