7/18/2019 Wire Frames

http://slidepdf.com/reader/full/wire-frames-56d4f7028ec08 1/6

WireframesProf. Thiago G. Traue

Wireframes - Introdução

O processo de design pode ser muito complicado

Muitas coisas acontecem ao mesmo tempo. Muitas pessoas de diferentes

áreas trabalham juntas (simultaneamente) num mesmo projeto.

 Todo mundo tem seu papel. A comunicação entre todas essas pessoas

tem que ser muito boa, para que o resultado final seja muito bom!

2

Wireframes - Introdução

Superficie da a ideia visual de tudo junto.

Como o produto final irá parecer?

Esqueleto torna a estrutura concreta. O que

os componentes permitirão as pessoas

usarem?

Estrutura da forma ao escopo. Como as

 peças ficarão juntas e irão se comportar?

Escopo transforma estratégia em requisitos.

Que funcionalidades precisaremos incluir?

Estratégia é onde tudo começa. O que

faremos? O que os usuários querem?

3

Wireframes - Introdução

 A tarefa principal de um projetista

é focar no esqueleto e na

estrutura

Uma das possíveis ferramentaspara isso é o uso de Wireframes

{4

7/18/2019 Wire Frames

http://slidepdf.com/reader/full/wire-frames-56d4f7028ec08 2/6

Wireframes - Introdução

 A ideia dos wireframes veio da modelagem 3D!

Mas o que é um Wireframe…?

5

Wireframes - O que é?

“(…) é um guia visual básico usado em design de interface para sugerir a

estrutura de um site e relacionamentos entre suas páginas” (wiki) 

“Wireframe é uma tecnica de design de baixo custo, rápida e in terativa, que

oferece um dos melhores métodos para se conseguir obter conhecimentos

iniciais do projeto.” (Nielsen)

6

Wireframes - O que é?

“Uma representação visual de uma interface; utilizado para comunicar a

estrutura, o conteúdo, hierarquia de informação, funcionalidade e

comportamento de uma interface”.

7

Wireframes - Para que servem?

 Auxiliam arquitetos de informação em suas especificações de cada

página (organização)

 Auxiliam os designers a definir estilos, posicionamentos e guiar seu

trabalho

Direcionam os conteudistas na especificação da informação contida em

cada “parte" do site

 Auxiliam a validação de requisitos funcionais

8

7/18/2019 Wire Frames

http://slidepdf.com/reader/full/wire-frames-56d4f7028ec08 3/6

Wireframes - Para que servem?

 Auxiliam o cliente na validação da aparência do site, antes de sua

implementação

 Auxiliam os desenvolvedores a programar o fluxo de informações do

sistema

Intregram áreas!

E o melhor de tudo: Custa pouco!

9

Wireframes - Para que não servem?

Representar o design visual

Mostrar a relação entre elementos gráficos

 Transmitir a marca ou identidade

10

Wireframes X Modelos X Protótipos

Modelos focam sobre os elementos de design visual do site. São próximos

ou idênticos ao web design final efetivo e incluem todos os gráficos,

tipografia e outros elementos da página. Modelos geralmente são apenas

arquivos de imagem.

Protótipos são layouts semi-funcionais das páginas. Servem para dar uma

ideia de maior fidelidade do site real. Esta fase antecede a programação 

da lógica de negócios do site. Enquanto eles não podem ter toda a

funcionalidade, eles geralmente dão aos clientes a capacidade de interagir

com os elementos e simular a forma como o site irá trabalhar. Protótipos

podem ou não incluir elementos de design finalizado.

11

Wireframes X Modelos X Protótipos

12

Wireframe Modelo Protótipo

7/18/2019 Wire Frames

http://slidepdf.com/reader/full/wire-frames-56d4f7028ec08 4/6

Wireframes - Componentes Wireframes - Componentes

Placeholder Box

Usado para regiões que conterão texto,

imagens, informações, blocos etc.

Wireframes - Componentes

Botão

Uso para representar botões que

submeter formulários

Wireframes - Componentes

Texto

Usado para representar locais com

textos, links etc.

7/18/2019 Wire Frames

http://slidepdf.com/reader/full/wire-frames-56d4f7028ec08 5/6

Wireframes - Considerações importantes

Em regiões de imagens, não inserir a imagem final, apenas o que e;a

representa

Em regiões de texto, não inserir texto final, apenas indicativos que alí

haverá texto

Evitar Lorem Ipsum (isso distrai) - Texto padrão usado para testes

“Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam eget

 ligula eu lectus lobortis condimentum. Aliquam nonummy auctor

 massa (…)”

Wireframes - Considerações importantes

Lembre-se: Wireframes são representações simples!

 Vamos aos exemplos…

Wireframes - Exemplos

Wireframe do Twitter

Wireframes - Exemplos

Resultado final do wireframedo Twitter

7/18/2019 Wire Frames

http://slidepdf.com/reader/full/wire-frames-56d4f7028ec08 6/6

Wireframes - Exemplos

Wireframe do Twitter

(melhorando um pouco…)

Wireframes - Exemplos

Outro exemplo..

Wikipedia

Demonstração de uma ferramenta de

desenvolvimento de wireframes…

Usaremos a ferramenta online e gratuita disponivel em

http://quirktools.com/