Projeto de identidade visual do portal da prefeitura de Porto Alegre.

Apresentação em tema: "Projeto de identidade visual do portal da prefeitura de Porto Alegre."— Transcrição da apresentação:

1 Projeto de identidade visual do portal da prefeitura de Porto Alegre

2 Introdução 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 identidade, navegação, usabilidade e até mesmo manutenção das 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 eficiências.

3 Introdução Para solucionar a parte de manutenção construiu-se a primeira versão do editor de conteúdos da PROCEMPA 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.

4 Introdução 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.

5 Páginas anteriores ao projeto

6 Principais problemas: Muito tempo da equipe gasto com manutenção e na concepção visual da página em detrimento de seu conteúdo. Não havia um padrão mínimo de informação, muitas páginas não possuíam sequer um telefone ou email de contato. Não havia identificação com a Prefeitura.

7 Objetivos do projeto 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.Ter interface moderna e agradável, obedecendo a princípios de ergonomia e usabilidade 5.Limitar o peso das páginas tendo em vista os usuários de banda estreita (97%)

8 Desenvolvimento Padronizar a arquitetura da informação, estabelecendo nomenclaturas, hierarquias, serviços e navegabilidade. Criar protótipos de identidade visual, prevendo a padronização de ícones, estilos, posicionamento dos elementos na tela, cores, assinatura e elementos comuns; Testes, avaliações e monitoramento; Desenvolvimento de um padrão visual para intranets e sistemas; Documentação e histórico.

9 O editor de conteúdo Paralelo ao projeto de criação de uma identidade visual para os sites da PMPA, a T/IGE deu início à construção de uma ferramenta de publicação e de edição de conteúdos, chamada Proweb Livre. A construção desta ferramenta se constituiu em um novo projeto, sob a responsabilidade da equipe de desenvolvimento da T/IGE. Os designers atuaram em todo o processo de desenvolvimento da ferramenta, dede o levantamento de requisitos, colaborando no planejamento do aplicativo e desenvolvendo o desenho da interface.

10

11 Resultados em 2004 O uso de cores, figuras e demais elementos seguem 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 da página é livre, permitindo diversas foram de diagramação.

12 Resultados em 2004 Quanto ao aspecto tecnológico foi abolido o uso de molduras e pop-ups. Já o uso da animação deve cumprir seu objetivo de salientar uma informação específica. A estrutura informacional das páginas é lógica e intuitiva, seguindo a regra dos três cliques.

13 Sítios criados após a identidade visual

14

15 Os 10 mandamentos 1 - A estrutura do site deve ser lógica e intuitiva, com muita simplicidade e clareza. Não transformar o organograma do órgão nos links do site. 2 - Os serviços oferecidos devem ser priorizados. 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.

16 Os 10 mandamentos 4 - O usuário deve encontrar a informação desejada até o terceiro clique. Isto significa que uma estrutura de links 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 se recorrer à barra de rolagem. 6 - O caminho a ser seguido para a execução de tarefas, busca de informações e download de arquivos deve ser claramente sinalizado para quem acessa.

17 Os 10 mandamentos 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 dos sites é 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 emails recebidos. 10 - Os sites devem prover meios para o acesso de portadores de deficiência.

18 Metas de 2005 Promover a acessibilidade dos sites até dezembro de 2005, atendendo determinação e diretrizes do Governo Federal. Alterações de cores, estilos, imagens e logomarca, tendo em vista refletir nos sites da PMPA a mudança de administração; Substituir ou eliminar os sites que não estiverem dentro do padrão estabelecido. Estabelecer prazo final para sua retirada do ar; Qualificar usuários Proweb Livre para proceder a manutenção dos sites.

19 Implantação do novo modelo Desenvolvimento de uma nova identidade visual; Acessibilidade: Refazer o sistema de menu (não era acessível) e implantar uso intensivo de folhas de estilo, abandono do uso de tabelas para diagramação (tableless); Novas melhorias no Proweb Livre; Treinamento;

20 Prazo: Migração de 11 sites prioritários até 1 de julho. Resultado: Todos os sites primários, secretarias, departamentos no total de 47 migrados antes do prazo estipulado. Em processo: Ajustes finos nas folhas de estilo e arquivos de modelo para acessibilidade.

21 Sítios versão 2005

22

23 Obrigado! Fernanda Hoffmann Lobato fernanda.lobato@planejamento.gov.br