WIREFRAMES PARA SITES E DISPOSITIVOS MÓVEIS

UMA CONSTRUÇÃONECESSITA DE PROJETO

NA ENGENHARIAO PROJETO É DEFINIDO NA PLANTA

NO DESIGN DE INTERFACESO PROJETO É DEFINIDO COM OS WIREFRAMES

DEFININDOWIREFRAMES

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º PASSOSKETCH

COMECE RABISCANDO:LÁPIS E PAPEL

2º PASSOWIREFRAME

3º PASSOLAYOUT

4º PASSODESENVOLVIMENTO

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

X

OS WIREFRAMES

DEVEM SER FEITOS

ANTESDO LAYOUT…

MUITO OBRIGADO!