TCC Samantha Rosa (Graduation Project) 2009/2

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 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 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 de 50 Justificativa ■ Design Digital ■ Importância social ■ Facilitar a busca por serviços e informações ■ Gerar inovação em portais governamentais

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 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 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 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 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 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 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 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 de 50 DIFERENÇAS QUE QUANDO ACEITAS PELA SOCIEDADE, SE TORNAm IGUALDADE DE DIREITOS

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 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 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 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 de 50 Análise mercadológica A satisfação do cidadão gera uma sociedade mais contente e resolvida cultural e socialmente.

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 de 50 Análise Desenhística Estrutural Prefeitura de Porto Alegre www.portoalegre.rs.gov.br

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 de 50 Análise Desenhística Prefeitura de Porto Alegre - www.portoalegre.rs.gov.br Logográfica Configuração Cor Forma

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 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 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 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 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 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 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 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 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 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 de 50 INFORMAÇÕES PARA VOCÊ: CIDADÃO FAMÍLIA JOVEM SERVIDOR TERCEIRA PORTADOR DE EMPRESA TURISTA IDADE DEFICIÊNCIA

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 de 50 malha Estrutural Área total 1024 x 768 pixels ■ Área útil 970 x 750 pixels ■ Módulos de 10 pixels ■

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

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

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 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 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 de 50 Estética Página Inicial

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

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

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

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 de 50 Estética do Portal Pictografia ■ Imagem no cabeçalho

48 de 50

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 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!

http://www.slideshare.net	110
http://adreson.com	26
http://twitter.com	1

TCC Samantha Rosa (Graduation Project) 2009/2

by Samantha Rosa on May 20, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

3 Embeds 137

Statistics

TCC Samantha Rosa (Graduation Project) 2009/2 — Presentation Transcript