Projeto de reestruturação web

Nesta página, serão discutidas as questões de reestruturação do portal do BrOffice.org.

Considerações iniciais

Atualmente, o portal tem verdadeiros "LATIFÚNDIOS" que precisam melhorar, mas ainda estamos em fase de discussão. Algumas considerações iniciais, que ajudam a nortear o projeto:

• ter um portal agradável para usuários finais e corporativos. O usuário final (nós), precisa se sentir em casa... "fun"... mas ao mesmo tempo, tem que manter uma postura consistente, para transparecer leveza, consistência, para o corporativo;
• a logo tem que ser preservada a todo o custo! Ela tem que ser destacada e limpa, dentro da página;
• é preciso que o Portal seja o melhor organizado possível, tentando levantar os problemas de usabilidade, clareza, leveza e acesso a ele.

Considerações do Christiano

• É necessário, urgentemente, reduzir o número de animações, isso deixa o usuário um pouco tonto.. Uma sugestão é: quando a página tem muito texto, não se usa animação. Mas quando você está apresentando uma idéia ou a página não tem muito texto, a animação é bem-vinda para não dar sensação de vazio. Isto traz outras demandas:
  • definir os tamanhos dos anúncios e banners para o portal;
  • definir a política de uso (ou não) de banners animados;
  • estudar a comunicação visual dos anúncios do broo;
  • outra idéia, é usar fotos legais, no estilo da M$ ou IBM, para repassar a idéia, usando algum texto.

• Disponibilizar logos do Broo para outros usuários para uso em páginas pessoais e blogs;

Objetivos do portal

• agregar notícias sobre open/broffice.org e ODF, usando taxonomia;
• agregar documentação, na forma de tutoriais, manuais, apostilas, feito por brasileiros ou traduzidos de vários idiomas, para nossos usuários;
• divulgar nossos projetos, visando conquistar novos voluntários;
• manter um espaço para empresas que prestam serviços poderem anunciar, ajudando a manter o ecossistema comunidade-usuários-empresas;

Linhas gerais

Começando pelas cores. A predominância é azul e verde, do logo. Verde tem dado um efeito muito legal em várias páginas, dando "mais vida". Algo a se pensar...

No portal, temos as situações que precisam ser contempladas:

• Cabeçalho;
• Menu principal (primary links - no Broo: Início, Produto, Suporte, Baixe já!, Colabore, Indicar notícia, Login e RSS);
• Menu secundário (second links - no Broo: Sobre o BrOffice.org);
• Blocos - espaços que ficam nas laterais esquerda e direita do portal - no Broo: esquerda: Projetos, amigos do broo, noticias do broo, etc. direita: baixe já, suporte, investem no broo, etc.
• Notícias - no meio, com duas variantes: fixas no topo (fundo cinza) e as normais;
• Rodapé.

Analisando a IBM(1), achei o cabeçalho super compacto, com um bom aproveitamento do espaço. Tentei fazer isso nos exemplos em anexo. Outra coisa legal é o MouseOver nas sessões abaixo da imagem (Aprenda mais, Compre, Obtenha Suporte...), pois quando passa o mouse, fica com o fundo cinza. No leiaute 4, imaginei fazer isso com um fundo azul, nos blocos (vide www.broffice.org). Ajuda na navegação, na visibilidade do mouse dentro do portal.

• comentário do christiano - Alguns sites ficam minúsculos se você está com uma resolução 1280x1024 (a que estou usando). Isso acontece porque o site tem muitas imagens e foi feito para atender no mínimo 800x600. Uma coisa que valorizo muito em um site é o aproveitamento da tela. Se você usa muita imagem, precisa fixar em um tamanho (800x600 é mais genérico, só que fica as sobras brancas na tela). Mas se você sabe equilibrar imagens com textos, pode deixar o site se auto dimensionar. Veja por exemplo a página personalizada do Google ou do Gnome. Se você vai redimensionando a janela do navegador, o site vai acompanhando, porque o tamanho dos divs ou tabelas não são fixos e sim são marcados com porcentagem. Ao desenvolver, tem que pensar em todas as resoluções, tem que pensar até que pode haver pessoas acessando o seu site usando um Palm ou celular, que possui uma tela minúscula. Sei que é difícil encontrar a fórmula, mas isso vai te dar uma acessibilidade enorme no site e vai passar harmonia.

No caso do OOo(2), achei muito interessante o menu principal. Lá, está em azul, mas com um MouseOver, ele troca para branco. Vi uma variante no portal do Visie(4), invertido. Tudo branco e com MouseOver com cor. Também tem, nas imagens em anexo, esta experimentação (menu principal com fundo verde e selecionado em branco, e invertido). Outra coisa legal do OOo é notícia fixa no topo, com um degradê de fundo. Achei interessante aquilo, principalmente porque pode dar condições de fazer algo harmonioso de azul -> verde (esquerda -> direita).

• comentário do christiano - Isso é muito bom, e passa acessibilidade para o usuário. É sempre bom ter esse recurso onde o usuário passar o mouse, ajuda muito quando o usuário é mais idoso ou possui dificuldades de enxergar.

No IDSL(3), achei extremamente leve (visualmente). Achei uma sacada aquele menu principal (horizontal) com cores, apesar de crer que não seja aplicável para nós.

Já no enrichmint(5), eu gostei muito do uso de "capituladores" (ícones na frente dos textos. Dá pra usar isso no drupal, taxonomia com imagens. O Slashdot faz isso, mas são ícones toscos e alinhados à direita, enquanto que nestes, são à esquerda. É uma idéia...

• comentário do christiano - Fica bacana sim, mas é bom equilibrar para não ficar muito carregado.

Por fim, no futura, tem coisas interessantes. O que me chamou a atenção foi o menu principal, e as bandeirinhas no topo (direito superior) da página. Vamos implementar internacionalização no portal. Acho que dá pra usar algo... não sei (fonte de inspiração?)....

• comentário do Cláudio - a idéia é ter, no futuro, o portal em outros idiomas, se o BrOO fizer convênio com outras comunidades e/ou países. Por hora, é a menor das preocupações;

• comentários da Márcia - nosso portal (broffice.org) no divã. ;-)

Olá pessoal,

Bom, li todas as informações que me foram passadas, acessei as referências e aproveitei para conversar com o Claudio e tirar umas dúvidas minhas. Foi ótimo já terem separado as áreas, criado o mapa do site, mostrado referências. Tudo isso é muito bom para o fortalecimento do objetivo do site.

Em conversa com o Claudio, pudemos definir melhor alguns pontos e apresento-os abaixo.

As principais áreas do site são, em ordem de maior prioridade para menor:

1- Baixar aqui
2- Suporte
3- Colaborar
4- Produto
5- Sobre o BrOffice.org


* Pontos fracos do atual site:

- Espaços muito grandes, desperdiçados;
- Áreas importantes escondidas;
- Destaques desproporcionais na home;

* Informações atuais:

- "ONG BrOffice.org" deve ir para "Sobre BrOffice.org"
- "Amigos do BrOffice.org" fica somente dentro de "Projetos" e "Downloads"
- "Notícias" deve permanecer, porém com área menor
- "Recado de amigo" permanece
- "Projetos" entra no menu principal
- "Investem" permanece
- "Baixe já" permanece

* Pontos positivos de algumas referências:

MICROSOFT

- Formato: cabeçalho, bloco esquerdo, destaques
- Uso de fotos/imagens
- Mouseover

SKYPE

- Mouseover
- cabeçalho
- Logo em destaque
- Conteúdo de rápido acesso, clean
- Uso de fotos/imagens

IBM

- Mouseover
- Uso de fotos/imagens

POSTGRESQL

- Leve, clean
- Acesso a todo conteúdo importante com uma rolagem
- Conteúdo de rápido acesso

--------

Estarei preparando a seguinte documentação relacionada à arquitetura de informação. Macroarquitetura:

- Diagrama de prioridade de informação
- Wireframe da home
- Wireframe de uma tela secundária
- Sitegrama

Após a aprovação, apresentarei a linha visual:

- Layout da home
- Layout de uma tela secundária

Todas as informações que vocês passaram vão ser utilizadas na criação da documentação. Quaisquer informações adicionais, é só falar que vamos melhorando :)

Referências:
(1)http://www.ibm.com/br/
(2)http://www.openoffice.org/
(3)http://www.idsl.org.br/
(4)http://visie.com.br/matricula/
(5)http://www.enrichmint.com/
(6)http://www.futura.org.br/main.asp
(7)http://flickr.com/photos/diegoeis/sets/72157600089415077/detail/
(8)http://flickr.com/photos/diegoeis/sets/72157600061601588/detail/

Módulos úteis

• Adicionar módulo "Enviar por email"(1)
• Adicionar módulo "File Browser"(2)

(1) http://drupal.org/project/emailpage
(2) http://drupal.org/project/filebrowser