WIREFRAMES PARA SITES
E DISPOSITIVOS MÓVEIS
UMA CONSTRUÇÃO
NECESSITA DE PROJETO
NA ENGENHARIA
O PROJETO É DEFINIDO NA PLANTA
NO DESIGN DE INTERFACES
O PROJETO É DEFINIDO COM OS WIREFRAMES
DEFININDO
WIREFRAMES
wire: linha
frame: quadro
DEFINIÇÃO
CONCEITO
• O wireframe é o esqueleto do projeto. Com ele é
possível definir a hierarquia de informação
• É um diagrama bidimensional em preto e branco
que sugere a estrutura que irá compor a interface
• Deve incluir informação suficiente para refletir o
que realmente irá aparecer na tela
• É uma excelente ferramenta para documentação
do projeto e aprovação pelo cliente
SKETCH (rabiscos)
LAYOUT
WIREFRAME
DESENVOLVIMENTO
1º PASSO
SKETCH
COMECE RABISCANDO:
LÁPIS E PAPEL
2º PASSO
WIREFRAME
3º PASSO
LAYOUT
4º PASSO
DESENVOLVIMENTO
Ferramentas para desktop:
•!Axure
•!Balsamiq Mockups
•!FlairBuilder
•!FluidIA
•!ForeUI
•!DENIM
•!DesignerVista
•!EasyPrototype
•!GUI Design Studio
•!Justinmind Prototyper
•!Microsoft Visio
•!MockApp
•!MockupScreens
•!OmniGraffle
•!OverSite
•!Pencil
•!SketchFlow
•!WireframeSketcher
http://www.richardbarros.com.br/blog/artigos/dicas-para-desenvolvimento-de-wireframes
Ferramentas online:
• Cacoo
• Gliffy
• HotGloo
• iPhone Mockup
• iPlotz
• Jumpchart
• JustProto
• Lovely Charts
• Lumzy
• MockFlow
• Mockingbird
• Pidoco
• ProtoShare
...
http://www.richardbarros.com.br/blog/artigos/dicas-para-desenvolvimento-de-wireframes
http://www.sccc.premiumdw.com/wp-content/uploads/2009/04/tutorial-wireframe-01.png
X
OS WIREFRAMES
DEVEM SER FEITOS
ANTES
DO LAYOUT…
MUITO
OBRIGADO!

Wireframes para sites e dispositivos móveis