Noções básicas do Design de Interfaces, do curso Técnico em Informática do Senac

1. Design de Interfaces
Profa. Heloisa Biagi

2. Princípios do Web Design
Até agora, fizemos exercícios para criar
intimidade com o Fireworks. Agora, é hora
de aprender a criar.

3. Princípios do Web Design
Etapas para a criação de um layout:
</>
MAPAS
WIREFRAMES/
PROTÓTIPOS
LAYOUT
CÓDIGOS

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

5. Princípios do Web Design
1. Mapa do site:
Home
Quem Sou
Portfolio
Página trabalho
Contato
Sucesso de envio

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

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

8. Menu do usuário
Logo
Link1
Link2
Banner
Link3 Link4
Link5
Link6
Busca
Produtos em destaques
Categorias
Outra oferta 1
Rodapé
Outra oferta 2

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

10. Estilos de layout – Portal (3 colunas)
Menu do usuário
Logo
Link1
Link2
Banner
Link3 Link4
Link5
Link6
Busca
Manchete
Principal do Dia!
Mais lidas
Manchete 2
Manchete 3
Lorem Ipsum dolum
sinis ultra
Lorem Ipsum dolum
sinis ultra
Publicidade
Menu
Categorias
Publicidade
Rodapé

11. Estilos de layout – Portal (notícia)
Menu do usuário
Logo
Link1
Link2
Banner
Link3 Link4
Link5
Link6
Busca
Manchete Principal do Dia!
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.
Rodapé

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

14. 3. Estilos de layout – E-commerce (3 colunas)
Menu do usuário
Logo
Buscar
Categoria 1 Categoria 2 Categoria 3 Categoria 4
Banner Ofertas
Oferta 1
Oferta 2
Publicidade
Oferta 3
Rodapé
Publicidade

15. 3. Estilos de layout – E-commerce (3 colunas)
Menu do usuário
Logo
Buscar
Categoria 1 Categoria 2 Categoria 3 Categoria 4
Categoria 3 > SubCategoria 1
Publicidade
Produto 1
Produto 2
Produto 3
Produto 4
SubCategorias
Rodapé
Publicidade

16. 3. Estilos de layout – E-commerce (3 colunas)
Menu do usuário
Logo
Buscar
Categoria 1 Categoria 2 Categoria 3 Categoria 4
Categoria 3 > SubCategoria 1 > Produto 1
SubCategorias
Imagem
produto
Produto 1
-
Resistente
Durável
R$9,99
Rodapé
COMPRAR

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

20. 3. Estilos de layout – Blogs
Logo
Link1
Link2
Link3 Link4
Link5
Link6
Busca
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. Nunc quis neque et dolor iaculis euismod eu at augue. In massa nunc,
bibendum a tempor eget, luctus mattis ligula.
Mais lidos
Nunc quis neque et dolor iaculis euismod eu at augue. In massa nunc, bibendum a
tempor eget, luctus mattis ligula.
Arquivo
Comentar | Facebook | Twitter | Google +
Rodapé

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

23. 3. Estilos de layout – Institucional
Logo
Link1
Link2
Link3 Link4
Link5
Link6
Banner Informativo
Call to action
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
Rodapé

24. 3. Estilos de layout – Institucional
Logo
Link1
Link2
Link3 Link4
Link5
Link6
Banner Informativo
Destaque 1
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
Rodapé

26. Do que você precisa????

27. Fundamentos do Design
1. Alinhamento
fonte: http://design.blog.br/geral/quatroprincipios-basicos-do-design

28. Fundamentos do Design
2. Proximidade
Manter próximos elementos relacionados

29. Logo
Navegação
Link1
Link2
Link3 Link4
Link5
Link6
Busca
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. Nunc quis neque et dolor iaculis euismod eu at augue. In massa nunc,
bibendum a tempor eget, luctus mattis ligula.
Conteúdo
Nunc quis neque et dolor iaculis euismod eu at augue. In massa nunc, bibendum a
tempor eget, luctus mattis ligula.
Comentar | Facebook | Twitter | Google +
Interação
Não gostei!
por usuario_critico às 10:00
Rodapé
Mais lidos
Exploração do
conteúdo
Arquivo

30. Fundamentos do Design
3. Contraste
Um mínimo de contraste para dar visibilidade
aos elementos
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
errado
certo

31. Fundamentos do Design
4. Repetição
Use para dar consistência ao layout!
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. Nunc quis neque et dolor iaculis euismod eu at augue. In massa nunc,
bibendum a tempor eget, luctus mattis ligula.
Outro post!
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.

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

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

34. Cores
3. Cores complementares

35. Cores
4. Esquema triádico

36. Tipografia
Tipos de fontes:
1. Com serifa
http://www.webdesignblog.com.br/design/aprendendo-sobre-tipografia-1/

37. Tipografia
2. Sem serifa
http://www.webdesignblog.com.br/design/aprendendo-sobre-tipografia-1/

38. Tipografia
3. Manuscritas
http://www.webdesignblog.com.br/design/aprendendo-sobre-tipografia-1/

39. Tipografia
4. Decorativas
http://www.webdesignblog.com.br/design/aprendendo-sobre-tipografia-1/

40. Tipografia
5. Símbolos
http://www.webdesignblog.com.br/design/aprendendo-sobre-tipografia-1/

41. Tipografia
Fontes seguras: fontes suportadas por todos
os navegadores

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

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

44. Inspiração
- CSS Based - http://cssbased.com/
- Favourite Web Awards - http://www.thefwa.com
- CSS Zen Garden - http://www.csszengarden.com/

45. Livros
-
Princípios do Web Design Maravilhoso
Autor: Jason Beaird
Editora: Alta Books
-
Design para quem não é designer
Autor: Robin Williams
Editora: Callis

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

47. Contato
Heloisa Biagi
heloisa.biagi@gmail.com
www.heloisabiagi.com
Linkedin e Facebook: procurar por
Heloisa Biagi