Projeto: Smart GPCliente: Smart Modular Technologies

Versão 1.1Criado por Lucas Mattos29 de Abril de 2012

Documentação

Design

Design

Objetivo

O objetivo desse documento é auxiliar as equipes de desenvolvimento e testes.Aumentar a produtividade e garantir a qualidade.

Paleta de Cores

Abaixo todas as cores utilizadas no projeto:

Preto#000000

Cinza 01#414042

Azul 02#004082

Cinza 02#808080

Azul 01#0071BC

Azul 03#00FFFF

Texturas

Abaixo todas as texturas utilizadasno projeto:

Bg_Pattern01.jpg

Documentação Design - Projeto Smart GP

Ícones

Ícones de ação única:

Ícones genéricos:

Tamanhos:

NORMAL DESABILITADO

NEGATIVOS

NOME

Do ícone = 15x15pxDa área = 40x40px

Obs.: O tamanho do ícone pode variar em até 3px na largura ou altura.Isso devido ao alinhamento por ilusão de óptica.

Home

Noti�cações

Salvar Projeto

Per�l

Con�gurações do Sistema

Logout

Move Conteúdo Esquerda

Move Conteúdo Direita

Calendário

OVER NORMAL DESABILITADO OVER SPECIAL

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

Deletar/Excluir - ---

Documentação Design - Projeto Smart GP

---

NORMAL DESABILITADO

NEGATIVOS

NOME OVER NORMAL DESABILITADO OVER SPECIAL

Textbox

Radio Button

Botão Primário

text italic preto 12ptleft, bottom, right - border 1px solid black;top - border 0px;

Azul 1 - Altura 28pxTrebuchet 12px regular, branco #fff

Azul 2 - Altura 22pxTrebuchet 12px regular, branco #fff

text regular preto 12ptleft, bottom, right - border 1px solid black;top - border 0px;

AtivoNormal:Placeholder

Ativo DesabilitadoNormal

Ativo/Down DesabilitadoNormal

Botão Secundário

Ativo/Down DesabilitadoNormal

Checkbox

Ativo DesabilitadoNormal

Sample text Sample text

Documentação Design - Projeto Smart GP

Textbox Destaque

text italic cinza 2 40ptborder 0px;

AtivoNormal:Placeholder

Label 1

text regular azul 1 40ptborder 0px;

Label 1

Componentes

Label 1 Label 1 Label 1 Label 1 Label 1 Label 1

Tipografia

Todas as fontes utilizadas no sistema, tamanho, cor e tipo:

Estrutura

MenuInformaçõesdo sistema

Menu deAcesso

Botões deNavegação Barra Superior

(breadcrumb, login, perfil)

Raleway Thin, 36pt, Azul 02 TítulosRaleway Thin, 16pt, Cinza 01Título Grids/Tabelas

Trebuchet MS, 12ptTextos

Trebuchet MS, 16pt, Azul 02/Cinza 01Subtítulos/Mensagens de Apoio

Trebuchet MS, 12pt, Cinza 02Textos barra lateral

Trebuchet MS, 12pt, BrancoTextos barra superior/ Tooltips

Layout

ColunaFixa

Colunas Móveis(deslize horizontal)

Documentação Design - Projeto Smart GP

Documentação Design - Projeto Smart GP

Navegação “Torre”

Conteúdo em Foco

Próximo conteúdo(Troca de página)

Conteúdo Anterior(Troca de página)

Página 1

Página 1

Página 2

Página 3

Página 4 Página 2 Página 3

Conteúdo em Foco

Muda o conteúdoem foco com oteclado.

Link Ativosincronizado c/o conteúdo emfoco.

Página 2

Página 1

Página 2

Página 3

Página 4 Página 3 Página 4

Título

Conteúdo

(Textos, Forms, Grids,Imagens, Vídeos eoutros tipos demídia.)

Barra Ações

Ações diferentespara cada coluna.

Cada coluna teráessa estrutura.

Utilizamos o conceito de navegação “Torre”, que consiste em movimentar o conteúdo de forma horizon-tal e vertical. A tela deverá responder as ações do mouse, teclado e adaptável a touch screens.

Documentação Design - Projeto Smart GP

Conteúdo em FocoCada coluna pode ter uma largura diferente, mas nunca poderá sermaior do que a tela.

Dimensões e Margens

Para tornarmos o a estrutura mais adaptável, estipulamos que poucos objetos teriam tamanhos fixos, na estrutura temos algumas barras e botões:

Subtítulo

810.541.00

Subtítulo

810.541.00

Título

Título Grid Ano Valor Orçado Valor RealizadoJaneiro

Fevereiro

Março

Maio

Junho

Julho

Agosto

Setembro

Outubro

Novembro

Dezembro

2011

2011

2011

2011

2011

2011

2011

2011

2011

2011

2011

48.246,79

57.449,39

50.849,39

52.829,39

50.849,40

1.834,77

36.847,42

62.548,07

68.124,07

68.124,07

68.124,07

50.479,22

48.246,79

57.449,39

50.849,39

52.829,39

50.849,40

1.834,77

36.847,42

62.548,07

68.124,07

68.124,07

68.124,07

50.479,22

Saldo48.246,79

57.449,39

50.849,39

52.829,39

50.849,40

1.834,77

36.847,42

62.548,07

68.124,07

68.124,07

68.124,07

50.479,22

Abril 2011

Item 1 - 10 of 57 items

Tooltip descriçãodo ícone.

Sistema de Gerência deProjetos P&D

Utilize as setas doteclado para trocar oconteúdo em foco:

Smart GP

PT/TADispêndiosAportesCessõesDesc. InvestimentosCronograma FísicoResultados

Planejamento

Realização

Relatórios

Nome Projeto

> bread > crumb Usuário Notificações Logout

Título

> bread > crumb Usuário Notificações LogoutBarra superior - height 40px

Cada botão 40x40px

Barra de ações - height 72px

Utilize as setas doteclado para trocar oconteúdo em foco:

PT/TADispêndiosAportesCessõesDesc. InvestimentosCronograma FísicoResultados

Planejamento

Realização

Relatórios

Nome Projeto

Sistema de Gerência deProjetos P&D

Smart GP

Menu de

Acesso

width 150px

Subtítulo

810.541.00

Subtítulo

810.541.00

Título Grid Ano Valor OrçadoValor OrçadoValor Orçado Valor RealizadoJaneiroJaneiroJaneiro

FevereiroFevereiroFevereiro

Março

Maio

Junho

Julho

Agosto

Setembro

Outubro

Novembro

Dezembro

2011

2011

2011

2011

2011

2011

2011

2011

2011

2011

2011

48.246,7948.246,7948.246,79

57.449,39

50.849,39

52.829,39

50.849,40

1.834,77

36.847,42

62.548,07

68.124,07

68.124,07

68.124,07

50.479,22

48.246,79

57.449,39

50.849,39

52.829,39

50.849,40

1.834,77

36.847,42

62.548,07

68.124,07

68.124,07

68.124,07

50.479,22

Saldo48.246,79

57.449,39

50.849,39

52.829,39

50.849,40

1.834,77

36.847,42

62.548,07

68.124,07

68.124,07

68.124,07

50.479,22

Abril 2011

Item 1 - 10 of 57 items

Tooltip descriçãodo ícone.

Subtítulo

810.541.00

Subtítulo

810.541.00

Título

Título Grid Ano Valor Orçado Valor RealizadoJaneiro

Fevereiro

Março

Maio

Junho

Julho

Agosto

Setembro

Outubro

Novembro

Dezembro

2011

2011

2011

2011

2011

2011

2011

2011

2011

2011

2011

48.246,79

57.449,39

50.849,39

52.829,39

50.849,40

1.834,77

36.847,42

62.548,07

68.124,07

68.124,07

68.124,07

50.479,22

48.246,79

57.449,39

50.849,39

52.829,39

50.849,40

1.834,77

36.847,42

62.548,07

68.124,07

68.124,07

68.124,07

50.479,22

Saldo48.246,79

57.449,39

50.849,39

52.829,39

50.849,40

1.834,77

36.847,42

62.548,07

68.124,07

68.124,07

68.124,07

50.479,22

Abril 2011

Item 1 - 10 of 57 items

Tooltip descriçãodo ícone.

Sistema de Gerência deProjetos P&D

Utilize as setas doteclado para trocar oconteúdo em foco:

Smart GP

PT/TADispêndiosAportesCessõesDesc. InvestimentosCronograma FísicoResultados

Planejamento

Realização

Relatórios

Nome Projeto

> bread > crumb Usuário Notificações Logout

Título

> bread > crumb Usuário Notificações Logout

Utilize as setas doteclado para trocar oconteúdo em foco:

PT/TADispêndiosAportesCessõesDesc. InvestimentosCronograma FísicoResultados

Planejamento

Realização

Relatórios

Nome Projeto

Sistema de Gerência deProjetos P&D

Smart GP

Subtítulo

810.541.00

Subtítulo

810.541.00

Título Grid Ano Valor OrçadoValor OrçadoValor Orçado Valor RealizadoJaneiroJaneiroJaneiro

FevereiroFevereiroFevereiro

Março

Maio

Junho

Julho

Agosto

Setembro

Outubro

Novembro

Dezembro

2011

2011

2011

2011

2011

2011

2011

2011

2011

2011

2011

48.246,7948.246,7948.246,79

57.449,39

50.849,39

52.829,39

50.849,40

1.834,77

36.847,42

62.548,07

68.124,07

68.124,07

68.124,07

50.479,22

48.246,79

57.449,39

50.849,39

52.829,39

50.849,40

1.834,77

36.847,42

62.548,07

68.124,07

68.124,07

68.124,07

50.479,22

Saldo48.246,79

57.449,39

50.849,39

52.829,39

50.849,40

1.834,77

36.847,42

62.548,07

68.124,07

68.124,07

68.124,07

50.479,22

Abril 2011

Item 1 - 10 of 57 items

Tooltip descriçãodo ícone.

Margem

(Padding)

17px

Margem (Padding) 10 px

Margem

(Padding)

17px