1. 2012
Tersis Zonato
e projetos de multimídia
Wireframes para sites
http://www.localwisdom.com/wp-content/uploads/2010/01/4239685407_910c832d73_o.jpg

2. sem um projeto definido
Não se faz uma construção
http://www.industryleadersmagazine.com/wp-content/uploads/2011/03/j0401617.jpg

3. é definido na planta
Na engenharia, o projeto
http://www.choosehometheater.com/userfiles/Blueprint.jpg

4. temos os wireframes
Para projetos multimídia
http://agenciathinkers.com.br/wp-content/uploads/cupido-wireframe1.jpg

5. wire: linha
Wireframe:
frame: quadro
http://www.wireframeshowcase.com/images/uploads/ignacio_puga_main_01.jpg

6. CONCEITO
O wireframe é o esqueleto do projeto, que permite
definir a hierarquia de informação;
É um diagrama bidimensional em preto e branco que
sugere a estrutura que irá compor uma interface;
Deve incluir informação suficiente para refletir o que
realmente irá aparecer no seu site ou projeto;
É uma excelente ferramenta para documentação do
projeto e aprovação pelo cliente.

7. http://d3pr5r64n04s3o.cloudfront.net/tuts/341_wf/wireframe-bare.png

8. http://d3pr5r64n04s3o.cloudfront.net/tuts/341_wf/wireframe-withcopy.png

9. http://d3pr5r64n04s3o.cloudfront.net/tuts/341_wf/wireframe-withvisuals.png

10. http://d3pr5r64n04s3o.cloudfront.net/tuts/341_wf/wireframe-withgreys.png

11. SKETCH (rabiscos)
WIREFRAME
LAYOUT
DESENVOLVIMENTO

12. Comece com lápis e papel
http://www.publicdomainpictures.net/pictures/10000/velka/1393-1247315873v1Xa.jpg

13. http://personavirtual.files.wordpress.com/2008/04/wireartesanato.jpg

14. http://www.richardbarros.com.br/blog/artigos/dicas-para-desenvolvimento-de-wireframes
Ferramentas para desktop:
• Axure • Justinmind Prototyper
• Balsamiq Mockups • Microsoft Visio
• FlairBuilder • MockApp
• FluidIA • MockupScreens
• ForeUI • OmniGraffle
• DENIM • OverSite
• DesignerVista • Pencil
• EasyPrototype • SketchFlow
• GUI Design Studio • WireframeSketcher

15. http://www.richardbarros.com.br/blog/artigos/dicas-para-desenvolvimento-de-wireframes
Ferramentas online:
• Cacoo • Lovely Charts
• Gliffy • Lumzy
• HotGloo • MockFlow
• iPhone Mockup • Mockingbird
• iPlotz • Pidoco
• Jumpchart • ProtoShare
• JustProto ...

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

17. ESSA ETAPA!
NUNCA PULE
http://poppemieke.deviantart.com/art/scream-Created-for-Drawing-Day-124978049

18. http://poppemieke.deviantart.com/art/scream-Created-for-Drawing-Day-124978049
Nunca pule essa etapa:
Desenvolver wireframes é
um passo importante no
processo de design;
Não é trabalhoso e é
essencial ao projeto;
Deve ser feito antes do
layout.

19. Muito obrigado!
www.tersis.com.br
Tersis Zonato
2012