Vamos começar hoje uma série de posts para quem, assim como eu, começou na publicidade e dentro da criação foi guiado a seguir o nobre caminho do UX/UI e do Front-End.
Escolhi para este primeiro post um passo a passo de como tirar seu projeto do papel da forma mais otimizada e prática que eu conheço, juntamente com alguns comentários sobre como deixar aquela etapa do processo ainda mais fácil.
Verifique suas necessidades.
O primeiro passo é identificar as necessidades do seu projeto, como por exemplo:
- Ele precisa ser administrável? (Requer o uso de uma ferramenta de CMS)
- O que é seu projeto? Um site, um web app, uma intranet, um e-commerce?
- Quais serão as principais funcionalidades do seu projeto?
Escolha seus frameworks.
Uma vez que as necessidades do seu projeto foram listadas, precisamos escolher quais os frameworks que melhor se adaptam as suas necessidades, tanto no quesito front-end quanto back-end (se necessário).
Otimize o trabalho.
Essa etapa é opcional, indico apenas para quem já é um pouco mais avançado. Entra aqui sistemas de gerenciamento de pacotes, compiladores css, etc… que otimizam bastante o trabalho e o código do desenvolvedor.
Adicione conteúdo.
Com as necessidades estabelecidas, frameworks escolhidos e projeto iniciado, agora vem a parte que vocês já sabem bem como fazer: codificar! Minha dica nesse ponto, para quem ainda não faz isso, começe com o conteúdo como estrutura.
Se no design costuma-se falar em mobile first, eu diria que no front-end deveria ser content first, mas vamos nos aprofundar mais sobre isso em outra ocasião.
Teste o seu projeto.
Nesse ponto já temos todo nosso conteúdo estruturado, funcionalidades implementadas e css compilado. Agora vem a fase final: os testes.
Novamente, existem várias opções de testes automáticos, mas são muito avançados e foge do objetivo deste artigo, então vamos abordar os testes manuais.
O principal teste de um bom front-end tem que ser o teste mobile. O Chrome oferece uma ótima ferramenta para os desenvolvedores chamada DevTools, aonde temos uma variedade de presets com o tamanho dos principais celulares e tablets do mercado.
Ótimo, seu projeto está perfeito no mobile, agora vem o pesadelo dos fronts (na minha opnião), o cross-browser. Testar seu projeto nos browsers de maior fatia de mercado é uma tarefa penosa, pois temos aí pelo menos, 3 browsers principais, em pelo menos 3 versões cada, em 3 sistemas operacionais. O que eu indico para facilitar o trabalho é ter uma máquina virtual com pelo menos um sistema operacional diferente do seu e uma versão do IE9 em alguma dessas máquinas e a última versão do chrome, firefox e safari também.
Obviamente que esses testes devem ser pensados dentro do orçamento do seu cliente, afinal não é viavel um teste cross-browser para um projeto que tem os centavos contados. Mas para que não fique chocado com essa minha afirmação, tenha em mente que nos dias de hoje, menos de 60% do sites da internet são responsivos, imagine então a porcentagem de sites que passam por esse tipo de teste ?
Conclusão
Com isso você acaba de ver um passo a passo de como tirar um web project do papel da melhor e mais otimizada forma. Semana que vem, vamos colocar a mão na massa e tirar um projeto do papel juntos, passo a passo.
Por favor, deixem nos comentários se preferem este guia em vídeo, texto ou os dois. Até semana que vem!