O que todos falam até certo ponto é verdade, é muito difícil parar e fazer o seu próprio site/portfólio. Você nunca está satisfeito com o resultado, sempre está querendo refazer tudo e no fim nunca termina. Eu quis evitar o óbvio e apesar de não estar 100% contente com o resultado, cumpri a meta de entregá-lo para o “cliente”, que no caso, sou eu mesmo.
Essa foi a filosofia que adotei para desenvolver o projeto e não desistir. Fazer do zero, rascunhar um briefing, detalhar o mapa do site, criar a identidade visual (logo), wireframe das áreas, layout estático e a implementação do mesmo.
Por onde começar?
É o momento mais difícil, mas sempre deu certo com clientes e terceiros. Ponha no papel tudo que tem que ser feito e o que estiver lá será o rascunho da sua lista de tarefas do projeto.
Cores, identidade visual
Nesse meio tempo, a empolgação me fez dar vida ao primeiro rascunho da identidade visual. Logo já matei dois “coelhos” numa cajadada só (pobres coelhos). Achei as cores ideais: vermelho, branco e preto. A seta é para dar o sentido de tocar, reproduzir, seguir adiante. Para mim fez um puta sentido, mas ainda não estava satisfeito (como sempre).
Eu acabei voltando várias vezes e retocando o logo, cheguei nisso:
Mais simples, e para não pirar e refazer tudo, parti para a próxima etapa. Observação: com clientes acontece coisa pior.
Rascunho e Wireframe
Hora de partir para o rascunho e wireframe das área do site, que descrevi no mapa, Home, Portfolio, Sobre e Contato. A intenção dessa etapa é posicionar os elementos sem se preocupar com a formatação e aparência deles. Um grid ajuda muito nessa hora, recomendo este, 960 Grid System.
Mão na massa e no editor também
Hora de dar vida ao wireframe. As cores e o logotipo fazem muito mais sentido agora. Quase todas as telas tiveram seus layouts desenhados, isso tudo para facilitar a vida do cara que vai codificar o front-end, no caso, eu mesmo.
Som, A, B, HTML, CSS ok?
Hora de codificar, hora de cansar o braço e “sofrer” um pouco. Mas calma lá, com o layout todo pensado vai ser muito mais confortável. Dessa forma o código flui como acordes bem treinados de uma boa música.
Design responsivo (Responsive Web Design), WordPress, HTML5, CSS3, less
Uma das minhas maiores motivações de criar esse site foi por em prática o que havia lido e estudado com o design responsivo (Responsive Web Design) e o conceito de Mobile First. Isso é, o site se ajusta conforme a resolução e dispositivo do usuário, tornando o seu uso mais fácil. O site é primeiro projetado para celulares, e depois para desktop. Pensando dessa forma fica mais fácil separar e otimizar o site para cada dispositivo. Para o CMS, utilizei novamente o WordPress, só que dessa vez com o tema framework HTML5 Bones. Esse tema é um excelente boilerplate HTML5 e totalmente otimizado para WordPress, facilitando muito a vida do desenvolvedor com seus arquivos .less (muito útil para tornar o CSS dinâmico no desenvolvimento) etc.
Vários recursos novos do CSS3 e HTML5 estão presentes no projeto com Graceful degradation (Degradação suave) para os navegadores mais antigos (IE7+).
HTML pronto, WordPress funcionando? Testes e mais testes
Codificado e funcionando no WordPress, hora dos incansavéis testes em navegadores, resoluções, dispositivos, celulares, sistemas operacionais, ufa…
Mobile ok!
Conteúdo e publicação
Com os testes realizados e ajustes feitos (muitos como sempre para o Internet Explorer), chega a hora de alimentar o site e finalmente o publicá-lo. Muito do atual conteúdo é do antigo site, e o portfolio está sendo alimentado aos poucos, tenho diversos projetos, cases, que nunca foram divulgados e logo logo estarão por lá. Prometo!
Conclusão
Estou satisfeito de ter atingido o meu objetivo, criar um novo site com todos os processos normais que um cliente teria, mesmo que ainda não tenha sido perfeito ou esteja inacabado (muito do conteúdo ainda precisa ser revisado, alguns ajustes etc). Antes desistiria no meio do processo, só por se tratar de um site pessoal, ou correria para entregar qualquer coisa.
Casa de ferreiro, espeto de pau, aqui não.
Tecnologias e ferramentas utilizadas:
- HTML5
- CSS3
- Responsive Web Design
- Mobile First
- Sublime Text 2
- LESS e Less Compiler
- Codekit
- Bones Theme WordPress Responsive
- WordPress
- PHP
Tem algum mensagem, crítica ou sugestão? Seu comentário é bem vindo.
Comentários