Agora que o site está completo, bora desconstruí-lo! 😀

Brincadeira, vou contar pra vocês um pouco de como foi o meu processo de estudo, concepção e criação do layout do site WordCampRJ, que foi codificado pelo Gustavo Bordoni, um dos organizadores do evento.

Muito antes de pensar em HTML e CSS os amigos da organização me pediram para criar o PPT da apresentação da proposta de locação no começo desse ano. Ainda não tínhamos conversado com o Senac na época e estávamos prospectando pela cidade e esse PPT foi a porta de entrada para o layout.

Por causa dele eu fiz uma pesquisa bem profunda nos sites das outras cidades lá na Central WordCamp dos últimos 2 anos, e que me gerou um “DOC XICANTE“, e dele a estrutura de páginas para o projeto.

Integrando os conceitos com o Front/Back-end antes de abrir o Photoshop

O site do WordCamp obedece um formato próprio, todo pensado no modelo do evento. No tema disponibilizado para as cidades pelo WordPress, nós não podemos mexer no XHTML, ficando à cargo do CSS toda a estilização do tema.

Mas aí você diria: “ué, não é esse o conceito dos padrões web, igual como fazíamos no saudoso CSS Zen Garden?” Sim, é. Mas ainda sim, limitar o XHTML e se diferenciar dos demais WordCamps era o grande desafio, e não “layoutar” pelo CSS. Mesmo porque, o Bordoni é um verdadeiro Neymar como front/back-end, e isso não foi um problema pra ele! 😀

Depois de conversar um bocado com ele sobre as ‘Custom post Types‘ e ‘Custom post Taxonomy‘ do tema (‘Speakers‘, ‘Sponsors‘, ‘Organizers‘, etc.), eu parti para a criação das duas telas de ‘wireframes‘ conceituais, que uma vez aprovadas pelos amigos da organização, eu finalizei as páginas restantes e então comecei a desenhar o layout em PSD.

Hora de digitar “CTRL + N” no Photoshop

O apelo mais forte do layout é a identificação da cidades pelos seus cartões-postais. Ok, é um pouco clichê sim, mas como o evento é internacional, fugir desse conceito seria um tiro no pé, basta ver o resultado da pesquisa que eu fiz nos outros sites.

O principal diferencial seria mostrar nitidamente as características da cidade no layout em si. E coube às imagens dos principais pontos turísticos esse papel. Esse conceito ficou tão emblemático para nós, que o utilizamos inclusive nas cotas de patrocínios que receberam nomes com esse tema. Para cada página, uma imagem aleatória de um foto do Rio de Janeiro seria exibida no ‘background‘, com exceção da “Home” que tem a imagem fixa da estátua do mestre Carlos Drummond de Andrade.

Dentre as fotos nós escolhemos a praia de Copacabana, o Pão de Açúcar, Corcovado, Maracanã e os Arcos da Lapa como atrações visuais para o site.

Um tema bastante discutido entre a galera da organização foi a paleta de cores do projeto. O bicho pegou nos bastidores, e a discussão ficou entre os argumentos “as cores estão muito americanizadas” e “quais são as verdadeiras cores que representam o Rio de janeiro?” e como não chegamos a um consenso eu bati o martelo e optei pelas cores oficial do WordPress porque entendi que elas não ferem a identidade carioca do site.

Como nós usamos o tema ‘Twenty Thirteen’ como base para editar o CSS, obedecemos tanto a sua tipologia nativa, como também o seu pequeno grupo de ícones nas postagens.

Desconstruindo o layout

Na página “Programação” criamos uma legenda baseadas em cores para diferenciar os tipos de palestras, facilitando o entendimento dos usuários dos conteúdos apresentados. Na tabela, todos os palestrantes possuem links âncora apontado para a sua posição na página “Palestrantes”, que mesmo sendo de exibição aleatória, aportam no avatar e descrição do palestrante desejado.

Já na página “Patrocinadores”, criamos uma estrutura de visualização do respectivo logotipo baseado na cota contratada. Ou seja, quanto maior a cota, maior o tamanho exibido do logotipo na tela. Além disso, contemplamos nessa página a listagem de “Patrocinadores Lapa”, que é uma forma de micro-patrocínio feito por uma pessoa física, como forma de apoiar o evento, que, em contrapartida, tem o seu link divulgado nessa página também, claro!

Outro destaque é a página que preparamos chamada “Guia de Sobrevivência” para orientar o usuário que vai ao evento e mora num bairro mais distante, cidade, ou até mesmo em outro país e não conhece nada no entorno do Senac e precisa de um apoio em referências da organização. Essa página é um índice para as sub-páginas “Como chegar”, com orientações das principais portas de entradas da cidade; “Onde se hospedar” com um mapa dos principais hotéis via Google Maps e “Onde almoçar” com uma enorme lista das principais opções para fazer uma refeição.

Um projeto que cabe no seu smartphone

E claro, não podíamos deixar esse tema de fora, todo esse projeto é ‘web responsivo’, ou seja, roda bonito nos dispositivos móveis, mas se você ainda não sabe nada sobre esse assunto, se inscreva no evento que vamos falar sobre isso também no meu painel! 😀

Esperamos que vocês tenham gostado do site e nos vemos no dia 20 de setembro!
Até la!