Fundamentos dodesenvolvimento de

um layout web@richarley

Fundamentos pra que!?* Metodologia de projeto gráfico

* Web sites, aplicativos online ou mobile, softwares, publicações digitais, etc.

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

- Categoria 1- Categoria 1.2

- Categoria 2- Contato

1. Mapa do site* Fluxo de navegação do site

* Diagrama visual

Sobre o site Contato

Página inicial

Categoria 1.2

Categoria 1 Categoria 2

Produtos

2. Wireframes* Representação visual básica

* Organizar elementos* Hierarquia

2. Wireframes* Elementos gerais

CABEÇALHO

RODAPÉ

CONTEÚDO

MENU

2. Wireframes* Elementos adicionais

BANNER

CONTEÚDO

Inicial

LOGO

Produtos Contato tfrss

BARRA LATERAL

Copyright

Inicial | Produtos | Contato

2. Wireframes* Lápis e papel

- Rascunhos - Recortes ou post-its

2. Wireframes* Softwares

- Programas específicos

- Programas de Edição Visual

* balsamic.com

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 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.

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.

Como referênciahttp://www.wireframeshowcase.com/