O documento discute wireframes para sites e dispositivos móveis. Explica que wireframes são esquemas bidimensionais em preto e branco que definem a estrutura e hierarquia de informação de uma interface antes do seu desenvolvimento. Também fornece dicas sobre como criar wireframes e lista ferramentas populares para wireframes de desktop e online.

1. WIREFRAMES PARA SITES
E DISPOSITIVOS MÓVEIS

2. UMA CONSTRUÇÃO
NECESSITA DE PROJETO

3. NA ENGENHARIA
O PROJETO É DEFINIDO NA PLANTA

4. NO DESIGN DE INTERFACES
O PROJETO É DEFINIDO COM OS WIREFRAMES

5. DEFININDO
WIREFRAMES

6. wire: linha
frame: quadro
DEFINIÇÃO

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

8. SKETCH (rabiscos)
LAYOUT
WIREFRAME
DESENVOLVIMENTO

9. 1º PASSO
SKETCH

10. COMECE RABISCANDO:
LÁPIS E PAPEL

12. 2º PASSO
WIREFRAME

17. 3º PASSO
LAYOUT

21. 4º PASSO
DESENVOLVIMENTO

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

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

25. http://www.sccc.premiumdw.com/wp-content/uploads/2009/04/tutorial-wireframe-01.png
X

26. OS WIREFRAMES
DEVEM SER FEITOS
ANTES
DO LAYOUT…

27. MUITO
OBRIGADO!