Wireframes para sites e projetos de multimídia
-
Upload
tersis-zonato -
Category
Design
-
view
638 -
download
2
Transcript of Wireframes para sites e projetos de multimídia
![Page 1: Wireframes para sites e projetos de multimídia](https://reader034.fdocumentos.tips/reader034/viewer/2022052600/55878a42d8b42a47318b46ab/html5/thumbnails/1.jpg)
Wireframes para sitese projetos de multimídia
Tersis Zonato2012
http://w
ww.lo
calwisdom.com/w
p-content/uploads/2010/01/4239685407_9
10c832d73_o
.jpg
![Page 2: Wireframes para sites e projetos de multimídia](https://reader034.fdocumentos.tips/reader034/viewer/2022052600/55878a42d8b42a47318b46ab/html5/thumbnails/2.jpg)
http://w
ww.industryleadersmagazine.com/w
p-content/uploads/2011/03/j0401617.jp
g
Não se faz uma construção sem um projeto definido
![Page 3: Wireframes para sites e projetos de multimídia](https://reader034.fdocumentos.tips/reader034/viewer/2022052600/55878a42d8b42a47318b46ab/html5/thumbnails/3.jpg)
http://w
ww.choosehometheater.c
om/userfiles/Blueprin
t.jpg
Na engenharia, o projeto é definido na planta
![Page 4: Wireframes para sites e projetos de multimídia](https://reader034.fdocumentos.tips/reader034/viewer/2022052600/55878a42d8b42a47318b46ab/html5/thumbnails/4.jpg)
http://agenciathinke
rs.com.br/wp-content/uploads/cupido-w
ireframe1.jp
g
Para projetos multimídia temos os wireframes
![Page 5: Wireframes para sites e projetos de multimídia](https://reader034.fdocumentos.tips/reader034/viewer/2022052600/55878a42d8b42a47318b46ab/html5/thumbnails/5.jpg)
Wireframe:
wire: linhaframe: quadro
http://w
ww.w
ireframesh
owcase.com/images/uploads/ignacio_p
uga_m
ain_0
1.jp
g
![Page 6: Wireframes para sites e projetos de multimídia](https://reader034.fdocumentos.tips/reader034/viewer/2022052600/55878a42d8b42a47318b46ab/html5/thumbnails/6.jpg)
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.
![Page 7: Wireframes para sites e projetos de multimídia](https://reader034.fdocumentos.tips/reader034/viewer/2022052600/55878a42d8b42a47318b46ab/html5/thumbnails/7.jpg)
http://d3pr5r64n04s3
o.cloudfront.net/tuts/341_w
f/wire
frame-bare.png
![Page 8: Wireframes para sites e projetos de multimídia](https://reader034.fdocumentos.tips/reader034/viewer/2022052600/55878a42d8b42a47318b46ab/html5/thumbnails/8.jpg)
http://d3pr5r64n04s3
o.cloudfront.net/tuts/341_w
f/wire
frame-w
ithcopy.png
![Page 9: Wireframes para sites e projetos de multimídia](https://reader034.fdocumentos.tips/reader034/viewer/2022052600/55878a42d8b42a47318b46ab/html5/thumbnails/9.jpg)
http://d3pr5r64n04s3
o.cloudfront.net/tuts/341_w
f/wire
frame-w
ithvisu
als.png
![Page 10: Wireframes para sites e projetos de multimídia](https://reader034.fdocumentos.tips/reader034/viewer/2022052600/55878a42d8b42a47318b46ab/html5/thumbnails/10.jpg)
http://d3pr5r64n04s3
o.cloudfront.net/tuts/341_w
f/wire
frame-w
ithgreys.png
![Page 11: Wireframes para sites e projetos de multimídia](https://reader034.fdocumentos.tips/reader034/viewer/2022052600/55878a42d8b42a47318b46ab/html5/thumbnails/11.jpg)
SKETCH (rabiscos)
LAYOUT
WIREFRAME
DESENVOLVIMENTO
![Page 12: Wireframes para sites e projetos de multimídia](https://reader034.fdocumentos.tips/reader034/viewer/2022052600/55878a42d8b42a47318b46ab/html5/thumbnails/12.jpg)
http://w
ww.publicdomainpictures.net/pictures/10000/velka/1393-1247315873v1
Xa.jp
g
Comece com lápis e papel
![Page 13: Wireframes para sites e projetos de multimídia](https://reader034.fdocumentos.tips/reader034/viewer/2022052600/55878a42d8b42a47318b46ab/html5/thumbnails/13.jpg)
http://personavirtual.files.wordpress.com/2008/04/w
ireartesanato.jp
g
![Page 14: Wireframes para sites e projetos de multimídia](https://reader034.fdocumentos.tips/reader034/viewer/2022052600/55878a42d8b42a47318b46ab/html5/thumbnails/14.jpg)
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://w
ww.richardbarros.com.br/blog/artigos/dicas-para-desenvo
lvim
ento-de-w
ireframes
![Page 15: Wireframes para sites e projetos de multimídia](https://reader034.fdocumentos.tips/reader034/viewer/2022052600/55878a42d8b42a47318b46ab/html5/thumbnails/15.jpg)
Ferramentas online:
• Cacoo• Gliffy• HotGloo• iPhone Mockup• iPlotz• Jumpchart• JustProto
• Lovely Charts• Lumzy• MockFlow• Mockingbird• Pidoco• ProtoShare...
http://w
ww.richardbarros.com.br/blog/artigos/dicas-para-desenvo
lvim
ento-de-w
ireframes
![Page 16: Wireframes para sites e projetos de multimídia](https://reader034.fdocumentos.tips/reader034/viewer/2022052600/55878a42d8b42a47318b46ab/html5/thumbnails/16.jpg)
http://w
ww.sccc.premiumdw.com/w
p-content/uploads/2009/04/tutoria
l-wire
frame-01.png
![Page 17: Wireframes para sites e projetos de multimídia](https://reader034.fdocumentos.tips/reader034/viewer/2022052600/55878a42d8b42a47318b46ab/html5/thumbnails/17.jpg)
http://poppemieke
.deviantart.com/art/scream-C
reated-for-Drawing-D
ay-124978049
NUNCA PULE ESSA ETAPA!
![Page 18: Wireframes para sites e projetos de multimídia](https://reader034.fdocumentos.tips/reader034/viewer/2022052600/55878a42d8b42a47318b46ab/html5/thumbnails/18.jpg)
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.
http://poppemieke
.deviantart.com/art/scream-C
reated-for-Drawing-D
ay-124978049
![Page 19: Wireframes para sites e projetos de multimídia](https://reader034.fdocumentos.tips/reader034/viewer/2022052600/55878a42d8b42a47318b46ab/html5/thumbnails/19.jpg)
Muito obrigado!www.tersis.com.br
Tersis Zonato2012