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