design de interfaces - aula 08 (fundamentos do design de interfaces)
DESCRIPTION
Noções básicas do Design de Interfaces, do curso Técnico em Informática do SenacTRANSCRIPT
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 [email protected] e Facebook: procurar por Heloisa Biagi