aula 06 layot

Prévia do material em texto

Aula 06: layout
Princípios do design
Cores
Grids
Wireframes
Mockup
Profª Mônica Paz
 
Criadores de Sites Rápidos
Wix.com: Mostre o Que Você Pode Fazer
<https://www.youtube.com/watch?v=-
mYYvO2WAVo>
 
 
A psicologia das cores e sua 
influência nas vendas
● Infográfico PDF (inglês): A psicologia das 
cores e sua influência nas vendas
– 
<http://www.consumidoresdigitais.com.br/psic
ologia-das-cores-e-sua-influencia-nas-
vendas/>
● SlideShow: O uso das cores na publicidade
– <https://brenobrito.wordpress.com/2013/12/14/o
-uso-das-cores-na-publicidade/>
– Ver sobre combinações
 
Wireframe - sketch
 
Grid ou Guias
● Devem ser calculadas para dividir o layout e 
auxiliar na composição dos elementos do 
layout
 
Sites Responsivos
– 1200 pixels – Desktops com monitores 
widescreen
– 960 pixels – Tablets em formato paisagem e 
monitores antigos
– 768 pixels – Tablets em formato retrato
– 480 pixels – Smartphones em formato 
paisagem
– 320 pixels – Smartphones em formato retrato
 
 
 
 
 
 
 
 
Temas para pesquisa
● Ferramentas gratuitas para criação de 
wireframes (desktop e/ou online)
 
Canvas
 
Na sequência veremos...
● Introdução ao HTML
 
Referências
● Grades e guias no GIMP 
– <http://docs.gimp.org/2.9/pt_BR/gimp-concepts-
image-grid-and-guides.html>
● Design Responsivo na prática: do rascunho ao 
digital
– Recursos para baixar: grids, imagens, actions
– <http://tableless.com.br/design-responsivo-na-
pratica-do-rascunho-ao-digita/>
	Slide 1
	Slide 2
	Slide 3
	Slide 4
	Slide 5
	Slide 6
	Slide 7
	Slide 8
	Slide 9
	Slide 10
	Slide 11
	Slide 12
	Slide 13
	Slide 14
	Slide 15
	Slide 16
	Slide 17
	Slide 18