Design de InterfacesProfa. Heloisa Biagi

Princípios do Web Design

Até agora, fizemos exercícios para criar intimidade com o Fireworks. Agora, é hora de aprender a criar.

Princípios do Web Design

Etapas para a criação de um layout:

</>MAPAS WIREFRAMES/

PROTÓTIPOSLAYOUT CÓDIGOS

Princípios do Web Design

1. Mapa do site: é quando começamos a “rabiscar” nosso projeto e a definir e organizar as páginas e seções que farão parte dele.

Princípios do Web Design

1. Mapa do site:

Home

Quem Sou Portfolio Contato

Sucesso de envioPágina trabalho

Princípios do Web Design

2. Wireframes e protótipos: é quando definimos todo o conteúdo da nossa página (menus, banners, seções, rodapés, formulários etc) e passamos a organizar visualmente todas essas informações.

Princípios do Web Design

2. Wireframes e protótipos: é quando definimos todo o conteúdo da nossa página (menus, banners, seções, rodapés, formulários etc) e passamos a organizar visualmente todas essas informações.

Logo Banner

Link1 Link2 Link3 Link4 Link5 Link6

Rodapé

Busca

Categorias

Produtos em destaques

Outra oferta 1 Outra oferta 2

Menu do usuário

Princípios do Web Design

Antes de rabiscar o wireframe da nossa página, porém, é importante conhecer as possibilidades de layouts de site para nos ajudar a estruturar nosso conteúdo.

Estilos de layout – Portal (3 colunas)

Logo Banner

Link1 Link2 Link3 Link4 Link5 Link6

Rodapé

Busca

Menu Categorias

Manchete 2Lorem Ipsum dolum sinis ultra

Menu do usuário

Mais lidas

Publicidade

Publicidade

Manchete Principal do Dia!

Manchete 3Lorem Ipsum dolum sinis ultra

Estilos de layout – Portal (notícia)

Logo Banner

Link1 Link2 Link3 Link4 Link5 Link6

Rodapé

Busca

Menu Categorias

Nulla nisi turpis, luctus eleifend suscipit sit amet, eleifend et erat. Sed neque quam, commodo in dictum a, fringilla sed enim. In faucibus pretium lacus sit amet dapibus. Nunc quis neque et dolor iaculis euismod eu at augue. In massa nunc, bibendum a tempor eget, luctus mattis ligula.

Menu do usuário

Manchete Principal do Dia!

Estilos de layout – Portal- 3 colunas para capas- Notícias têm só 2 colunas- Navegação no topo- Navegação Contextual à esquerda- Blocos de Notícias temáticos- Conteúdo menos relevante à direita

3. Estilos de layout – E-commerce (3 colunas)

Logo Buscar

Categoria 1 Categoria 2 Categoria 3 Categoria 4

Rodapé

Banner Ofertas

Oferta 1

Menu do usuário

Publicidade

PublicidadeOferta 2 Oferta 3

3. Estilos de layout – E-commerce (3 colunas)

Logo Buscar

Categoria 1 Categoria 2 Categoria 3 Categoria 4

Rodapé

SubCategorias

Categoria 3 > SubCategoria 1

Produto 1

Menu do usuário

Publicidade

Publicidade

Produto 2

Produto 3 Produto 4

3. Estilos de layout – E-commerce (3 colunas)

Logo Buscar

Categoria 1 Categoria 2 Categoria 3 Categoria 4

Rodapé

SubCategorias

Categoria 3 > SubCategoria 1 > Produto 1

Imagem produto

Menu do usuário

Produto 1- Resistente- Durável R$9,99 COMPRAR

Estilos de layout – E-commerce- 3 colunas para capas/ categorias- Produtos têm só 2 colunas- Navegação no topo- Navegação Contextual à esquerda- Destaque para busca- ‘Breadcrumbs’ (indicativo de lugar)- Conteúdo menos relevante à direita

3. Estilos de layout – Blogs

Logo

Link1 Link2 Link3 Link4 Link5 Link6

Rodapé

Busca

Mais lidosNulla nisi turpis, luctus eleifend suscipit sit amet, eleifend et erat. Sed neque quam, commodo in dictum a, fringilla sed enim. In faucibus pretium lacus sit amet dapibus. Nunc quis neque et dolor iaculis euismod eu at augue. In massa nunc, bibendum a tempor eget, luctus mattis ligula.

Nunc quis neque et dolor iaculis euismod eu at augue. In massa nunc, bibendum a tempor eget, luctus mattis ligula.

Post Principal do Dia!

ArquivoComentar | Facebook | Twitter | Google +

Estilos de layout – Blogs- 2 colunas - Destaque total para conteúdo- Área de comentários- Pouca diferença entre capa e detalhe de

post

3. Estilos de layout – Institucional

Logo Link1 Link2 Link3 Link4 Link5 Link6

Rodapé

Banner Informativo

Destaque 1 Destaque2 Destaque3

Nulla nisi turpis, luctus eleifend suscipit sit amet, eleifend et erat. Sed neque quam, commodo in dictum a, fringilla sed enim. In faucibus pretium lacus sit amet dapibus

Call to action

3. Estilos de layout – Institucional

Logo Link1 Link2 Link3 Link4 Link5 Link6

Rodapé

Banner Informativo

Nulla nisi turpis, luctus eleifend suscipit sit amet, eleifend et erat. Sed neque quam, commodo in dictum a, fringilla sed enim. In faucibus pretium lacus sit amet dapibus. Nulla nisi turpis, luctus eleifend suscipit sit amet, eleifend et erat. Sed neque quam, commodo in dictum a, fringilla sed enim. In faucibus pretium lacus sit amet dapibus

Nulla nisi turpis, luctus eleifend suscipit sit amet, eleifend et erat. Sed neque quam, commodo in dictum a, fringilla sed enim. In faucibus pretium lacus sit amet dapibus

Destaque 1

Do que você precisa????

Fundamentos do Design

1. Alinhamento

fonte: http://design.blog.br/geral/quatro-principios-basicos-do-design

Fundamentos do Design

2. Proximidade

Manter próximos elementos relacionados

Logo

Link1 Link2 Link3 Link4 Link5 Link6

Rodapé

Busca

Mais lidosNulla nisi turpis, luctus eleifend suscipit sit amet, eleifend et erat. Sed neque quam, commodo in dictum a, fringilla sed enim. In faucibus pretium lacus sit amet dapibus. Nunc quis neque et dolor iaculis euismod eu at augue. In massa nunc, bibendum a tempor eget, luctus mattis ligula.

Nunc quis neque et dolor iaculis euismod eu at augue. In massa nunc, bibendum a tempor eget, luctus mattis ligula.

Post Principal do Dia!

ArquivoComentar | Facebook | Twitter | Google +

Não gostei!por usuario_critico às 10:00

Conteúdo

Interação

Exploração do conteúdo

Navegação

Fundamentos do Design

3. Contraste

Um mínimo de contraste para dar visibilidade aos elementosNulla nisi turpis, luctus eleifend suscipit sit amet, eleifend et erat. Sed neque quam, commodo in dictum a, fringilla sed enim. In faucibus pretium lacus sit amet dapibus

Nulla nisi turpis, luctus eleifend suscipit sit amet, eleifend et erat. Sed neque quam, commodo in dictum a, fringilla sed enim. In faucibus pretium lacus sit amet dapibus

errado certo

Fundamentos do Design

4. Repetição

Use para dar consistência ao layout!

Nulla nisi turpis, luctus eleifend suscipit sit amet, eleifend et erat. Sed neque quam, commodo in dictum a, fringilla sed enim. In faucibus pretium lacus sit amet dapibus. Nunc quis neque et dolor iaculis euismod eu at augue. In massa nunc, bibendum a tempor eget, luctus mattis ligula.

Post Principal do Dia!

Nulla nisi turpis, luctus eleifend suscipit sit amet, eleifend et erat. Sed neque quam, commodo in dictum a, fringilla sed enim. In faucibus pretium lacus sit amet dapibus.

Outro post!

Cores

- Relação entre as cores: produz esquemas de cores que se tornam agradáveis ao usuário

1. Esquema neutro: cores + cor neutra (branco, preto, cinza)

Cores

2. Cores análogas: variações do mesmo tom

Cores

3. Cores complementares

Cores

4. Esquema triádico

Tipografia

Tipos de fontes:

1. Com serifa

http://www.webdesignblog.com.br/design/aprendendo-sobre-tipografia-1/

Tipografia

2. Sem serifa

http://www.webdesignblog.com.br/design/aprendendo-sobre-tipografia-1/

Tipografia

3. Manuscritas

http://www.webdesignblog.com.br/design/aprendendo-sobre-tipografia-1/

Tipografia

4. Decorativas

http://www.webdesignblog.com.br/design/aprendendo-sobre-tipografia-1/

Tipografia

5. Símbolos

http://www.webdesignblog.com.br/design/aprendendo-sobre-tipografia-1/

Tipografia

Fontes seguras: fontes suportadas por todos os navegadores

Tipografia

Qual fonte usar?Corpo do texto: fontes com serifa ou sem serifa e seguras. Fontes sem serifa têm melhor definição em monitores, porém, a fonte serifada Georgia é própria para monitores.

Títulos: com serifa, sem serifa, manuscritas ou decorativas.

Cuidado com o exagero! Escolha apenas um tipo de fonte para o corpo, e um para títulos. É importante manter um padrão.

Tipografia

Cuidado com os direitos autorais!Muitas fontes que vêm automaticamente instaladas necessitam de aquisição (compra) para usos comerciais. Dica: use fontes gratuitas livres de direitos.

Sites com excelentes fontes gratuitas:

Exljbris - http://www.exljbris.com/The League of Moveable Type - http://www.theleagueofmoveabletype.com/Font Squirrel - http://www.fontsquirrel.com/

Inspiração

- CSS Based - http://cssbased.com/

- Favourite Web Awards - http://www.thefwa.com

- CSS Zen Garden - http://www.csszengarden.com/

Livros

- Princípios do Web Design Maravilhoso- Autor: Jason Beaird- Editora: Alta Books

- Design para quem não é designer- Autor: Robin Williams- Editora: Callis

Livros

- O Guia Completo da Cor- Autores: Adam Banks & Tom Fraser- Editora: Senac

- Não me faça pensar!- Autor: Steve Krug- Editora: Alta Books

Contato

Heloisa Biagi heloisa.biagi@gmail.comwww.heloisabiagi.comLinkedin e Facebook: procurar por Heloisa Biagi