Blog Cristiano WebRelatos da vida de um Webdoméstico!

Contratos fechados, cliente na maior expectativa, é hora então de efetivamente colocar a mão na massa! E mais uma vez é preciso disciplina, organização e metodologia. Sem esses três elementos é impossível cumprir prazos e atingir objetivos. No artigo de hoje eu falarei sobre tudo que envolve a criação e produção nos projetos dos sites que eu faço. Eu dividi o artigo em 4 partes. São elas:

1. Pesquisa
2. Wireframes
3. Layouts
4. HTML

Conhecer o cliente e seu público é o primeiro passo de tudo

No artigo passado eu disse que usava o Google Docs na página Orçamentos em formato de formulário. Nele há 31 campos para o cliente preencher divididos em 4 áreas distintas. As perguntas visam entender o cliente, como ele trabalha, com quem concorre e principalmente como é o seu público. É nele que eu foco o meu trabalho.

De posse desses dados eu parto para a pesquisa. Busco todas as referências que o cliente fornece. Em suas respostas há sempre informação onde você pode buscar mais novas referências. O objetivo é entender o mercado, analisar como abordam os seus usuários, quais informações são disponibilizadas, diferenciais no serviço,… enfim, tudo que possa dar base para projetarmos algo onde o diferencial do meu cliente se destaque ao máximo.

Cada página que eu visito, eu salvo no meu Delicious e faço uma consideração, armazenando de forma privada, pois é fonte de pesquisa. Para isso eu uso um plugin do Firefox muito útil e intuitivo chamado Shareaholic.

Quando um site possui uma solução visual muito interessante que pode ser usada como argumento na proposta de páginas que eu envio para o cliente, eu salvo um screenshot da mesma, também usando um plugin do Firefox. O Screengrab. Ele captura a tela com apenas um clique e salva em JPG ou PNG e ainda renomeia os arquivos, muito bom!

Depois dessa pesquisa, e analisar qual é o melhor formato desse conjunto de páginas, é hora de criar um mapa do site. Para essa demanda eu uso o Corel Draw mesmo. Tenho muita facilidade de fazer esse organograma estrutural de páginas e confesso que nunca tentei nenhum outro. Mas como sempre me atendeu bem, continuo usando até hoje! Outra técnica muito legal que eu uso para resolver alguns “gargalos” quando estou fazendo o mapa do site é o “Card Sorting“. Com ela a organização de um site que possui vários níveis de páginas e sub-páginas e não sabemos que formato seguir, essa solução se mostra bem eficaz.

Todo projeto digital começa com um lápis e papel

Por mais que eu adore tecnologia, eu acredito que ainda não inventaram nada melhor que lápis e papel para se desenhar qualquer coisa, inclusive um layout de site. E um wireframe tem bem esse conceito. É como se fosse um rascunho do projeto. Cada elemento de informação de um site, seja ele a logo da empresa, os botões de menus, a descrição de uma produto, um vídeo sobre um serviço; cada um desses elementos é uma informação. E todas possuem “um peso”, uma importância dentro da estrutura. E cabe ao wireframe projetar e prever possíveis problemas antes de cair dentro do Photoshop. Isso otimiza os processos evitando retrabalhos desnecessários.

Eu uso um software que não é mais comercializado chamado Adobe Image Styler. Há vários outros no mercado, muito bons como o Axure, Microsoft Visio, Omnigraffle, entre outros. Da mesma forma que o CorelDraw, eu já estou bem familiarizado e costumo ser bem rápido na demanda usando esse aplicativo. Em geral eu desenho a tela inicial, um modelo de página interna e as específicas do negócio do cliente, o epicentro do projeto. Por exemplo: se for um site de fotografia, eu farei a página de fotos. Em média eu costumo fazer 3 wireframes para cada proposta.

E depois de desenhar as telas de wireframes eu faço um documento para o cliente com toda essa proposta. Nele eu argumento no meu texto usando todas as referências necessárias para o projeto. A ideia é dar o máximo de referências visuais e argumentativas ao cliente mostrando o caminho à seguir com o projeto. Todo esse material é conversado com o cliente e negociamos em conjunto. Pois quem entende do negócio é o cliente e eu da Internet. Somente depois de tudo aprovado é que parto para o layout em PSD.

O momento mais esperado!

Finalmente é hora de desenhar o layout! Com os dados levantados e usar uma boa fonte de inspiração o layout vai nascendo de forma natural, pois todo trabalho prévio orienta a construção da interface. Claro que ainda é um processo de criação que usa muita intuição, muito “feeling”, mas ainda sim, há bastante técnica e referências envolvidas.

Como eu disse anteriormente, eu uso o Adobe Photoshop para a criação dos meus layouts. Também há no mercado outras opções para isso. Porém é de acordo com o gosto e aptidão de cada um. Eu tenho um modelo de PSD que uso como frameworks de criação (se é que podemos chamá-lo assim!!!). Eu organizo os “folders” com relação às áreas macros do site, tipo topo, rodapé, barra lateral, etc. Renomeio tudo para facilitar na hora de ter que reajustar alguma coisa depois. Num trabalho contínuo de atualização, fica bem mais fácil de achar os elementos. Por isso eu também dou nomes às “layers” de acordo com as tags do HTML. Por exemplo: se há um texto que sabemos que será um “h3″ da área de “notícias”. Então eu renomeio a layer para “h3-news”. Isso é legal para projetos onde há mais de um profissional envolvido e outro implementando o seu código.

Na busca de inspiração eu gosto bastante dos sites Smashing Magazine, Abduzeedo, Design on the Rocks; além dos repositórios CSS como o CSS Clip, Galery, Remix, Vault Galery, We love CSS, etc. Para fontes eu gosto bastante do Dafont.com com as sua classificação bem organizada por tipo de família. Já no caso das cores eu uso a rede social Colour Lovers e um software chamado Color Schemer. Com ele é possível selecionar qualquer cor na tela (dentro ou fora do browser) e ver o código hexadecimal e/ou RGB e fazer um simulado de cores complementares e exportar a paleta direto para o Photoshop. Para ícones e texturas eu não costumo usar nenhum site específico, vai depender muito do projeto.

Uma outra base de apoio que eu uso na criação dos layouts são os plugins Firefox Colorzilla (que tem a mesma função do Color Schemer, porém só funciona dentro browser Firefox). Outro plugin muito legal é o MeasureIt, que mede o tamanho dos elementos visuais da tela em pixels. E por último meu Firefox está turbinado com o plugin Web Developer. Um menu com várias funções interessantes para a criação de sites. É bastante completo e fácil de usar.

Agora é só fatiar e servir!

Para editar o código HTML e CSS eu uso o DreamWeaver. Sua produtividade é bastante razoável. Há boas opções no mercado e muitas delas especificamente voltadas para o desenvolvimento de um código em tableless. Como por exemplo o CODA e o Zen Coding. Veja o ótimo vídeo do Diego Eis explicando as vantagens no uso desses aplicativos. Já o meu parceiro de desenvolvimento, Cayo Medeiros, ele além do DreamWeaver ele também utiliza o Plugin Firefox FireBug para corrigir bugs do projeto, o FileZilla como cliente FTP. Para servidor web local e escolheu o Xampp para trabalhar com projetos em PHP na sua própria máquina antes de subir para o servidor on-line.

Bem, é isso galera! Espero que tenham gostado desse artigo e que ele seja bastante útil pra vocês e na semana que vem eu posto o 4º e último da série: medição, atualização e pós-venda. Até lá!

Abraços!