Projeto visual WordCamp RJ 2014
Produto(s): Logotipo, identidade visual e site
Autor: @cristianoweb
Referências de pesquisa:
Proposta de logotipos e layouts pesquisados em destaque:
1 . Ann Arbor
(http://2014.annarbor.wordcamp.org/)
- Layout minimalista contendo topo com efeito paralax bem discreto;
- Web responsivo;
- Fácil leitura;
- e navegação simplificada.
2 . Asheville
(http://2014.asheville.wordcamp.org/)
- Layout minimalista (mas é mesclado com um dos temas padrões do próprio WordPress);
- Logotipo bastante impactante, mesmo nas páginas internas onde o seu redimensionamento é obrigatório e possui limitação por causa da aplicação difícil em virtude do formato redondo;
- Web responsivo;
- Menu fixo sempre no topo facilita muito a navegação;
- Sidebar útil e bem minimalista (quase no estilo “flat”) - Destaque para o APP via site EventJoy;
3 . Charleston
(http://2014.charleston.wordcamp.org/)
- Layout minimalista (mas também é mesclado com um dos temas padrões do próprio WordPress);
- Logotipo que remete à cidade (que possuem muitas palmeiras), além de informar a data do evento;
- Destaque para o uso da excelente ferramenta Tagboard (gratuita) para filtrar conteúdo usando a hashtag oficial do evento nas redes Twitter, Facebook e Instagram.
- Web responsivo;
4 . Connecticut
(http://2014.connecticut.wordcamp.org/)
- Layout minimalista (também é mesclado com um dos temas padrões do próprio WordPress);
- Logotipo de difícil aplicação em mídias pequenas;
- Disponibilização de banners em formato de widgets para incorporação rápida em sites;
- Web responsivo;
5 . Denver (2013)
(http://2013.denver.wordcamp.org/)
- Layout minimalista (também mesclado com um dos temas padrões do próprio WordPress);
- Logotipo estilizado, mas de difícil aplicação em mídias pequenas. Também utilizou as informações de local e data;
- Não é 100% web responsivo;
6 . Europe
(http://2014.europe.wordcamp.org/)
- Layout minimalista (também mesclado com um dos temas padrões do próprio WordPress, porém, como estilos personalizado baseado na paleta de cores do evento);
- Não possui logotipo. Utiliza título em formato de texto;
- O topo possui efeito discreto de “paralax”, que seria melhor aproveitado se o fundo fosse de imagem e não cor;
- Menu fixo no topo facilitando a navegação;
- Não é 100% web responsivo;
7 . Hamburg
(http://2014.hamburg.wordcamp.org/)
- Layout minimalista que utiliza na home topo com fundo fixo com um discreto efeito “paralax”, e nas páginas internas o layout é no formato “Boxed”;
- O logotipo usa as duas cores da paleta de cores do WordPress, levemente alterada do padrão oficial. Ele também insere na mesma a informação da data do evento;
- O menu é fixo no topo facilidade a nevagação;
- Não é 100% web responsivo;
8 . Miami
(http://2014.miami.wordcamp.org/)
- Layout bastante agressivo apesar de minimalista também. Usa foto no fundo para dar bastante contraste no conteúdo, que está encapsulado no formato “Boxed”;
- O menu é em formato “Paralax” e fica fixo no topo após uma breve navegação vertical ultrapassando a altura do topo;
- O logotipo é bem impactante, porém, de difícil aplicação em mídias menores;
- O menu usa cores de fundos baseados na categorização, mas que pouco combinam com a identidade visual do site, o mesmo ocorrendo com vários elementos de estilos do tema;
- Web responsivo;
9 . Minneapolis
(http://2014.minneapolis.wordcamp.org/)
- Layout minimalista e bastante equilibrado. O topo e o menu são fixos, e o logotipo mantém a elegância do tema;
- O logotipo/topo possui informação da data e local do evento;
- Utiliza dois widgets de destaque logo abaixo do topo;
- Não é 100% web responsivo;
10 . Nashville
(http://2014.nashville.wordcamp.org/)
- Layout bastante minimalista com imagem de fundo fixa nas páginas internas;
- Usa a paleta de cores oficiais do WordPress;
- Também usa informação de local e data do evento no topo;
- Não é 100% web responsivo;
11 . NYC
(http://2014.nyc.wordcamp.org/)
- Layout bastante minimalista e impactante;
- Logotipo remete à pontos turísticos da cidade;
- Menu fixo no topo facilitando a navegação, O mesmo possui informação sobre o local e a data do evento;
- Também possui 3 áreas de destaque utilizando widgets;
- Web responsivo;
12 . Orange County
(http://2014.oc.wordcamp.org/)
- Layout bastante minimalista, porém muito impactante por causa da paleta de cor baseado no vermelho em quase 100% do tema;
- Logotipo mais radical de todos baseado em pixelart;
- Web responsivo;
13 . Orlando (2013)
(http://2013.orlando.wordcamp.org/)
- De todos os sites, esse é o que possui o layout mais modificado;
- A página inicial possui um texto de apresentação sobre o evento, falando as áreas de abordagem, entre outros;
- O logotipo é bem exagerado, mas combina com o restante da proposta do site;
- O menu possui comportamento diferente entre a página inicial e nas internas, e o topo informa os dias do evento;
- Não é 100% web responsivo;
14. Porto (2013)
(http://2013.porto.wordcamp.org/)
- Layout minimalista e bastante equilibrado, utilizando muito bem a paleta de cores oficiais do WordPress;
- O logotipo é bastante impactante e o topo é fixo, sendo igual em todas páginas;
- O topo extremo é utilizado de forma fixa para exibir a informação sobre a data e o local do evento;
- Não é 100% web responsivo;
15. Switzerland
(http://2014.switzerland.wordcamp.org/)
- Layout bastante minimalista, baseado em tpo com imagem fixa em todas as páginas;
- Logotipo malfeito, com intenção de remeter ao canivete suíço;
- Web responsivo;
Resumo sobre as propostas de logotipo
A grande maioria do logotipos é baseado em algum elemento que remeta à cidade sede do WordCamp. Em geral é contemplado um ponto turístico junto do nome da cidade e quase sempre somado ao símbolo do WordPress. Dependendo da aplicação do logotipo, as sua paleta de cor raramente variou do esquema de cores oficial do WordPress. Das propostas analisadas, 100% não se preocupou com a aplicação do logotipo em mídias menores, justamente por agregar muitos elementos visuais.
Resumo sobre as propostas de layouts
A maioria se baseou num mesmo formato. Topo baseado numa imagem de fundo (em geral, uma foto da cidade-sede) com o logotipo aplicado por cima. Alguns ainda inseriram as informações de data e local do evento, ora no próprio topo, ou no menu principal ou no menu secundário.
Muitos reaproveitaram temas padrões do próprio WordPress como base, personalisando os estilos de cores, fontes e outros elementos. Apenas alguns inovaram com técnicas como “paralax” para dar um diferencial no layout, mas NENHUM abusou o CSS para modificar o comportamento visual dos elementos obrigatórios do XHTML.
Resumo de “features” destacadas
- Menu fixo no topo do site;
- Fundo do topo com efeito discreto de “paralax” (altura maior na página inicial e menor nas páginas internas);
- Corpo do site em formato “boxed”;
- Criação de “hashtag” oficial do evento e exibição em área de destaque no site;
- Criação de aplicativo (“App”) oficial do evento para Android e iOS (Sugestão do site “EventJoy”);
- Programação do evento em tabela com cor de fundo de célula personalizada de acordo com a(s) área(s);
- Página de palestras individuais com links vindos dos perfis dos palestrantes;
Propostas de arquitetura de informação e estrutura de páginas
- Home
- Sobre o evento
- Código de Conduta
- Equipe organizadora
- FAQ
- Programação (com link para páginas individuais das palestras)
- Palestrantes (com link para páginas individuais dos palestrantes)
- Local
- Como chegar
- Onde ficar
- Onde comer
- Patrocinadores
- Seja patrocinador
- Pacotes de patrocínio
- Contato
- Inscrição
- Blog
Propostas de wireframes
Página “Home” em formato browser.
Página “Home” em formato mobile.