“Depois de muitas perguntas resolvi compartilhar o processo criativo que nos levou a construir o site da D2B Consultoria, aqui para a Comunidade Contraste 
“
Olá galera! Hoje vou falar de um assunto que já estão me perguntando a mais de um mês, desde quando subimos o site da D2B Consutoria para o ar. Bom, vou explicar o processo criativo e como ocorreu o desenvolvimento do projeto, de maneira a “matar cusriosidade” e também poder contribuir com o aprendizado coletivo. Primeiramente tenho que dizer: não é Flash! Me perguntaram após o site ir ao ar que era muito bacana porque utilizava Flash. Não, eu disse. O site é puro XHTML + DHTML + JAVASCRIPT + JQUERY + AJAX. Ué, pensei que era Flash, foi a resposta que ouvi algumas vezes. Bom, para desenvolvedores e diretores de arte da web 2.0 sabem que hoje em dia pode ser um “tiro no pé” começar um projeto inteiro em Flash, pois acarreta em prejuízos de SEO (Search Engine Optimization), ou seja, o site dificilmente aparece bem posicionado na busca orgânica do google. Graças aos milagres visuais oferecidos pela biblioteca javascript Jquery (saber mais sobre Jquery), conseguimos desenvolver uma navegação intuitiva e diferenciada da maioria dos websites. Com uma proposta de navegação em duplo eixo (x,y) oferecemos uma experiência com o conteúdo de maneira particular, cada usuário trilha seu próprio caminho no site da D2B Consultoria. Bom primeiramente queríamos um site que estivesse alinhado com nossa proposta de consultoria em marketing estratégico e que refletisse nossa expertise em web 2.0. Após alguns brainstormings e rafs chegamos a esse layout:
O visual ficou um pouco com cara de Blog e com aqueles rodapés “kilométricos” que custumamos ver bastante hoje em dia. Utilizamos alguns gadgets externos e uma linguagem descontraída. Fizemos o dever de casa mas no final das contas chegamos a conclusão que não era isso que queríamos. O site estava seguindo a “modinha” web 2.0, e sinceramente não era esse nosso objetivo. Não queríamos ter um site da moda, queríamos algo que traduzisse nossa essência que é a criação de projetos com base em marketing digital, seguindo metodologias próprias de desenvolvimento e com o perfil de consultoria, não agência! Ai voltamos a estaca zero. Lápis, papel e correr para sala de reunião para pensar novamente a respeito do site da D2B Consultoria. Conversando com minha sócia por algumas horas chegamos a conclusão que nosso site teria uma navegação em uma página só. E o que seria isso? Bom, um projeto que o usuário não precisasse entrar em links, mas sim, literalmente navegaria pelo conteúdo de forma intuitiva. Essa foi a premissa inicial. Logo após, visitamos alguns sites para ver referências de sites com navegação em uma página só. Entre eles os que mais nos inspiraram foram esses:
Outra referência importante para citar é influência da trilogia de filmes da série “Cubo”. A nevagação em quadrantes foi uma idéia pensando na dinâmica de movimentação do Cubo, onde os personagens tentavam sair “desesperadamente” por conta das armadilhas espalhadas pelos quadrantes que iam desde gases letais até esguichos de ácido. Bom, realmente por este ângulo não nos baseamos muito no Cubo, fique tranquilo pois você não será surpreendido com armadilhas enquanto navegar no site da D2B Consultoria, rsrs. Mas com relação a movimentação confesso que nos inspiramos bastante no Cubo.
Com base nessas referências lá fui eu brincar com meus papéis e após alguns minutos tinhamos algo como isso:
Brincando de colar post-it
Os post-its foram uma forma de organizar as idéias de maneira lúdica, como um teste psicotécnico ou algo do tipo. Pensando mais um pouco fui “rafear” a idéia para ver o que poderia sair daí, e obtivemos isso:
Rascunho do mapa de seções
Ficamos debatendo sobre esses rascunho e chegamos a fazer uns outros 4 ou 5 modelos com base nesse. Tinhamos chegado em um concenso do que seria a estrutura macro do projeto, no entanto, agora ficava uma das questões mais delicadas: e o layout? Vamos seguir qual estilo? Qual tipografia? Qual linguagem? Bom, lá fomos nós meditar um pouco e no dia seguinte resolvi fazer uma experiência, e não é que deu certo! Veja:
Layout rabiscado do background do site da D2B Consultoria
Saiu a base do layout. Tivemos a idéia de fazer uma espécie de diagrama, representando o planejamento estratégico (um dos diferenciais de nossa consultoria), onde o site todo seria um mapa de uma apresentação da empresa. As setas ao longo do layout representantam essa idéia, o restante vocês já conhecem! Mas para quem não viu ainda segue abaixo:
Layout final do site em versão macro
Após termos feito a base do layout o restantente fluiu, como deve ser em qualquer trabalho criativo. Como já disse o grande Toquinho em “Aquarela”:
Numa folha qualquer
Eu desenho um sol amarelo
E com cinco ou seis retas
É fácil fazer um castelo…
E assim foi por ai que chegamos ao resultado final do site de nossa consultoria. Espero que tenha ajudado a contribuir de alguma forma para o conhecimento coletivo. É raro você ver alguém falando de como fez isso ou aquilo, lembro de alguém que fazia isso bastante. MISTER M…rs
#1 by Julio Cesar Borges Bomfim at 11 de junho de 2009
Hehehe… pensei que só eu gostasse dos filmes “Cubo”, rsrs… Mas legal “destrinchar” todo o processo de criação do site, que já andei dando uma olhada e ficou bem bonito e principalmente funcional. Este post serve como estudo de caso para outras pessoas aprenderem. Abraço!