O projeto de identidade visual do portal da prefeitura de Porto Alegre

The visual identity project of the Porto Alegre city hall portal

LOBATO, Fernanda Hoffmann

M. Engenharia de Produção / Procempa – Cia de Processamento de Dados de Porto Alegre
LEIPNITZ, Cristina
Esp. Design Gráfico / Procempa – Cia de Processamento de Dados de Porto Alegre
SOARES, Leônidas Garcia
M.a. Engenharia de Produção / Procempa – Cia de Processamento de Dados de Porto Alegre
LEMOS, Marcelo Roennau
MBA em E-Business FGV / Procempa – Cia de Processamento de Dados de Porto Alegre

Palavras-chave Identidade visual, Internet, Interação homem-computador.

O artigo descreve o desenvolvimento do projeto de identidade visual dos portais e páginas da Prefeitura Municipal de
Porto Alegre. A criação de uma identidade visual para as páginas e portais da Prefeitura visa, sobretudo, a facilidade de
busca de informações e serviços que as páginas pertencentes oferecem.

Key-words: Visual identity, Internet, Human-computer interaction.

The article describes the development of the project of the portals and sites of the Porto Alegre City hall visual identity.
The creation of a visual identity for the sites and portals aims at, over all, the easiness of search of information and
services that the sites offer.

1 - Introdução
Na década de 90 a Web disseminou-se de forma exponencial em escala planetária. Em um curto espaço de
tempo, todo o tipo de negócio e indústria procurou criar sua representação no mundo virtual: portais, páginas
institucionais, comércio eletrônico, etc. Com a disseminação da rede e dos microcomputadores, mais pessoas
começaram a interagir com computadores. Muitas dessas pessoas sem experiência com computadores, com
variados níveis educacionais, sociais e de campos profissionais, não necessariamente ligados à informática.
Surgiu, então, a necessidade de desenvolver interfaces que se adequassem à esse novo público.

Em 1995 a PROCEMPA iniciou o desenvolvimento de páginas e soluções para Internet, sendo pioneira em
muitas iniciativas no meio, porém a identificação da Prefeitura através de uma marca padronizada e questões
como navegação, usabilidade, acessibilidade e até mesmo manutenção de páginas e de conteúdos não
estavam contempladas. A partir da contratação de designers na PROCEMPA (julho de 2001), iniciou-se o
desenvolvimento dos primeiros projetos voltados a resolução dessas deficiências. Através de um trabalho
conjunto à área do desenvolvimento, construiu-se uma primeira versão do editor de conteúdos para inclusão
de informações através da Internet e pelo próprio responsável pela página. Em 2003 após a união dos dois
setores responsáveis pelos projetos em Internet criou-se a massa crítica que viabilizou o projeto de uma
identidade visual para toda a Web da PMPA .

2 - Projeto e desenho e páginas

O desenvolvimento de páginas deve ter por base os conceitos do universo do usuário e os fundamentos
teóricos. Vélez e Pastor (2001) consideram que o primeiro passo na criação da interface seria o desenho da
informação, a partir do tipo de usuário formatar o produto; após seria realizado o desenho da navegação, as
linhas-guia que irão conduzir o usuário dentro do sistema e; por último, o estilo formal, o vocabulário visual
dos elementos necessários para a interação, a aparência do sistema.

a) desenho da informação: é a fase do processo onde se organizam as informações em uma estrutura

coerente e significativa. A interação, o desenho e a informação são dependentes uma das outras.
Organizar a informação significa fazê-la identificável, separando temas e grupos. O desenho da
informação deve ser cuidadoso em relação à carga que dispõem a cada momento da interação e
 fazer a transição entre uma tela e outra de forma rápida e direta;

b) desenho da navegação: assim como o conteúdo deve seguir uma estrutura, os caminhos e passos
a serem seguidos devem estar claros para o usuário. O bom planejamento da navegação permite
um caminho mais curto para o objetivo, sem sobrecarregar com operações desnecessárias e
excesso de opções. No desenho da navegação define-se o que aparece em cada tela e como elas
levam ao objetivo. Também são definidas as opções de se realizar uma tarefa, a forma de
aparência dos tempos de processamento e as mensagens de erros e confirmação;

c) o estilo formal: é a criação de um vocabulário visual que transmita o conteúdo de forma clara e
agradável ao usuário. Na construção da interface, deve-se levar em conta a existência de padrões
particulares, para quem o sistema será construído. Por exemplo: no caso de empresas, a existência
da identidade visual, logotipo, cores e tipografia corporativa.

Partindo do princípio que todo objeto criado pelo ser humano, incluindo uma página, ter por finalidade a
satisfação de uma necessidade, pode-se identificar três possíveis funções que estes objetos desempenham:
prática, estética e simbólica (LOBACHi, 1981 apud MEDEIROS, 2002).

a) função prática: o objeto satisfaz as necessidades fisiológicas do usuário;

b) função estética: o objeto satisfaz o usuário no plano sensorial do usuário;
c) função simbólica: o objeto satisfaz o usuário em um nível espiritual, estabelecendo ligações com
suas experiências e sensações anteriores.

Essas funções são intercambiáveis dentro de um mesmo objeto e dinamicamente modificadas à medida que
os usuários estabelecem outras relações mediante o uso do produto, ou ao trocarem experiências com outros
usuários. Um objeto pode exercer as três funções simultaneamente, porém uma delas estará mais em
evidência do que as outras. No caso da Web, os diferentes objetivos da página determinarão qual dessas
funções será a dominante. O desenho de páginas tem por finalidade satisfazer essas necessidades dos
usuários, promovendo a transformação dos conceitos em soluções de forma criativa.

Deve-se lembrar que Internet não pode ser considerada um meio de comunicação visual maduro. Existem
restrições para a criação de uma identidade visual na Web. Uma é a variabilidade do meio. O modelo de
desenvolvimento, incluído a interface, deve ser flexível à adaptação das diversas configurações de vídeo,
tipos e versões de navegadores, deve-se também, levar em conta o peso da página (a soma de todos os seus
elementos: códigos, imagens, textos) e a restrição do fluxo de informação.

3 O projeto
O projeto identidade visual das páginas da Prefeitura de Porto Alegre (PMPA) teve inicio em novembro de
2003. Até o momento, não existia uma preocupação formal com a identidade das páginas com a prefeitura.
Além disso muitas páginas eram documentos htmls estáticos, demandando muito tempo da equipe com
manutenção (figura I).

A partir da demanda de uma identidade para todas as páginas em novembro de 2003, abriu-se o debate na
equipe para a criação de uma identidade visual que atende-se aos objetivos propostos.

Objetivos
1. Criar um padrão de identidade visual para todas as aplicações Web da PMPA
2. Estabelecer uma unidade visual entre portais, páginas, hotsites, intranets e sistemas
3. Priorizar os serviços em detrimento das informações institucionais
4. Ser acessível aos deficientes
5. Ter interface moderna e agradável, obedecendo a princípios de ergonomia e usabilidade
6. Limitar o peso das páginas tendo em vista os usuários de banda estreita (97%)
Figura I –Páginas antigas da Prefeitura de Porto Alegre

Foram estudados os portais de diversas prefeituras, e analisado o histórico das páginas da PMPA. Também
foram levantados e analisados estudos de usabilidade e design. A equipe de design decidiu por uma interface
que mantivesse alguma identidade com o portal antigo, visando minimizar o impacto do usuário e acostumá-
lo às mudanças de forma gradual. O elo de ligação visual escolhido foi a imagem do cabeçalho – uma foto
aérea da cidade tradicionalmente utilizada em sua forma azul monocromática. Paralelamente, foi construída,
junto à equipe do desenvolvimento no setor, a nova versão da ferramenta de edição de conteúdos.

A equipe de design atuou no processo de levantamento de requisitos, colaborando no planejamento do

aplicativo e desenvolvendo o desenho de interface. Inúmeras simulações foram feitas para testar a adequação
da ferramenta às necessidades do usuário, também requisitaram funcionalidades no aplicativo para
automatizar, simplificar e acelerar a geração de novas páginas. Além de tornar mais rápida e automatizada a
criação de páginas a partir do padrão desenvolvido pela equipe de design, o programa também é utilizado
pelos próprios usuários nas atividades de atualização de conteúdo. Atualmente a equipe continua
desenvolvendo melhorias e ajustes na ferramenta.

Após a aprovação dos primeiros desenhos em dezembro de 2004 a equipe passou a formalizar e a
desenvolver o desenho para a disponibilizar as páginas na Web, seguindo as seguintes etapas:
1. Padronizar a arquitetura da informação, estabelecendo nomenclaturas, hierarquias, serviços e
navegabilidade, em consonância com os princípios de ergonomia e usabilidade;
2. Criar protótipos de identidade visual, prevendo a padronização de ícones, estilos, posicionamento
dos elementos na tela, cores, assinatura e elementos comuns;
4. Testes, avaliações e monitoramento;
5. Desenvolvimento de um padrão visual para intranets e sistemas;
6. Documentação e histórico.

Foi definido que uso de cores, figuras e demais elementos seguiria níveis de flexibilidade, sendo as
orientações mais restritivas à medida que a página está mais identificada com a Prefeitura e seu objetivo
(divulgar/prestar serviços). Assim sendo, páginas de secretarias tem regras mais restritivas que uma página
de evento. Foram respeitadas particularidades das secretarias, como cores e logotipos.

A área central é livre, permitindo diversas foram de diagramação. A manutenção do menus à esquerda,
cabeçalho e coluna direita com busca, mapa da página, contatos e banners que permitem um acesso rápido e
identificação imediata pelo usuário. O uso do desenho limpo e leve permite que o usuário permaneça mais
tempo na página buscando informações e navegando sem cansar-se.

Quanto ao aspecto tecnológico foi abolido o uso de molduras, em função de embaralharem a apuração de
estatísticas sobre visitação das páginas e até mesmo na geração de conteúdos para deficientes. Também não
foi aconselhado o uso de janelas pop-ups (novas janelas abertas sem permissão do usuário) em função do
ruído estabelecido por esse dispositivo. Os navegadores mais recentes já possuem inibidores de janelas
avulsas, pelo recurso ser utilizado indiscriminadamente por páginas comerciais. Quanto á animação, esta é
permitida desde que se tenha critério, evitando a sua banalização e o efeito “carnaval” (identificado nas fases
anteriores das páginas). A animação deve cumprir seu objetivo de salientar uma informação específica.

Buscou-se montar uma estrutura informacional das páginas é lógica e intuitiva, seguindo a regra dos três
cliques, com simplicidade e clareza, sendo estes conceitos amplamente adotados por todos as páginas que
trabalham com informação através do meio Internet. Trata-se de uma forma de linguagem atual que
privilegia a relação do pouco tempo que as pessoas tem para absorverem informação.

Figura II – Novas páginas da Prefeitura de Porto Alegre

Ao mesmo tempo em que as páginas eram desenvolvidos e seu conteúdo alimentado pelos usuários das
secretarias verificou-se a necessidade de maiores informações, apesar da existência de um manual no próprio
programa de alimentação de conteúdo e do treinamento recebido. Foram então, criadas diretrizes para a
criação da estrutura da informação junto aos órgãos e secretarias.
1. A estrutura da páginas deve ser lógica e intuitiva, com muita simplicidade e clareza. Não transformar
o organograma do órgão nos linques da página.
2. Deve ser dada prioridades para os serviços. A missão do órgão, nomes de pessoas e outras
informações institucionais são de interesse secundário.
3. Evitar a banalização de recursos animados. Muitos elementos piscando ou animados em uma tela
não atraem a atenção para lugar algum, confundindo o usuário.
4. O usuário deve encontrar a informação desejada até o terceiro clique. Isto significa que uma
estrutura de linques deve ter, no máximo, quatro níveis de profundidade, sob pena de muitas páginas
não serem visitadas ou encontradas.
5. Toda informação indispensável ao usuário deve estar localizada na tela principal, sem que seja
preciso recorrer à barra de rolagem.
 6. O caminho a ser seguido para a execução de tarefas, busca de informações e baixar arquivos deve ser
claramente sinalizado para quem acessa.
7. O texto para Web deve ser mais curto e objetivo do que o texto impresso.
8. Os nomes das seções devem se adequar à linguagem do usuário; evitar termos técnicos, siglas ou
expressões de classe. Não utilizar nomenclaturas que só os funcionários ou iniciados conhecem.
9. O conteúdo das páginas é de responsabilidade de cada órgão, sob a supervisão da CS e Procempa.
Em todos deve haver uma equipe responsável por atualizar as informações e responder os e-mails
recebidos. Uma página desatualizada causa grande frustração a quem acessa.
10. A página deve prover meios para o acesso de portadores de deficiência.

3 – Conclusão
As páginas começaram a ser disponibilizadas na Web a partir de julho de 2004. Apesar da previsão de
conclusão em setembro de 2004 a primeira etapa, com a disponibilidade de todas as páginas com a
identidade o projeto continua em aberto devido, sobretudo, a falta de estrutura de manutenção nas secretarias
e órgãos.

Apesar disso, o processo de criação de intranets dentro da identidade foi iniciado, já existindo intranets ativas
em dezembro de 2004. O projeto continua coma implantação da identidade em programas criados para a
prefeitura. Em relação às páginas e portal são necessários a qualificação e treinamento do pessoal
responsável pela manutenção das páginas na prefeitura, para solucionar o problema do excesso de blocos de
texto nos níveis secundário. Em paralelo estão sendo desenvolvidas novas funcionalidades no ProWeb de
forma a permitir uma diagramação mais refinada e atraente. Está prevista, também, a flexibilização modelos
para os diversos sites da prefeitura, atendendo suas particularidades, com o desafio de não perder a
identidade e a facilidade de uso.

Em janeiro desse ano foi iniciado o estudo para disponibilizar os sites de forma acessível ao
aos portadores de necessidades especiais, seguindo o que foi estabelecido no decreto número 5296
estabeleceu normas gerais e critérios básicos para a promoção da acessibilidade das pessoas com
necessidades especiais. O Decreto estabeleceu, ainda, um prazo de um ano para os órgãos governamentais,
nos âmbitos federal e estadual, tornarem seus conteúdos web acessíveis. Devido ao fato de o programa de
gerenciamento e a identidade terem sido concebidos pensando numa possibilidade de formatar conteúdos
acessíveis a equipe tem encontrado poucos problemas na implantação do projeto de acessibilidade no prazo
determinado.

Novos recursos de interatividade, aplicação de tecnologias e novos serviços para melhorar a comunicação
entre a prefeitura e os usuários estão previstos nos sites da PMPA à medida que uma cultura de internet e
recursos for sendo implantada e absorvida junto aos órgãos.

Notas
1
LÖBACH, Bernd. Diseño Industial: bases para la configuración de los productos industriales Barcelona: GG Diseño,
1981.

Bibliografia
AGNER, LUIZ. Desenhar interfaces é um processo político. 2004. Disponível em:
<http://Webinsider.uol.com.br/vernoticia.php/id/2103>. Acesso em: 14 ago. 2004.
BASTIEN, C.; SCAPIN, D. Human factors criteria, principles, and recommandations for HCI:
methodological and standatdisation issues. INRIA, Internal Repport, 1993.
CECIL, RICK. Composition and Usability. Digital Web Magazine, 2000. Disponível em:
<http://www.digital-Web.com/features/feature_2000-3.shtml>. Acesso em: 15 abr. 2004.
DONDIS, DONIS A. Sintaxe da Linguagem Visual. São Paulo: Martins Fontes, 1997.
HILHORST, DIDIER P. The Designer Is Dead, Long Live The Designer! Digital Web Magazine, 2004.
Disponível em: <http://www.digital-Web.com/>. Acesso em: 15 abr. 2004.
KRISTOF, RAY; SATRAN, Amy. Interactivity by Design. Mountain View, CA: Adobe Press, 1995.
KRUG, STEVE. Não me Faça Pensar. São Paulo: Market Books, 2001.
LEVY, PIERRE. Cibercultura. 2. ed. São Paulo: Editora 34, 1999.
LYNCH, PATRICK; HORTON, SARAH. Web Style Guide. 2000. Disponível em:
<http://www.Webstyleguide.com>. Acesso em 14 set. 2000.
MEDEIROS, ITAMAR. Sobre a discussão estética vs. Usabilidade. 2002. Disponível em:
<http://Webinsider.uol.com.br/vernoticia.php/id/1551>. Acesso em: 14 ago. 2004.
______. Sobre a evolução do design de interfaces (2). 2002. Disponível em:
<http://Webinsider.uol.com.br/vernoticia.php/id/1551>. Acesso em: 14 ago. 2004.
NATOLIDESIGN. Strategy, Process and Methodology. Disponível em: <http://www.natolidesign.com>.
Acesso em: 18 ago. 2004.
NIELSEN, JAKOB. Top Ten Web-Design Mistakes of 2002. Disponível em:
<http://www.useit.com/alertbox/20021223.html>. Acesso em: 15 mar. 2003.
NIELSEN, JAKOB; TAIHR, MARIE. 50 Websites Desconstruídos. Rio de Janeiro: Campus, 2002.
PÓVOA, MARCELLO. Usabilidade de verdade. Webinsider, 2004. Disponível em:
<http://Webinsider.uol.com.br/vernoticia.php/id/2071>. Acesso em: 14 ago. 2004.
SCHWARTZMAN, MICHEL LENT. Projetando um site em etapas.Disponível em:
<http://www.uol.com.br/publish/37/ Webdesign/dadi_37.htm>. Acesso em: 20 nov. 1998.
TOGNAZZINI, BRUCE. First Principles. 2001. Disponível em: <http://www.asktog.com/basics
/firstPrinciples.html, 2001>. Acesso em: 15 mar. 2003.
VÉLEZ, Manuel; PASTOR, Adela González. El Diseño Gráfico. Curso Introducción a la Interacción
Persona-Ordenador: El libro electrónico. Disponível em <http://griho.udl.es/ipo/pdf/11DisGra.pdf >.
Acesso em: 5 jun. 2002.

Fernanda Hoffmann lobato fernanda.lobato@procempa.com.br

Cristina Leipnitz leipinitz@procempa.com.br
Leônidas Garcia Soares leonidas@procempa.com.br
Marcelo Roennau Lemos marcelo@procempa.com.br