1) O documento apresenta o projeto de conclusão de curso de Samantha Rosa da Rosa sobre o desenvolvimento de uma nova interface gráfica para o portal da prefeitura de Porto Alegre. 2) A autora visa melhorar a acessibilidade, usabilidade e experiência do usuário no portal, valorizando a relação entre cidadãos, serviços e governo. 3) O trabalho inclui análises do portal atual, dos usuários, da organização da informação e propostas de design para a nova interface.

1. 1 de 50
Centro Universitário Ritter dos Reis
Trabalho de Conclusão de Curso - 2009/2
Interface do Portal da
Prefeitura de Porto Alegre
Samantha Rosa da Rosa
Orientador:
Heli Meurer
Co-Orientadores:
Jorge Eduardo Loro Ramos
Júlio César Caetano da Silva
Norberto José Pinheiro Bozzetti
Porto Alegre, dezembro de 2009

2. 2 de 50
Porto Alegre
■ 1.436.123 milhões de moradores em 2009
■ Capital com os melhores índices de educação
■ Cultura evoluída, abriga eventos internacionais

3. 3 de 50
Definição do Tema
Nova Interface Gráfica do portal da prefeitura de Porto Alegre
■ Seguindo as diretrizes de usabilidade, acessibilidade e UX
■ Valorizando as relações cidadão/serviços/prefeitura
■ Aproveitando as tecnologias disponíveis e os recursos web 2.0

4. 4 de 50
Justificativa
■ Design Digital
■ Importância social
■ Facilitar a busca por serviços e informações
■ Gerar inovação em portais governamentais

5. 5 de 50
Objetivos
Desenvolver a IGA da prefeitura de Porto Alegre de forma padronizada
garantindo o fácil acesso e entendimento
■ Promover interação, colaboração e transparência pública
■ Mostrar que a estética-formal é princípio básico para promover credibilidade

6. 6 de 50
Até agora, o erro tem sido projetar sistemas como
se fossem meras listas de funcionalidades e não como
o desenho de interações do produto com o seu usuário.
(Agner, 2009)

7. 7 de 50
Usuários
Sociedades sempre são compostas por pessoas diferentes
■ Maioria instruída educacionalmente - IDH
■ Cidade heterogênea em características socioeconômicas
■ País subdesenvolvido = Exclusão e vulnerabilidade social e digital
■ 80% utilizam resolução de tela maior que 1024 x 768 pixels
■ Desde os mais instruídos aos deficientes e à borda da exclusão digital

8. 8 de 50
SIBD
Projetar o novo Portal da Prefeitura de Porto Alegre com foco em acessibilidade,
usabilidade, estética e principalmente na melhoria da relação usuários/governo.
Processo de Transformação
Projeto E de Meurer e Szabluk, 2009
SFBR
Ambiente digital padronizado, que proporcione a utilização funcional por todos.

9. 9 de 50
Cenário Atual
Desorganização da informação ■
Utilização de siglas desconhecidas ■
Área de busca mal delimitada ■
Conteúdo voltado à interesses políticos ■
Resolução de 800 x 600 pixels ■
Considerado o mais completo ■

10. 10 de 50
Cenário Pretendido
Desburocratização da comunicação
■ Melhor organizar e hierarquizar o conteúdo
■ Reformular a estética-formal do portal
■ Implementação de enquetes que otimizarão o Orçamento Participativo
■ Melhores mecanismos de navegabilidade
■ Interface mais intuitiva

11. 11 de 50
OS 9 FATORES
Fatores Projetuais
ANTROPOLÓGICO ① ② ③ ④ ⑤
(Gomes, 2008)
ECOLÓGICO ① ② ③ ④ ⑤
ERGONÔMICO ① ② ③ ④ ⑤
ECONÔMICO ① ② ③ ④ ⑤
MERCADOLÓGICO ① ② ③ ④ ⑤
TECNOLÓGICO ① ② ③ ④ ⑤
FILOSÓFICO ① ② ③ ④ ⑤
GEOMÉTRICO ① ② ③ ④ ⑤
PSICOLÓGICO ① ② ③ ④ ⑤

12. 12 de 50
Análises Linguísticas
Sim, eu estou apaixonado. Preciso entender como isso funciona.
Mas apaixonado por quem ou pelo que? Apaixonado por uma cidade?
Por uma árvore? Pelo passado? Pela risada? Incontrolável.
Por mim mesmo novamente? E então eu percebo que isso é perigoso...
(Daniel Gildenlöw, 2002)
■ Acessibilidade
■ Alegria
■ Cidadão
■ Cidade
■ Diferenças
■ Paixão

14. 14 de 50
DIFERENÇAS
QUE QUANDO ACEITAS
PELA SOCIEDADE, SE TORNAm
IGUALDADE DE DIREITOS

15. 15 de 50
Análise Paradigmática
O planejamento visual não é beleza
ou feiura, é usabilidade e praticidade.
A beleza é ter qualidade de belo: no seu sentido denotativo, de que tem
forma perfeita e proporções harmônicas; que é agradável aos sentidos.

16. 16 de 50
Análise Estatística e Investigativa
Levantamento estatístico com 100 usuários através do Google Docs com 47 mulheres
e 43 homens, entre 20 e 60 anos de idade e com 27 profissões diferentes
14% 29%
27%
21%
65%
44%
Você acha que o sítio virtual Quanto à Organização do conteúdo
representa Porto Alegre: do sítio virtual, voce acha que:
Representa Não têm opinião
Não têm opinião Tudo parece estar organizado
Não representa Disposição Confusa

17. 17 de 50
Análise Estatística e Investigativa
■ A simplicidade deve ser levada em consideração na criação da estrutura e estética
■ 30% citaram o por do sol como referência. Tradicional em 52%. Acolhedora e urbana em 37%
■ A melhoria da hierarquia da informação é o mais importante fator a ser projetado

18. 18 de 50
Análise mercadológica
Resultados
■ Sobre investidores e turistas concorre com todas as cidades do Brasil
■ 1º Cidadãos, 2º Turistas brasileiros e estrangeiros, 3º Empresas e investidores
■ Inovador em usabilidade, navegabilidade, ergonomia, acessibilidade e estética.

19. 19 de 50
Análise mercadológica
A satisfação do cidadão gera uma
sociedade mais contente e resolvida
cultural e socialmente.

20. 20 de 50
Análises Desenhísticas
■ Atual portal da Prefeitura de Porto Alegre
■ Sítio virtual de Barack Obama
■ Portal do estado do RS
■ Sítio virtual da Apple
■ Portal de Notícias G1
■ Sítio virtual Behance

21. 21 de 50
Análise
Desenhística
Estrutural
Prefeitura de Porto Alegre
www.portoalegre.rs.gov.br

22. 22 de 50 Página
Inicial
Depar- Menu Agência Poa Links
O Governo Secretarias Empresas Notícias Banners
tamentos Secundário Multumídia Especiais
Acessibi- Solicitações
Governança DEMHAB
lidade de Serviços
Adminis- Indústria e
DEP Licitações
tração Comércio
Comunicação Água
Juventude DMAE
Social
Meio Solicitações
Cultura DMLU
Ambiente de Alvará
Obras
Defesa Civil FASC Concursos
e Viação
Direitos Planeja- Processos
PREVIMPA Seletivos
Humanos mento
ISSQN -
Educação Procuradoria
IPTU - ITBI
Programação Planejamento
Esporte
Orçamentária Urbano
Processos
Fazenda Saúde
Prefeitura
Gestão Turismo

23. 23 de 50
Análise Desenhística
Prefeitura de Porto Alegre - www.portoalegre.rs.gov.br
Logográfica
Configuração Cor Forma

24. 24 de 50
Análise Desenhística
Prefeitura de Porto Alegre - www.portoalegre.rs.gov.br
Cromográfica
#ffd189 #f29f53 #cce2e0 #eeeeee #000 #fff
Cores utilizadas no Portal da Prefeitura de Porto Alegre
#8ce5c9 #daebfd #8cb2d6 #be2618 #666666 #8cb2d6
Cores utilizadas nas páginas de secratarias como DMAE e Cultura

25. 25 de 50 HEURÍSTICAS AvALIAÇõES OBSERvAÇõES
Quando você faz uma ação, o
sistema não reage. O navegador
FEEDBACK ① ② ③ ④ ⑤ não mostra quando se navega entre
diferentes páginas do portal.
Análise LINGUAGEM
① ② ③ ④ ⑤
O portal utiliza siglas totalmente
USUÁRIO desconhecidas pelos usuários.
Heurística
SAÍDAS
MARCADAS ① ② ③ ④ ⑤ Nada a declarar.
Prefeitura de Porto Alegre
www.portoalegre.rs.gov.br CONSISTÊNCIA ① ② ③ ④ ⑤
O portal é inconsistente, muda de
superfície durante a navegação.
PREVENÇÃO
ERROS ① ② ③ ④ ⑤ Nada a declarar.
MINIMIZAR
O usuário precisa responder a muitas
SOBRECARGA ① ② ③ ④ ⑤ informações ao mesmo tempo.
USUÁRIO
ATALHOS ① ② ③ ④ ⑤ Poucos, mas existem.
DIÁLOGOS Os diálogos são complicados,
SIMPLES ① ② ③ ④ ⑤ muita poluição visual.
Se existe algum erro, a página
MENSAGEM
ERRO ① ② ③ ④ ⑤ é redirecionada a um erro em
lingua estrangeira.
AJUDA ① ② ③ ④ ⑤ Existe.

26. 26 de 50
ATRAENTE SIMPLÓRIO
Análise de
Diferencial Semântico OBJETIVO CONFUSO
POUCAS CORES MUITAS CORES
INTERESSANTE SEM GRAÇA
SÉRIO DIVERTIDO
DINÂMICO ESTÁTICO
UTILITÁRIO ENTRETENIMENTO
LIMPO ILUSTRATIVO
AGRADÁVEL MAÇANTE

27. 27 de 50
MUITA OBJETIVIDADE VISUAL
Posicionamento
na Linguagem Novo Portal
Sítio virtual de
Sítio virtual
HIERARQUIA PARA USUÁRIOS INEXPERIENTES
HIERARQUIA PARA USUÁRIOS EXPERIENTES
Barack Obama
Gráfico-visual de Porto Alegre da Apple
Portal do
Portal G1
Estado - RS
Portal de
Salvador
Sítio virtual Atual
de São Paulo Portal de
Porto Alegre
POUCA OBJETIVIDADE VISUAL

28. 28 de 50
Requisitos do Projeto
REQUISITOS COmO RESOLvE-LOS?
ACESSIBILIDADE (1) Leitura dinâmica e descrição textual das imagens e contextualização
PARA OS CIDADÃOS (2) Controle de corpo de fonte textual, gerando acessibilidade
DE PORTO ALEGRE (3) Navegação facilitada por atalhos
INTERATIvIDADE
(1) Promoção de interação: pesquisas, enquetes e contato com o cidadão
E COLABORAÇÃO
(4) Melhor estruturação e hierarquização da informação
ENTRE PREFEITURA/
(5) Menor exposição de notícias e mais serviços
SERvIÇOS/CIDADÃO

29. 29 de 50
Restrições do Projeto
RESTRIÇõES COmO RESOLvE-LAS?
IDENTIDADE
(1) Definição de um padrão visual consistente em todo o portal
GRÁFICO-vISUAL
(2) Resolução de no máximo1024 x 768 pixels
PARA A CIDADE DE
(3) Arquitetura da Informação ligada à estética
PORTO ALEGRE
USABILIDADE
(1) Regra do 1/4 para mancha gráfica
Em PORTAIS
(2) Falar a linguagem do usuário, minimizando a utilização de siglas
GOvERNAmENTAIS

30. 30 de 50
Organização do Portal
■ Técnica de Card Sorting Aberto com três usuários
■ 160 cartões com informações pertinentes à dados, serviços e informações
■ Técnica de Card Sorting fechado

31. 31 de 50
Organização Estrutural
■ São feitas análises e alternativas de organização parar criar o organograma geral
■ O principal conceito é a valorização das diferenças entre os usuários
■ Eixos que mantem a cidade de Porto Alegre são a base para o organograma
■ Análise heurística é realizada sobre o organograma verificando sua eficiência

32. 32 de 50
SEMPRE ESTÃO VISÍVEIS NA PÁGINA
PÁGINA
INFORMAÇÕES
INICIAL
BUSCA - ACESSIBILIDADE - IDIOMA - CONTATO - MAPA SITE - AJUDA - CALENDÁRIO - FALE PARA VOCÊ:
IDIOMA
a a ?
SERVIÇOS E CONHEÇA POA TRANSPARÊNCIA
A CIDADE COMUNICAÇÃO A PREFEITURA INFORME-SE
INFORMAÇÕES (TURISMO) PÚBLICA
E SUA GENTE
HISTÓRIA E TV CONTAS E PONTOS PRESTAÇÃO INVESTIMENTOS
CIDADANIA INSTITUCIONAL EMERGÊNCIAS
DADOS CIDADE PREFEITURA IMPOSTOS TURÍSTICOS DE CONTAS E OBRAS
Organograma ACESSIBILIDADE
EM POA
ADMINISTRAÇÃO
DE POA
RADIO WEB
SOLICITAÇÃO
DOCUMENTOS
SECRETARIAS
INFORMAÇÕES
ÚTEIS
HOSPEDAGEM
APROVAÇÃO
DE PROJETOS
ORÇAMENTOS
Geral do Portal
?
COMUNICAÇÃO CULTURA EM ASSESSORIAS BUSCA E OFERTA ESPAÇOS PROCESSOS
CONSERTOS EMPRESAS PLANEJAMENTO
SOCIAL PORTO ALEGRE DE IMPRENSA DE EMPREGO CULTURAIS PREFEITURA
DIREITOS DIÁRIO DEPARTAMEN- PROGRAMAÇÃO ORÇAMENTO
DEFESA CIVIL SEGURANÇA MAPAS ALVARÁ
HUMANOS OFICIAL TOS EVENTOS PARTICIPATIVO
ESPORTE AGENDA DO EIXOS DE
EDUCAÇÃO TRANSPORTES NOTÍCIAS SAIBA MAIS LICITAÇÕES SUGESTÕES
E LAZER PREFEITO GOVERNO
ÁGUA E LEIS E DEMOCRACIA
FAZENDA GESTÃO ENQUETES PUBLICAÇÕES
ESGOTO NORMAS PARTICIPATIVA
PLANO INDÚSTRIA MEIO BOLSA
156 FALA POA O PREFEITO ESTATÍSTICAS
DIRETOR E COMÉRICO AMBIENTE FAMÍLIA
MEIO BANCO DE ALERTAS ME-
JUVENTUDE ILUMINAÇÃO
AMBIENTE IMAGENS TEREOLÓGICOS
PRAÇAS/ CÂMERAS DIREITOS
PLANEJAMENTO VIA PÚBLICA
PARQUES NA CIDADE HUMANOS
INCLUSÃO YOUTUBE,
PROCURADORIA EMERGÊNCIAS ACESSIBILIDADE
SOCIAL FLICKR, TWITTER
Figura xx: Organograma geral do portal da Prefeitura de Porto Alegre
PROJETOS ATUALIDADES
SAÚDE TRABALHO FEED RSS
SOCIAIS E DESTAQUES
LIMPEZA CONSULTA DE
ALIMENTAÇÃO DESAPARECIDOS
URBANA SOLICITAÇÃO
xx

33. 33 de 50 PÁGINA
INICIAL
SEMPRE ESTÃO VISÍVEIS NA PÁGINA
BUSCA - ACESSIBILIDADE - IDIOMA - CONTATO - MAPA SITE - AJUDA - CALENDÁRIO - FALE
INFORMAÇÕES
PARA VOCÊ:
IDIOMA
a a ?
SERVIÇOS E CONHEÇA POA TRANSPARÊNCIA
A CIDADE COMUNICAÇÃO A PREFEITURA INFORME-SE
INFORMAÇÕES (TURISMO) PÚBLICA
E SUA GENTE
HISTÓRIA E TV CONTAS E PONTOS PRESTAÇÃO INVESTIMENTOS
CIDADANIA INSTITUCIONAL EMERGÊNCIAS
DADOS CIDADE PREFEITURA IMPOSTOS TURÍSTICOS DE CONTAS E OBRAS
ACESSIBILIDADE ADMINISTRAÇÃO SOLICITAÇÃO INFORMAÇÕES APROVAÇÃO
RADIO WEB SECRETARIAS HOSPEDAGEM ORÇAMENTOS
EM POA DE POA DOCUMENTOS ÚTEIS DE PROJETOS
?
COMUNICAÇÃO CULTURA EM ASSESSORIAS BUSCA E OFERTA ESPAÇOS PROCESSOS
CONSERTOS EMPRESAS PLANEJAMENTO
SOCIAL PORTO ALEGRE DE IMPRENSA DE EMPREGO CULTURAIS PREFEITURA

34. 34 de 50
INFORMAÇÕES
PARA VOCÊ:
CIDADÃO FAMÍLIA JOVEM SERVIDOR
TERCEIRA PORTADOR DE
EMPRESA TURISTA
IDADE DEFICIÊNCIA

35. 35 de 50
Conexões e Inter-Relações
■ Feedback automático através de padrão de itens regularmente ativos
■ Falar a linguagem do usuário através da desburocratização e contextualização
■ Prevenção de erros pelos sistemas de navegação
■ Disponibilização dos serviços e informações mais importantes para cada usuário

36. 36 de 50
malha
Estrutural
Área total 1024 x 768 pixels ■
Área útil 970 x 750 pixels ■
Módulos de 10 pixels ■

37. 37 de 50
malha
Diagramacional
970 x 750 pixels ■
Módulos de 10 pixels ■
24 colunas de 20 pixels ■

38. 38 de 50
malha
Diagramacional
970 x 750 pixels ■
24 colunas ■
12 colunas ■
6 colunas ■
4 colunas ■
3 colunas ■
2 colunas ■
1 colunas ■

39. 39 de 50 L = 970 pixels
malha da
Área Total V = 750 pixels
970 x 1500 px ■
Visível: 970 x 750 px ■
Não-visível: 970 x 750 px ■
A = 1500 pixels
NV = 750 pixels

40. 40 de 50
INFORMAÇÕES PARA FACILITAR A SUA NAVEGAÇÃO
PARA VOCÊ: ESCOLHA UM PERFIL AO LADO. BEM VINDO!
HOJE É 21/11/09 - 15H58
Alternativas
LOGOTIPO DA LOGOTIPO DA
PREFEITURA DE CABEÇALHO PREFEITURA DE CABEÇALHO ACESSIBILIDADE
PORTO ALEGRE PORTO ALEGRE LOGOTIPO DA
PREFEITURA DE ENGLISH/ESPAÑOL
PORTO ALEGRE
BUSCA IR
de Wireframe
TRANSPARÊNCIA INFORMAÇÕES PARA VOCÊ: BEM VINDO TRANSPARÊNCIA INFORMAÇÕES PARA VOCÊ: BEM VINDO
21 DE NOVEMBRO DE 2009 - 15H58 21 DE NOVEMBRO DE 2009 - 15H58 A CIDADE E SUA GENTE - A PREFEITURA - SERVIÇOS E INFORMAÇÕES - CONHEÇA PORTO ALEGRE - TRANSPARÊNCIA - COMUNICAÇÃO - INFORME-SE
ÚLTIMA ATUALIZAÇÃO: HOJE, 13H40 ÚLTIMA ATUALIZAÇÃO: HOJE, 13H40
COMUNICAÇÃO COMUNICAÇÃO
vOCÊ ESTÁ Em: PORTAL DE PORTO ALEGRE > A CIDADE E SUA GENTE > HISTÓRIA E DADOS DE PORTO ALEGRE
BUSCA BUSCA
INFORME-SE USUÁRIO 1: AS OPÇÕES SÃO 1, 2, 3, 4, 5 E 6 ... INFORME-SE USUÁRIO 1: AS OPÇÕES SÃO 1, 2, 3, 4, 5 E 6 ...
DIGITE O QUE PROCURA IR PESQUISE AQUI IR
A CIDADE E SUA GENTE
A CIDADE E SUA GENTE | A PREFEITURA | SERVIÇOS E INFORMAÇÕES | CONHEÇA PORTO ALEGRE A CIDADE E SUA GENTE | A PREFEITURA | SERVIÇOS E INFORMAÇÕES | CONHEÇA PORTO ALEGRE HISTÓRIA E DADOS DE PORTO ALEGRE
ACESSIBILIDADE ACESSIBILIDADE
TRANSPARÊNCIA
ENGLISH / ESPAÑOL
ENGLISH / ESPAÑOL
ATUALIDADE
NOTÍCIAS CALENDÁRIO
PRESTAÇÃO DE CONTAS CALENDÁRIO
CONTATOS
_______________________ CONTATOS
PROJETOS
PROCESSOS FALE CONOSCO
LICITAÇÕES
PUBLICAÇÕES NOTÍCIAS NOTÍCIAS 1, 2, 3
ATUALIDADE
ESTATÍSTICAS
SOICITAÇÃO DE SERVIÇOS
INVESTIMENTOS E OBRAS SERVIÇO 1
_______________________ SERVIÇO 2
ORÇAMENTOS NOTÍCIAS SERVIÇO 3
PLANEJAMENTO SERVIÇO 4
ORÇAMENTO PARTICIPATIVO PROJETOS PREFEITURA
SUGESTÕES DINÂMICOS VEJA MAIS SERVIÇOS
FALE CONOSCO
A CIDADE DE PORTO ALEGRE
CONHEÇA PORTO ALEGRE
ENQUETE TRANSPORTES Porto Alegre tem o corpo de uma metrópole, o espírito cosmopolita e a alma de
_______________________
PONTOS TURÍSTICOS uma província. Quem nas ruas de Porto Alegre circula, espanta-se com a perenidade
SAÚDE - CONFIRA HORÁRIOS
HOSPEDAGEM de sua vegetação, de seus morros e lago; deleita-se com a perdurância de seus
ATUALIDADE ATUALIDADE ATUALIDADE - TRI TRANSPORTE INTEGRADO
ESPAÇOS CULTURAIS ENQUETE prédios históricos - guardiões de memórias - e admira-se com a freqüência dos
MAPAS - MAIS
ORÇAMENTO PARTICIPATIVO encontros nas calçadas. Agrega-se a esse cenário, onde o tempo parece ter parado,
SAIBA MAIS
o vai-e-vem acelerado da cidade; a arquitetura ícone da modernidade e a heteroge-
EDUCAÇÃO
neidade cultural - atributos da estética dos grandes centros urbanos.
LAZER - MATRICULAS ESCOLAS
DIÁRIO OFICIAL - VESTIBULARES
ATIVIDADES NA REDENÇÃO
A PREFEITURA
_______________________ ENCONTROU O QUE PRECISAVA? VOCÊ TAMBÉM PODE NAVEGAR NO MENU À ESQUERDA VISUALI-
ÁREA DE INFORMAÇÕES
ZANDO OUTRAS SECRETARIAS, EMPRESAS, OU ENTÃO UTILIZAR A FERRAMENTA DE BUSCA
O PREFEITO
SECRETARIAS
EMPRESAS
A CIDADE E SUA GENTE SERVIÇOS E INFORMAÇÕES INFORME-SE A CIDADE SERVIÇOS E CONHEÇA
DEPARTAMENTOS História e Dados da Cidade Contas Impostos Emergências
ATUALIDADES E SUA GENTE A PREFEITURA INFORMAÇÕES PORTO ALEGRE TRANSPARÊNCIA INFORME-SE
OS EIXOS DE GOVERNO Acessibilidade em Porto Alegre Solicitação de Documentos Informações Úteis
LEIS E NORMAS Administração de Porto Alegre Manutenção Pública Busca e Oferta de Emprego
Comunicação Social Segurança Programação Eventos História e Dados Institucional Contas Impostos Pontos Turísticos Prestação de Contas Emergências
Cultura em Porto Alegre Transportes Notícias Acessibilidade Secretarias Solicitação de Documentos Hospedagem Investimentos e Obras Informações Úteis
Defesa Civil Água e Esgoto Democracia Participativa Administração Empresas Manutenção Pública Espaços Culturais Busca e Oferta de Emprego
Direitos Humanos Iluminação Bolsa Família Comunicação Social Departamentos Segurança Mapas Programação Eventos
Educação Meio Ambiente Alertas Metereológicos Cultura Eixos de Governo Transportes Saiba Mais Notícias
Esporte e Lazer Via Pública Direitos Humanos Defesa Civil Leis e Normas Água e Esgoto Democracia Participativa
Fazenda Emergências Acessibilidade Direitos Humanos O Gabinete do Prefeito Iluminação Bolsa Família
Gestão Projetos Sociais Atualidades e Destaques Educação Meio Ambiente Alertas Metereológicos
Plano Diretor Consulta de Solicitação Desaparecidos Esporte e Lazer Via Pública Direitos Humanos
Indústria e Comércio Fazenda Emergências Acessibilidade
Juventude Gestão Projetos Sociais Atualidades e Destaques
Meio Ambiente Plano Diretor Consulta de Solicitação Desaparecidos
A PREFEITURA CONHEÇA PORTO ALEGRE TRANSPARÊNCIA PÚBLICA Indústria e Comércio
Planejamento Institucional Pontos Turísticos Prestação de Contas
Procuradoria Juventude
Secretarias Hospedagem Investimentos e Obras
Inclusão Social Meio Ambiente
Empresas Espaços Culturais
Saúde Planejamento
Departamentos Mapas
Trabalho Procuradoria
Eixos de Governo Saiba Mais
Limpeza Urbana Inclusão Social
Leis e Normas
Alimentação Saúde
O Gabinete do Prefeito
Trabalho
Limpeza Urbana
Alimentação
AJUDA | CONTATO | ACESSIBILIDADE | FALE CONOSCO BUSCA DIGITE AQUI O QUE PROCURA IR
AJUDA | CONTATO | ACESSIBILIDADE | FALE CONOSCO | CALENDÁRIO | ULTIMA ATUALIZAÇÃO: 30/10/09

41. 41 de 50 LOGOTIPO DA
PREFEITURA DE
PORTO ALEGRE
INFORMAÇÕES
CONTATO
BUSCA
BUSCA IR
A CIDADE E SUA GENTE - A PREFEITURA - SERVIÇOS E INFORMAÇÕES - CONHEÇA PORTO ALEGRE - TRANSPARÊNCIA - COMUNICAÇÃO - INFORME-SE
AGENCIA POA NOTÍCIAS RECEBA NOTÍCIAS POR E-MAIL
Wireframe
1 SOLICITAÇÃO DE SERVIÇOS
2
SOLICITAÇÃO DE SERVIÇOS
3
Página Inicial
SERVIÇO 1
IMAGEM NOTÍCIAS 4 SERVIÇO 2
ATUALIDADES SERVIÇO 3
SERVIÇO 4
VER MAIS
SAÚDE TRANSPORTES LAZER/ESPORTES EDUCAÇÃO
A CIDADE SERVIÇOS E CONHEÇA
E SUA GENTE A PREFEITURA INFORMAÇÕES PORTO ALEGRE TRANSPARÊNCIA INFORME-SE
História e Dados Institucional Contas Impostos Pontos Turísticos Prestação de Contas Emergências
Acessibilidade Secretarias Solicitação de Documentos Hospedagem Investimentos e Obras Informações Úteis
Administração Empresas Manutenção Pública Espaços Culturais Busca e Oferta de Emprego
Comunicação Social Departamentos Segurança Mapas Programação Eventos
Cultura Eixos de Governo Transportes Saiba Mais Notícias
Defesa Civil Leis e Normas Água e Esgoto Democracia Participativa
Direitos Humanos O Gabinete do Prefeito Iluminação Bolsa Família
Educação Meio Ambiente Alertas Metereológicos
Esporte e Lazer Via Pública Direitos Humanos
Fazenda Emergências Acessibilidade
Gestão Projetos Sociais Atualidades e Destaques
Plano Diretor Consulta de Solicitação Desaparecidos
Indústria e Comércio
Juventude
Meio Ambiente
Planejamento
Procuradoria
Inclusão Social
Saúde
Trabalho
Limpeza Urbana
Alimentação
AJUDA | CONTATO | ACESSIBILIDADE | FALE CONOSCO | CALENDÁRIO | ULTIMA ATUALIZAÇÃO: 30/10/09

42. 42 de 50
Estética
Página Inicial

43. 43 de 50
Estética do Portal
Logografia
■ Brasão representa a cidade
■ Independe da gestão

44. 44 de 50
Estética do Portal
Cromografia
■ Amarelo e Laranja
■ Por-do-sol
■ Comunicação, confiança, alegria e positividade

45. 45 de 50
Estética do Portal
Tipografia
■ Rotis
■ Legibilidade e leiturabilidade
■ Tradicionalismo e profissionalismo
■ Typekit
abcdefghijklmnopqrstuvxyz
abcdefghijklmnopqrstuvxyz
1234567890"!@#$%¨&*()_+<>:,.;~^]}{[=

46. 46 de 50
Para os textos e conteúdos será utilizada a fonte
Rotis Sans Serif Roman, uma fonte legível e elegante.
O alinhamento é irregular à direita.
14 pixels de corpo
21 pixels de entrelinha
nos títulos é usada rotis semi serif bold caixa
mista. nos menus é usada em caixa alta.
21 pixels de corpo
14 pixels de corpo

47. 47 de 50
Estética do Portal
Pictografia
■ Imagem no cabeçalho

48. 48 de 50

49. 49 de 50
Bibliografia Principal
■ AGNER, Luiz. Ergodesign e Arquitetura de Informação: Trabalhando com o Usuário. Rio de Janeiro: Quartet, 2006.
■ GOMES, Luiz Vidal Negreiros. Criatividade: Projeto, Desenho, Produto. Santa Maria: sCHDS, 2001.
■ GOMES, Pedro Gilberto. Tópicos de Teoria da Comunicação. São Leopoldo: Editora Unisinos, 2004.
■ KRUG, Steve. Não me faça pensar!: uma abordagem de bom senso à usabilidade na web. Rio de Janeiro: Alta Books, 2006.
■ MEMÓRIA, Felipe. Design para a Internet: projetando a experiência perfeita. Rio de Janeiro: Elsevier, 2005.
■ MEURER, Heli; SZABLUK, Daniela. Projeto E: metodologia projetual para ambientes dígito-virtuais. Anais do 3º InfoDesign
Brasil | Congresso Brasileiro de Design da Informação. Rio de Janeiro RJ: PUC RIO, 2009.
■ NIELSEN, Jakob. Projetando Websites. Rio de Janeiro: Campus, 2000.
■ THIMOTHY, Samara. Grid: Construção e desconstrução. São Paulo: Cosac Naify, 2007.

50. 50 de 50
As pessoas sem imaginação
Podem ter tido as mais imprevistas aventuras,
Podem ter visitado as terras mais estranhas.
Nada lhes ficou. Nada lhes sobrou.
Uma vida não basta apenas ser vivida:
Também precisa ser sonhada.
mario Quintana
Obrigada!