PinhoWirefrme

Sistema Integrado de LogĂ­stica e Pinho

E T A P A

1

D E S I G N

Wireframe

C (41) 9855 7878 F (41) 3014 4642

Sistema Integrado de Logística e Pinho

E T A P A

1

D E S I G N

Wireframe

Um wireframe de site web (ou também "wire frame web", "wireframe web", "web wireframing") é um guia visual básico usado em design de interface para sugerir a estrutura de um sítio web e relacionamentos entre suas páginas. Um wireframe web é uma ilustração semelhante do layout de elementos fundamentais na interface. Normalmente, wireframes são concluídos antes que qualquer trabalho artístico seja desenvolvido.

O objetivo do wireframe é ajudar o desenvolvedor de sistemas a entender o que o cliente está querendo, mostrando os requisitos funcionais de um sistema.

Wireframe então é um desenho básico de uma interface. Este desenho, no entanto, deve retratar toda a arquitetura de informação do sistema desejada pelo cliente. Deve-se observar também que o wireframe retrata a usabilidade do sistema. No entanto, este desenho deve ser muito simples e resumido, informando ao desenvolvedor apenas o que for estritamente necessário.

E T A P A

1

D E S I G N

Wireframe

E T A P A

2

D E S I G N

Mapa Navegação

E T A P A

3

D E S I G N

Hierarquia de Info.

E T A P A

4

D E S I G N

Nome e Identidade Visual

E T A P A

5

D E S I G N

Interface Final

Wireframe seria um esqueleto do site, que deve ser feito antes de iniciar a montagem do layout com cores e imagens.

Sistema Integrado de Logística e Pinho

E T A P A

1

D E S I G N

Wireframe

PONTOS POSITIVOS: - Interface amigável e de fácil usabilidade; - Utilização de família iconográfica para representar funções do sistema; - Menu principal respeitando nível hierárquico das informações; - Utilização de poucas cores mantendo Id. Visual da empresa; - Utilização de infográficos para representar relatórios e estatísticas;

R

E

F

E

R

Ê

N

C

I

A

S

Sistema Integrado de LogĂ­stica e Pinho

E T A P A

1

D E S I G N

Wireframe

P A I N E L

S E M Â N T I C O

Sistema Integrado de Logística e Pinho

E T A P A

1

D E S I G N

Wireframe

O QUE NÃO PODE FALTAR? - Identidade Visual Pinho; - Lógica de usabilidade do sistema; - Estética avançada e Interface cross browser; - Hierarquia de informações; - Sistema de busca avançado; - Geração de relatórios em poucos Clicks;

Sistema Integrado de Logística e Pinho

E T A P A

1

D E S I G N

Wireframe

Marca Pinho

LOGO PINHO

Marca do Produto

Sistema Integrado de Logística e Pinho

usuário senha relembrar

Acesso ao sistema

Copyright Pinho 2011

Direitos do autor

LIM

MPAR

PÁGINA DE ENTRADA - marca - login - senha - contato administrador sistema - copyright Pinho

Nome do Usuá rio

Seja bem-vindo

Menu Principal

Destaques / Promos / Infos / Randô mico ENTRAR

Fale Conosco

Contato com Pinho ou Programadores

Sistema Integrado de LogĂ­stica e Pinho

E T A P A

1

D E S I G N

Wireframe

Marca PRODUTO

LOGO PRODUTO

Click para ver +

buscador otimizado

Click pa

ICON PROJETO

ou digite o que procura

ICON INSU

ou digite o que

Copyright Pinho 2011

Direitos do autor

BUSCA OTIMIZADA - projetos - insumos - problemas

Menu Principal

Olรก Fulano de Tal

Logout LOGO PINHO

a ver +

Click para ver +

ICON PROBLEMA

MOS

procura

Nome do Usuรก ario

ou digite o que procura

Fale Conosco

Contato com Pinho ou Programadores

Marca PINHO

Sistema Integrado de LogĂ­stica e Pinho

E T A P A

1

D E S I G N

Wireframe

Marca PRODUTO

LOGO PRODUTO

Menu do projeto

PROJETO N 0xdf256854

Descritivo do Projeto | Ver Mais | Insumos | Nova busca | Gerar re

coluna 1

graficos relatorios

coluna 2

coluna 3

coluna 4

N 0xdf256854 N 0xdf256854 N 0xdf256854 N 0xdf256854 N 0xdf256854 N 0xdf256854 N 0xdf256854 Copyright Pinho 2011

Direitos do autor

BUSCA OTIMIZADA - projetos - insumos - problemas - grรกficos - print

Menu Principal

Nome do Usuรก ario

Logout

Olรก Fulano de Tal

LOGO PINHO

Click para ver +

Click para ver +

ICON PROJETO

ICON INSUMOS

ou digite o que procura

Click para ver +

ICON PROBLEMA

Marca PINHO buscador otimizado

elatรณrio | Tipos de Grรกficos | Problemas

coluna 5 ICONS

ICONS

ICONS

ICONS

Fale Conosco

Contato com Pinho ou Programadores

graficos relatorios

Sistema Integrado de LogĂ­stica e Pinho

E T A P A

1

D E S I G N

Wireframe