Como realmente desenvolver um site

Todo mundo precisa de um site. Que tal criar um você mesmo? Com HTML5, CSS3 e JavaScript você pode criar sozinho um site profissional!

Esta é minha primeira postagem no Medium, e levando em conta que não tenho muita experiência escrevendo artigos ou a minha pouca experiência profissional, irei relatar apenas os meus conhecimentos atuais, que da mesma forma que me ajudaram, acredito que podem ajudar muitas pessoas.

Anos atrás, o desenvolvimento de sites era um trabalho simples e, se olharmos para o passado, fácil de ser realizado. Páginas na web que eram estilizadas a partir do próprio HTML, hoje temos em mente que isso é errôneo. Temos nas nossas mãos hoje linguagens de estilos, como CSS3, Sass. A medida que a web evolui, mais ferramentas nós abrangemos para poder melhorar as nossas páginas, e nem sempre essas ferramentas se tratam de linguagens para desenvolvimento web. Na verdade, digitar os códigos no editor de texto é um pequeno passo comparado a todo o processo de desenvolvimento.

Então… Como desenvolver um site?

Fazer um site, quando você está iniciando seus estudos nessa área, pode parece algo simples. Começando pelo HTML5, estruturando todas as página. Criando um menu, uma área de conteúdo e um footer. O mais básico possível. Depois estilizando com o CSS3, por exemplo e por fim, alguns toques finais com JavaScript, talvez. Pronto! Simples, não é mesmo?
Se o trabalho fosse simples assim como já foi um dia, não poderíamos dizer que houve evolução no que diz respeito ao desenvolvimento de sites. A parte de fazer é a parte simples, isso qualquer um pode fazer facilmente, mas hoje devemos pensar além de apenas estruturar a página, porque além do cliente para quem está sendo desenvolvido o site, mais pessoas irão acessá-lo futuramente, e ele precisa parecer bom para que o público olhe e queira voltar nele posteriormente.

Antigamente, na maioria dos casos, era uma única pessoa pra desenvolver um único site, ou seja, apenas um envolvido neste processo. Não exigia de muitas pessoas porque não havia a mesma preocupação que existe hoje. Agora, temos a preocupação do que cada elemento no site afetará na visão do público.

Certo, então como criar um site? Eu sigo seis etapas de desenvolvimento que me ajudaram muito nos projetos realizados por mim até agora.

• 1. Briefing
• 2. Planejamento
• 3. Design
• 4. Informação
• 5. Desenvolvimento
• 6. Testes

Você acaba de receber um briefing com tudo explicado sobre como deverá ser o site. Se você é novo no assunto e ainda não sabe o que é briefing, em uma breve explicação, é uma reunião de informações de algum projeto que você realizará, consistindo em responder questões vitais para o desenvolvimento o seu desenvolvimento. Vale a pena pesquisar mais sobre o assunto. Após ler o briefing do seu cliente, o primeiro passo é fechar o editor de códigos. Você NUNCA deve começar o desenvolvimento pelo o código. Antes disso, você pensar na estrutura dele para depois começar a codifica-lo.

Defina todas as informações possíveis que o site que você está criando vai ter. Quais softwares e linguagens você irá utilizar para desenvolve-lo? Quantas e quais páginas ele irá ter? E talvez, uma das perguntas mais importantes que você deve responder: qual o objetivo dele?

Definido todas as especificações, vamos começar a imaginar e riscar como ele vai ser. Pense antes de criar. Pegue uma papel branco em sua casa, faça um retângulo, como se fosse o monitor do seu computador, e rabisque como seria a estrutura dele. Isso nós chamamos de wireframe. O wireframe se trata de um rascunho em que você desenha o protótipo de como será a página que você está prestes a criar.

Um exemplo de wireframe. Note que ele não precisa ser bonito nessa etapa, pois é apenas um rascunho.

É claro que hoje, nós disponibilizamos de ferramentas digitais (pagas e gratuítas) para criar um wireframe. Softwares como o Adobe Experience Design, Sketch ou sites como MockFlow ou o Mockingbird ajudam muito a criar wireframes. O Adobe Photoshop também é muito utilizado para criação de wireframes, apesar de não ser focado nisso.

O cuidado essencial no desenvolvimento do layout é ter em mente o porque de cada coisa. Por que o menu é fixo? Por que o botão é azul? Por que estou usando essa fonte? Você não deve pensar em como você vai achar o site bonito, mas deve pensar em como o cliente irá se sentir quando ele abrir o site em casa. As informações devem ser passadas de forma clara e evidente para ele, pois a vantagem da internet é passar informações de forma simples e clara, e é isso que você deve fazer quando está desenvolvendo um site.

Aqui nós encontramos dois profissionais que cuidam bem dessas situações: o UI (User Interface) e o UX (User Experience) designer. Seus trabalhos são diferentes, mas voltados para uma mesma situação. Ambos devem colaborar juntos para que o site em desenvolvimento seja atraente para quem for acessá-lo.
O UI designer vai cuidar da parte visual, desenvolvendo o layout, enquanto o UX designer irá cuidar da usabilidade do site.

Uma parte óbvia, mas que também vale mencionar, é quanto a reunião de informações que estarão disponibilizadas no seu site. Definir como as coisas estarão escritas, visando se para o usuário que entrará no seu site, as informações serão passadas da maneira correta e que o faça entender de forma clara. Se você contar uma piada e depois ter que explicar ela, sua piada falhou. É a mesma coisa com as informações do seu site. Se o usuário ler e mesmo assim você ter que explica-la para ele, é porque há algo de errado aí.

Tudo bem até aí? Pois bem, agora você pode abrir seu editor de códigos novamente. Escolha o que mais te agrada. Nessa parte, já não há muito segredo. Você definiu tudo o que o site precisa ter, não vai ter que ficar pensando enquanto estiver digitando os códigos.

As últimas etapas de desenvolvimento podem ser as mais chatas, mas não deixam de ser importantes. É a hora de fazer alguns testes antes da publicação oficial. Teste o seu site em vários navegadores, tanto no computador quando no celular, para ver como está o estilo responsivo dele. Clique em tudo, mexa em tudo, veja se está tudo funcionando conforme o planejado. Peça para alguns amigos entrarem no seu site e darem um feedback sobre ele. Tanto amigos que não entendem de web design quanto amigos que entendem. Críticas são muito importantes.

Agora sim, você seguiu todos esses passos, seu site está brilhando e implorando para ser publicado. Terminamos a última etapa. Você ainda pode melhorá-lo com constantes manutenções e verificações de bugs, e utilizando SEO (Search Engine Optimization) para aumentar os resultados de busca.

Obrigado a você que chegou até aqui. Sinta-se livre para se expressar nos comentários, dar um feedback ou corrigir algo que eu possa ter falado errado. Lembrando que essa é a forma com a qual hoje eu desenvolvo sites e uma das diversas formas de se criar um. Isso pode variar de pessoa em pessoa, e você que está lendo isso, pode utilizar métodos completamente diferentes do meu e ter resultados tão bons quanto.