O documento cobre os fundamentos do desenvolvimento de layouts web, incluindo a elaboração de mapas do site, wireframes, mockups e protótipos. Destaca a importância da arquitetura da informação, representações visuais e a organização de elementos em páginas. Também sugere atividades práticas para aplicar esse conhecimento em classe e em casa.

1. Fundamentos do
desenvolvimento de
um layout web
@richarley

2. Fundamentos pra que!?
* Metodologia de projeto gráfico
* Web sites, aplicativos online ou mobile,
softwares, publicações digitais, etc.

3. 1. Mapa do site
* Conteúdo previsto em um site
* Arquitetura da informação (Sigla: AI)

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. 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. 2. Wireframes
* Representação visual básica
* Organizar elementos
* Hierarquia

7. 2. Wireframes
* Elementos gerais
CABEÇALHO
MENU
CONTEÚDO
RODAPÉ

8. 2. Wireframes
* Elementos adicionais
LOGO
Inicial
BANNER
Produtos
Contato
CONTEÚDO
Inicial | Produtos | Contato
Copyright
rss
f
t
BARRA LATERAL

9. 2. Wireframes
* Lápis e papel
- Rascunhos
- Recortes ou
post-its

10. 2. Wireframes
* Softwares
- Programas
específicos
* balsamic.com
- Programas de
Edição Visual

11. 2. Wireframes

12. 3. Mockup
* Representação visual detalhada
* Imagem estática

13. 3. Mockup
* Grids

14. 3. Mockup
* Cores

15. 3. Mockup
* Tipografia

16. 3. Mockup
* Eye-tracking

17. 3. Mockup
* Diferentes resoluções e dispositivos

18. 3. Mockup

19. 4. Protótipo
* Simulação interativa

20. 4. Protótipo

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/