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
![Page 1: Design de Interfaces - Aula 08 (Fundamentos do Design de Interfaces)](https://reader036.vdocuments.mx/reader036/viewer/2022062419/558b094dd8b42ac8468b46c6/html5/thumbnails/1.jpg)
Design de InterfacesProfa. Heloisa Biagi
![Page 2: Design de Interfaces - Aula 08 (Fundamentos do Design de Interfaces)](https://reader036.vdocuments.mx/reader036/viewer/2022062419/558b094dd8b42ac8468b46c6/html5/thumbnails/2.jpg)
Princípios do Web Design
Até agora, fizemos exercícios para criar intimidade com o Fireworks. Agora, é hora de aprender a criar.
![Page 3: Design de Interfaces - Aula 08 (Fundamentos do Design de Interfaces)](https://reader036.vdocuments.mx/reader036/viewer/2022062419/558b094dd8b42ac8468b46c6/html5/thumbnails/3.jpg)
Princípios do Web Design
Etapas para a criação de um layout:
</>MAPAS WIREFRAMES/
PROTÓTIPOSLAYOUT CÓDIGOS
![Page 4: Design de Interfaces - Aula 08 (Fundamentos do Design de Interfaces)](https://reader036.vdocuments.mx/reader036/viewer/2022062419/558b094dd8b42ac8468b46c6/html5/thumbnails/4.jpg)
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.
![Page 5: Design de Interfaces - Aula 08 (Fundamentos do Design de Interfaces)](https://reader036.vdocuments.mx/reader036/viewer/2022062419/558b094dd8b42ac8468b46c6/html5/thumbnails/5.jpg)
Princípios do Web Design
1. Mapa do site:
Home
Quem Sou Portfolio Contato
Sucesso de envioPágina trabalho
![Page 6: Design de Interfaces - Aula 08 (Fundamentos do Design de Interfaces)](https://reader036.vdocuments.mx/reader036/viewer/2022062419/558b094dd8b42ac8468b46c6/html5/thumbnails/6.jpg)
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.
![Page 7: Design de Interfaces - Aula 08 (Fundamentos do Design de Interfaces)](https://reader036.vdocuments.mx/reader036/viewer/2022062419/558b094dd8b42ac8468b46c6/html5/thumbnails/7.jpg)
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.
![Page 8: Design de Interfaces - Aula 08 (Fundamentos do Design de Interfaces)](https://reader036.vdocuments.mx/reader036/viewer/2022062419/558b094dd8b42ac8468b46c6/html5/thumbnails/8.jpg)
Logo Banner
Link1 Link2 Link3 Link4 Link5 Link6
Rodapé
Busca
Categorias
Produtos em destaques
Outra oferta 1 Outra oferta 2
Menu do usuário
![Page 9: Design de Interfaces - Aula 08 (Fundamentos do Design de Interfaces)](https://reader036.vdocuments.mx/reader036/viewer/2022062419/558b094dd8b42ac8468b46c6/html5/thumbnails/9.jpg)
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.
![Page 10: Design de Interfaces - Aula 08 (Fundamentos do Design de Interfaces)](https://reader036.vdocuments.mx/reader036/viewer/2022062419/558b094dd8b42ac8468b46c6/html5/thumbnails/10.jpg)
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
![Page 11: Design de Interfaces - Aula 08 (Fundamentos do Design de Interfaces)](https://reader036.vdocuments.mx/reader036/viewer/2022062419/558b094dd8b42ac8468b46c6/html5/thumbnails/11.jpg)
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!
![Page 12: Design de Interfaces - Aula 08 (Fundamentos do Design de Interfaces)](https://reader036.vdocuments.mx/reader036/viewer/2022062419/558b094dd8b42ac8468b46c6/html5/thumbnails/12.jpg)
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
![Page 13: Design de Interfaces - Aula 08 (Fundamentos do Design de Interfaces)](https://reader036.vdocuments.mx/reader036/viewer/2022062419/558b094dd8b42ac8468b46c6/html5/thumbnails/13.jpg)
![Page 14: Design de Interfaces - Aula 08 (Fundamentos do Design de Interfaces)](https://reader036.vdocuments.mx/reader036/viewer/2022062419/558b094dd8b42ac8468b46c6/html5/thumbnails/14.jpg)
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
![Page 15: Design de Interfaces - Aula 08 (Fundamentos do Design de Interfaces)](https://reader036.vdocuments.mx/reader036/viewer/2022062419/558b094dd8b42ac8468b46c6/html5/thumbnails/15.jpg)
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
![Page 16: Design de Interfaces - Aula 08 (Fundamentos do Design de Interfaces)](https://reader036.vdocuments.mx/reader036/viewer/2022062419/558b094dd8b42ac8468b46c6/html5/thumbnails/16.jpg)
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
![Page 17: Design de Interfaces - Aula 08 (Fundamentos do Design de Interfaces)](https://reader036.vdocuments.mx/reader036/viewer/2022062419/558b094dd8b42ac8468b46c6/html5/thumbnails/17.jpg)
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
![Page 18: Design de Interfaces - Aula 08 (Fundamentos do Design de Interfaces)](https://reader036.vdocuments.mx/reader036/viewer/2022062419/558b094dd8b42ac8468b46c6/html5/thumbnails/18.jpg)
![Page 19: Design de Interfaces - Aula 08 (Fundamentos do Design de Interfaces)](https://reader036.vdocuments.mx/reader036/viewer/2022062419/558b094dd8b42ac8468b46c6/html5/thumbnails/19.jpg)
![Page 20: Design de Interfaces - Aula 08 (Fundamentos do Design de Interfaces)](https://reader036.vdocuments.mx/reader036/viewer/2022062419/558b094dd8b42ac8468b46c6/html5/thumbnails/20.jpg)
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 +
![Page 21: Design de Interfaces - Aula 08 (Fundamentos do Design de Interfaces)](https://reader036.vdocuments.mx/reader036/viewer/2022062419/558b094dd8b42ac8468b46c6/html5/thumbnails/21.jpg)
Estilos de layout – Blogs- 2 colunas - Destaque total para conteúdo- Área de comentários- Pouca diferença entre capa e detalhe de
post
![Page 22: Design de Interfaces - Aula 08 (Fundamentos do Design de Interfaces)](https://reader036.vdocuments.mx/reader036/viewer/2022062419/558b094dd8b42ac8468b46c6/html5/thumbnails/22.jpg)
![Page 23: Design de Interfaces - Aula 08 (Fundamentos do Design de Interfaces)](https://reader036.vdocuments.mx/reader036/viewer/2022062419/558b094dd8b42ac8468b46c6/html5/thumbnails/23.jpg)
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
![Page 24: Design de Interfaces - Aula 08 (Fundamentos do Design de Interfaces)](https://reader036.vdocuments.mx/reader036/viewer/2022062419/558b094dd8b42ac8468b46c6/html5/thumbnails/24.jpg)
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
![Page 25: Design de Interfaces - Aula 08 (Fundamentos do Design de Interfaces)](https://reader036.vdocuments.mx/reader036/viewer/2022062419/558b094dd8b42ac8468b46c6/html5/thumbnails/25.jpg)
![Page 26: Design de Interfaces - Aula 08 (Fundamentos do Design de Interfaces)](https://reader036.vdocuments.mx/reader036/viewer/2022062419/558b094dd8b42ac8468b46c6/html5/thumbnails/26.jpg)
Do que você precisa????
![Page 27: Design de Interfaces - Aula 08 (Fundamentos do Design de Interfaces)](https://reader036.vdocuments.mx/reader036/viewer/2022062419/558b094dd8b42ac8468b46c6/html5/thumbnails/27.jpg)
Fundamentos do Design
1. Alinhamento
fonte: http://design.blog.br/geral/quatro-principios-basicos-do-design
![Page 28: Design de Interfaces - Aula 08 (Fundamentos do Design de Interfaces)](https://reader036.vdocuments.mx/reader036/viewer/2022062419/558b094dd8b42ac8468b46c6/html5/thumbnails/28.jpg)
Fundamentos do Design
2. Proximidade
Manter próximos elementos relacionados
![Page 29: Design de Interfaces - Aula 08 (Fundamentos do Design de Interfaces)](https://reader036.vdocuments.mx/reader036/viewer/2022062419/558b094dd8b42ac8468b46c6/html5/thumbnails/29.jpg)
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
![Page 30: Design de Interfaces - Aula 08 (Fundamentos do Design de Interfaces)](https://reader036.vdocuments.mx/reader036/viewer/2022062419/558b094dd8b42ac8468b46c6/html5/thumbnails/30.jpg)
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
![Page 31: Design de Interfaces - Aula 08 (Fundamentos do Design de Interfaces)](https://reader036.vdocuments.mx/reader036/viewer/2022062419/558b094dd8b42ac8468b46c6/html5/thumbnails/31.jpg)
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!
![Page 32: Design de Interfaces - Aula 08 (Fundamentos do Design de Interfaces)](https://reader036.vdocuments.mx/reader036/viewer/2022062419/558b094dd8b42ac8468b46c6/html5/thumbnails/32.jpg)
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)
![Page 33: Design de Interfaces - Aula 08 (Fundamentos do Design de Interfaces)](https://reader036.vdocuments.mx/reader036/viewer/2022062419/558b094dd8b42ac8468b46c6/html5/thumbnails/33.jpg)
Cores
2. Cores análogas: variações do mesmo tom
![Page 34: Design de Interfaces - Aula 08 (Fundamentos do Design de Interfaces)](https://reader036.vdocuments.mx/reader036/viewer/2022062419/558b094dd8b42ac8468b46c6/html5/thumbnails/34.jpg)
Cores
3. Cores complementares
![Page 35: Design de Interfaces - Aula 08 (Fundamentos do Design de Interfaces)](https://reader036.vdocuments.mx/reader036/viewer/2022062419/558b094dd8b42ac8468b46c6/html5/thumbnails/35.jpg)
Cores
4. Esquema triádico
![Page 36: Design de Interfaces - Aula 08 (Fundamentos do Design de Interfaces)](https://reader036.vdocuments.mx/reader036/viewer/2022062419/558b094dd8b42ac8468b46c6/html5/thumbnails/36.jpg)
Tipografia
Tipos de fontes:
1. Com serifa
http://www.webdesignblog.com.br/design/aprendendo-sobre-tipografia-1/
![Page 37: Design de Interfaces - Aula 08 (Fundamentos do Design de Interfaces)](https://reader036.vdocuments.mx/reader036/viewer/2022062419/558b094dd8b42ac8468b46c6/html5/thumbnails/37.jpg)
Tipografia
2. Sem serifa
http://www.webdesignblog.com.br/design/aprendendo-sobre-tipografia-1/
![Page 38: Design de Interfaces - Aula 08 (Fundamentos do Design de Interfaces)](https://reader036.vdocuments.mx/reader036/viewer/2022062419/558b094dd8b42ac8468b46c6/html5/thumbnails/38.jpg)
Tipografia
3. Manuscritas
http://www.webdesignblog.com.br/design/aprendendo-sobre-tipografia-1/
![Page 39: Design de Interfaces - Aula 08 (Fundamentos do Design de Interfaces)](https://reader036.vdocuments.mx/reader036/viewer/2022062419/558b094dd8b42ac8468b46c6/html5/thumbnails/39.jpg)
Tipografia
4. Decorativas
http://www.webdesignblog.com.br/design/aprendendo-sobre-tipografia-1/
![Page 40: Design de Interfaces - Aula 08 (Fundamentos do Design de Interfaces)](https://reader036.vdocuments.mx/reader036/viewer/2022062419/558b094dd8b42ac8468b46c6/html5/thumbnails/40.jpg)
Tipografia
5. Símbolos
http://www.webdesignblog.com.br/design/aprendendo-sobre-tipografia-1/
![Page 41: Design de Interfaces - Aula 08 (Fundamentos do Design de Interfaces)](https://reader036.vdocuments.mx/reader036/viewer/2022062419/558b094dd8b42ac8468b46c6/html5/thumbnails/41.jpg)
Tipografia
Fontes seguras: fontes suportadas por todos os navegadores
![Page 42: Design de Interfaces - Aula 08 (Fundamentos do Design de Interfaces)](https://reader036.vdocuments.mx/reader036/viewer/2022062419/558b094dd8b42ac8468b46c6/html5/thumbnails/42.jpg)
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.
![Page 43: Design de Interfaces - Aula 08 (Fundamentos do Design de Interfaces)](https://reader036.vdocuments.mx/reader036/viewer/2022062419/558b094dd8b42ac8468b46c6/html5/thumbnails/43.jpg)
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/
![Page 44: Design de Interfaces - Aula 08 (Fundamentos do Design de Interfaces)](https://reader036.vdocuments.mx/reader036/viewer/2022062419/558b094dd8b42ac8468b46c6/html5/thumbnails/44.jpg)
Inspiração
- CSS Based - http://cssbased.com/
- Favourite Web Awards - http://www.thefwa.com
- CSS Zen Garden - http://www.csszengarden.com/
![Page 45: Design de Interfaces - Aula 08 (Fundamentos do Design de Interfaces)](https://reader036.vdocuments.mx/reader036/viewer/2022062419/558b094dd8b42ac8468b46c6/html5/thumbnails/45.jpg)
Livros
- Princípios do Web Design Maravilhoso- Autor: Jason Beaird- Editora: Alta Books
- Design para quem não é designer- Autor: Robin Williams- Editora: Callis
![Page 46: Design de Interfaces - Aula 08 (Fundamentos do Design de Interfaces)](https://reader036.vdocuments.mx/reader036/viewer/2022062419/558b094dd8b42ac8468b46c6/html5/thumbnails/46.jpg)
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