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

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

http://w

ww.choosehometheater.c

om/userfiles/Blueprin

t.jpg

Na engenharia, o projeto é definido na planta

http://agenciathinke

rs.com.br/wp-content/uploads/cupido-w

ireframe1.jp

g

Para projetos multimídia temos os wireframes

Wireframe:

wire: linhaframe: quadro

http://w

ww.w

ireframesh

owcase.com/images/uploads/ignacio_p

uga_m

ain_0

1.jp

g

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.

http://d3pr5r64n04s3

o.cloudfront.net/tuts/341_w

f/wire

frame-bare.png

http://d3pr5r64n04s3

o.cloudfront.net/tuts/341_w

f/wire

frame-w

ithcopy.png

http://d3pr5r64n04s3

o.cloudfront.net/tuts/341_w

f/wire

frame-w

ithvisu

als.png

http://d3pr5r64n04s3

o.cloudfront.net/tuts/341_w

f/wire

frame-w

ithgreys.png

SKETCH (rabiscos)

LAYOUT

WIREFRAME

DESENVOLVIMENTO

http://w

ww.publicdomainpictures.net/pictures/10000/velka/1393-1247315873v1

Xa.jp

g

Comece com lápis e papel

http://personavirtual.files.wordpress.com/2008/04/w

ireartesanato.jp

g

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

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

http://w

ww.sccc.premiumdw.com/w

p-content/uploads/2009/04/tutoria

l-wire

frame-01.png

http://poppemieke

.deviantart.com/art/scream-C

reated-for-Drawing-D

ay-124978049

NUNCA PULE ESSA ETAPA!

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

Muito obrigado!www.tersis.com.br

Tersis Zonato2012