Sumrio

1. Objetivos ......................................................................................................................................................... 4
2. Website - Governo do Estado - Aparncia Geral................................................................................................. 5
2.1.1. Topo ........................................................................................................................................................................................................6
2.1.2. Topo Aba Sites do Governo......................................................................................................................................................7
2.1.3. Menu Lateral.........................................................................................................................................................................................8
2.1.4. Contedo Lateral................................................................................................................................................................................9
2.1.5. Pgina Inicial - Banner..................................................................................................................................................................... 10
2.1.6. Pgina Inicial Contedo.............................................................................................................................................................. 11
2.1.7. Pginas Internas Tipo de Contedo: Artigo ........................................................................................................................ 12
2.1.8. Pginas Internas Tipo de Contedo: Tabela....................................................................................................................... 13
2.1.9. Pginas Internas Tipo de Contedo: Galeria de Fotos .................................................................................................... 14
2.1.10. Pginas Internas Tipo de Contedo: Formulrios.......................................................................................................... 15
2.1.11.Pginas Internas Tipo de Contedo: Notcias ................................................................................................................... 16
2.1.12. Pginas Internas Tipo de Contedo: Resultado de Busca........................................................................................... 17
2.1.13. Pginas Internas Tipo de Contedo: Downloads ............................................................................................................ 18
2.1.14. Rodap.............................................................................................................................................................................................. 19
2.1.15. Mensagem de Erro........................................................................................................................................................................ 20
3. Websites - rgo e Secretarias - Aparncia Geral............................................................................................. 21
3.1.1. Topo ..................................................................................................................................................................................................... 22
4. Websites Aparnciaem Plataformas Mobile .................................................................................................. 23

Sumrio
5. Sistemas Aparncia Geral............................................................................................................................. 24
5.1.1. Topo ..................................................................................................................................................................................................... 25
5.1.2. Tela de Login ..................................................................................................................................................................................... 26
5.1.3. Pgina Interna................................................................................................................................................................................... 27
5.1.4. Pginas Internas Topo ................................................................................................................................................................ 28
5.1.5. Pginas Internas Menu ............................................................................................................................................................... 29
5.1.6. Pginas Internas Caminho da Seo ...................................................................................................................................... 30
5.1.7. Pgina Inicial ...................................................................................................................................................................................... 31
5.1.8. Pginas Internas Tipo de Contedo: Tabela....................................................................................................................... 32
5.1.9. Mensagem de Erro .......................................................................................................................................................................... 33
6. Sistemas Aparncia em Plataformas Mobile ................................................................................................. 34

1. Objetivos

Homogeneidade as atividades de desenvolvimento e manuteno
Garantir a exclusividade na identidade visual
Ausncia de efeitos visualmente poludos
Otimizar a velocidade e facilidade de navegao
Design simetricamente estruturado em cores suaves
Regras de estruturao como medidas, cores e propriedades

2. Website - Governo do Estado - Aparncia Geral

2.1. Website - Governo do Estado - Detalhamento de Elementos

2.1.1. Topo

- Definio: rea composta dos seguintes elementos: apresentao da logo do Governo com link para o site do
Governo, menus de atalho para pginas do Governo (Piau, Governo, Servios, Investimento, Notcias com links para
o site do Governo, link para outros sites do Governo e Secretarias e link para o site do Sistema Eletrnico de
Informaes ao Cidado (Acesso Informao). Esses elementos devem ser mantidos no mesmo posicionamento e
aparncia em todas as sees internas do website.

2.1. Website - Governo do Estado - Detalhamento de Elementos

2.1.2. Topo Aba Sites do Governo

- Definio: Pop-up em forma de balo listando links de sites do Governo em organizao por ordem alfabtica, para
uma melhor disposio na listagem dos link.

2.1. Website - Governo do Estado - Detalhamento de Elementos

2.1.3. Menu Lateral

- Definio: O menu de posicionamento lateral contm os link de todas sees e sub-sees dos websites, onde os
visitantes podem navegar pelas informaes oferecidas. O mesmo dispe de apresentaes com aparncias
diferenciadas, variando de acordo com a interao do visitante.

2.1. Website - Governo do Estado - Detalhamento de Elementos

2.1.4. Contedo Lateral

- Definio: Divulgao do contedo lateral pode contar com vdeos, fotos, banners, calendrio e etc. Esse espao
lateral serve para exposio de material que dever estar exposto em todas as sees do site.

2.1. Website - Governo do Estado - Detalhamento de Elementos

2.1.5. Pgina Inicial - Banner











- Definio: Ferramenta para divulgao de banners de destaque para utilizao de comunicados e notcias. Essa
ferramenta possibilita fazer divulgao de diversas informaes ao mesmo tempo utilizando visualizao em
slideshow com troca manual de banner.

10

2.1. Website - Governo do Estado - Detalhamento de Elementos

2.1.6. Pgina Inicial Contedo













- Definio: Espao destinado a aplicao e contedo como textos, imagens e vdeos na pgina inicial. Aqui pode-se
resumir todas as principais, sees de destaque do website com seus principais ou mais recentes tpicos.

11

2.1. Website - Governo do Estado - Detalhamento de Elementos

2.1.7. Pginas Internas Tipo de Contedo: Artigo

- Definio: As pginas internas servem para divulgaes das informaes para os visitantes em formato de textos,
imagens e vdeos. Aqui os visitantes encontraram as informaes que pesquisam.

12

2.1. Website - Governo do Estado - Detalhamento de Elementos

2.1.8. Pginas Internas Tipo de Contedo: Tabela












- Definio: A pgina interna do tipo Tabela, serve para apresentao de informaes com a necessidade desse tipo
de formato. Importante seguir seus padres de alinhamentos, fontes e cores.

13

2.1. Website - Governo do Estado - Detalhamento de Elementos

2.1.9. Pginas Internas Tipo de Contedo: Galeria de Fotos

- Definio: A pgina interna do tipo Galeria de Fotos, servem para divulgao de imagens de eventos e outras aes.
Aqui possvel organizar as fotos em lbuns e categorias.

14

2.1. Website - Governo do Estado - Detalhamento de Elementos

2.1.10. Pginas Internas Tipo de Contedo: Formulrios

- Definio: Os formulrios sevem para preenchimentos por parte dos visitantes em busca de informaes, contato,
solicitaes ou at mesmo para destino de pesquisas e enquetes. Todas as mensagem devem ser enviadas para os
emails dos responsveis de destino.

15

2.1. Website - Governo do Estado - Detalhamento de Elementos

2.1.11.Pginas Internas Tipo de Contedo: Notcias

- Definio: Aqui so divulgadas as ultimas informaes atualizadas para os visitantes. Por meio dessa rea o
visitantes podem acompanhar o que h de mais recente.

16

2.1. Website - Governo do Estado - Detalhamento de Elementos

2.1.12. Pginas Internas Tipo de Contedo: Resultado de Busca

- Definio: Ferramenta de busca de contedo do website. Essa ferramenta ser utilizada para pesquisas de
informaes contidas dentro do prprio website.

17

2.1. Website - Governo do Estado - Detalhamento de Elementos

2.1.13. Pginas Internas Tipo de Contedo: Downloads

- Definio:A pgina interna do tipo Download, para listagem de arquivos com descrio e link para download.

18

2.1. Website - Governo do Estado - Detalhamento de Elementos

2.1.14. Rodap








- Definio: rea destinada a divulgao de endereos e dados para contato do rgo. Aqui os visitantes tambm
podem visualizar o mapa do site com todos menus e sub-menus contidos.

19

2.1. Website - Governo do Estado - Detalhamento de Elementos

2.1.15. Mensagem de Erro

- Definio: A mensagem de erro deve aparecer todas vez que o sistema do website identificar alguma falha ou erro.
A mensagem deve sempre ser seguida com a especificao do erro.

20

3. Websites - rgo e Secretarias - Aparncia Geral

21

3.1. Websites - rgo e Secretarias - Detalhamento de Elementos

3.1.1. Topo

- Definio: rea composta dos seguintes elementos: apresentao da logo do Governo com link para o site do
Governo, menus de atalho para pginas do Governo (Piau, Governo, Servios, Investimento, Notcias com links para
o site do Governo, link para outros sites do Governo e Secretarias e link para o site do Sistema Eletrnico de
Informaes ao Cidado (Acesso Informao). Esses elementos devem ser mantidos no mesmo posicionamento e
aparncia em todas as sees internas do website.

22

4. Websites Aparnciaem Plataformas Mobile

- Definio:O layout do website deve possuir a mesma apresentao quando executados nos navegadores mais
populares, como o Internet Explorer, Safari, Firefox e Chromee nas plataformas mveis como iPhone, iPad e Android.

23

5. Sistemas Aparncia Geral

24

5.1. Sistemas - Detalhamento de Elementos

5.1.1. Topo

- Definio: rea composta de elementos como apresentao das logos do Governo e do rgo responsvel pelo
sistema. Esses elementos devem ser mantidos mesmo posicionamento e aparncia em todas as sees internas.

25

5.1. Sistemas - Detalhamento de Elementos

5.1.2. Tela de Login

- Definio: Tela de inicio de seo para acesso aos sistemas atravs de login e senha. Essatela deve ser de padro de
acesso a todos os sistemas.

26

5.1. Sistemas - Detalhamento de Elementos

5.1.3. Pgina Interna













- Definio: Apresentao da rea interna dos sistemas, ou seja, aps o login. Essa tela deve ser de padro a todos os
sistemas.

27

5.1. Sistemas - Detalhamento de Elementos

5.1.4. Pginas Internas Topo

- Definio: rea composta de elementos como apresentao das logos do Governo, do rgo responsvel pelo
sistema, o ttulo do sistema, perfil logado, data e hora local. Esses elementos devem ser mantidos mesmo
posicionamento e aparncia em todas as sees internas.

28

5.1. Sistemas - Detalhamento de Elementos

5.1.5. Pginas Internas Menu

- Definio: O menu de posicionamento superior contm os link de todas sees, sub-sees e ferramentas dos
sistemas. Atravs dele, os visitantes podem navegar pelas informaes oferecidas.

29

5.1. Sistemas - Detalhamento de Elementos

5.1.6. Pginas Internas Caminho da Seo

- Definio: O caminho da seo o mapa do caminho que o usurio segue para chegar at sua seo de destino.
Esse mapa deve estar presentes em todas as sees, inclusive na seo "Inicio". Tambm serve como link para
retornar as sees anteriores.

30

5.1. Sistemas - Detalhamento de Elementos

5.1.7. Pgina Inicial

- Definio: Seo inicial dos sistemas onde apresentado um texto de boas-vindas e os links das principais
ferramentas em destaque com cones e breve descrio.

31

5.1. Sistemas - Detalhamento de Elementos

5.1.8. Pginas Internas Tipo de Contedo: Tabela

- Definio: A pgina interna do tipo "Tabela" serve para apresentao de informaes com a necessidade desse tipo
de formato. Importante seguir os padres de alinhamentos, fontes e cores.

32

5.1. Sistemas - Detalhamento de Elementos

5.1.9. Mensagem de Erro




- Definio: A mensagem de erro deve aparecer todas vez que o sistema identificar alguma falha ou erro. A
mensagem deve sempre ser seguida com a especificao do erro.

33

6. Sistemas Aparncia em Plataformas Mobile

- Definio: O layout do website deve possuir a mesma apresentao quando executados nos navegadores mais
populares, como o Internet Explorer, Safari, Firefox e Chrome, assim como nas plataformas mveis como iPhone, iPad
e Android.
Teresina, 24 de Abril de 2014.

34