À esquerda, capa da versão antiga do site do Coren-PR. À direita, a capa do mesmo site já com o novo projeto de design em uso (algumas imagens desta postagem contém versões ampliadas: clique para vê-las).
Redesign do site do Coren-PR (2004).
O trabalho de reformulação do site do Conselho Regional de Enfermagem do Paraná iniciou em 2004 e sofreu pequenos ajustes corriqueiros posteriores. O formato esteve on-line até o início de 2009. O desenvolvimento desta versão consistiu nas seguintes frentes:
- estabelecimento de uma identidade visual, perceptível pela repetição na formatação dos diversos elementos utilizados no produto;
- desenvolvimento de um projeto gráfico e normas de diagramação para manutenção da identidade;
- reestruturação dos itens de menu, com o cuidado constante na apresentação clara e hierárquica das informações da interface e do conteúdo (design de informação);
- diagramação do novo conteúdo e adaptação progressiva do conteúdo antigo.
Na etapa de projeto de design, participou mais diretamente a jornalista Lucia Massae Suzukawa, colaborando com o trato dos elementos de informação textual, adaptando título de menus, textos informativos, como também produzindo – mas não exclusivamente – conteúdo de comunicação publicado do site, em meados de 2004.
Pela extensão da variedade de público e pela função utilitária do site, uma das preocupações constantes foi com as funcionalidades do produto, buscando uma navegação simplificada, conteúdo objetivo, informações humanizadas e tecnicamente voltadas para o leigo, além de leveza dos arquivos.
O projeto gerou três modelos fundamentais de páginas: (1) capa; (2) capa de seção (eventual) e página de conteúdo; (3) página para impressão. A seguir, exemplos destas páginas.
Exemplo de capa.
Elementos que compõem os modelos de páginas internas: (1) identificação com link de atalho para capa; (2) menu principal e campo de busca; (3) título (“Sobre o Coren-PR”) e subtítulo ou subdivisão de página (“Apresentação”) da página corrente; (4) subdivisões de páginas ou atalhos para seções em páginas longas; (5) área do conteúdo.
Todos os downloads de arquivos são legendados sistematicamente e levam o usuário leigo, caso assim deseje, para uma página de esclarecimentos sobre cada tipo de arquivo.
Apresentando na página acima: uso dinâmico da área lateral, sob o menu principal (à esquerda); resumo da página corrente/hyperlinks para as seções (em cima, na área do título); botões de auxílio à navegação em páginas longas: topo/anterior/próximo (setas verdes, à direita).
No rodapé: indicação do tipo “onde estou” e atalhos para navegação (à esquerda); funções especiais, como link para a página compatível com impressão (ícone de impressora); informações específicas do documento vigente ou atalhos para páginas consecutivas (à direita, com ícone de “checado”); copyright (à direita, embaixo).
Formatação de longos textos técnicos, com uso de marcações que colaboram no entendimento hierárquico. No exemplo, o texto original foi recortado para reduzir a imagem e demonstrar apenas o tratamento visual dado aos elementos (clique para ver no tamanho real).
Modelo de página para impressão.
Exemplos individuais.
Mapa clicável (página secundária à direita).
Exemplo de diagramação de artigos (esquerda) e formatação de lista de eventos. O conteúdo das páginas foi editado para reduzir a altura da imagem.
Outros exemplos de páginas internas.
