Um Bom Caminho para o Designer na Programação Front End

Publicado originalmente em Codesigners.cc

Se você é designer, trabalha com design de interfaces para aplicativos ou websites e gostaria de dar um passinho a mais nesta área, aqui eu tentarei lhe mostrar o que eu entendo como um bom caminho para o designer na programação front end.

Na verdade, esse título pode gerar algumas incongruências, uma vez que o conceito de ‘programação’ vai um pouco além de só fazer algum HTML e CSS. Entretanto, para nós designers qualquer linha de código já é programação. A linha que a gente entende mais e a linha vetorial! Assim, para fins de simplificação eu vou pular a parte de explicar o que é código, o que é programação e porquê HTML e CSS puramente não são programação, e vou chamar tudo de programação ou código neste artigo.

Quando eu era mais jovem (e até hoje), eu preferia os livros que tinham figuras, e por aqui não vai ser diferente. Por isso preparei este infográfico simples logo abaixo para que você possa ir acompanhando cada um dos tópicos neste caminho rumo à programação Front End.

Comece com um bom Editor de Código

Uma coisa que precisa ficar clara já logo de cara é que, você estará na maior parte do tempo em contato com um editor de texto escrevendo linhas de código. Nessa parte nossos amigos programadores se preocuparam um pouco com design para facilitar o dia a dia deles e criaram alguns editores de código bem legais.

A sacada de usar um desses editores de código é que eles diferenciam certos tipos de código por cores, indentação e outras ferramentas visuais que nos ajudam muito na hora de nos situar em nosso código. Praticamente todos eles também possuem plugins/extensions que você pode instalar no seu editor, disponibilizadas gratuitamente pela comunidade de desenvolvedores (alguns são pagos). Eu já tive a oportunidade de testar alguns, e listo abaixo os melhores editores de código na minha opinião de designer (todos gratuitos).

• Visual Studio Code (VSCode): Pra mim é o melhor por enquanto, e por incrível que pareça é da Microsoft. Possui inúmeras extensões muito úteis e uma comunidade ativa. Precisa ter um tanto bom de memória no computador pra ele rodar lisinho (pelo menos uns 8GB, com 4GB ele dá uma engasgada), mas por enquanto é o que tenho usado ha pouco mais de um ano.
• Sublime Text: Foi um dos meus primeiros editores, bastante leve e rápido. Também possui inúmeras extensões que podem ser embutidas para dar uma incrementada nas funcionalidades.
• Atom: O atom também é bastante bom, eu tentei usar ele quando eu tinha apenas 4GB de memória no meu computador e a coisa não rolou muito bem, ficou meio pesado. Outro motivo é que tive dificuldade em utilizar algumas extensões.
• Brackets: O Brackets é legal, usei ele por algum tempo mas quando começou a dar uns probleminhas eu migrei para o VSCode. Outro motivo que me fez parar de usar o brackets é que, uma extensão que eu usava para conectar via FTP/SFTP foi descontinuada. Entretanto, acho a interface dele tão boa quando a do VSCode.

Qualquer um destes que você escolher você estará bem servido.

Mas daí, você como designer noob me pergunta “E o Dreamweaver”. Eu também utilizei o Dreamweaver nos meus primórdios de aprendizado. Cheguei a fazer vários sites utilizando o Dreamweaver só porquê ele tinha uma interface que me facilitava acessar o servidor via FTP e me mostrava as pastinhas de arquivos em tudo bem fácil de usar, na sua própria interface. Mas depois que eu aprendi a conectar no servidor via FTP utilizando algum plugin deste editores citados acima, eu basicamente abandonei o Dreamweaver.

HTML

Depois de ter um bom editor, a primeira coisa que você deve aprender é o tal do HTML. Como o objetivo aqui não é lhe dar um curso, mas sim te mostrar o caminho das pedras, recomendo que você estude o HTML, entenda a sua semântica de tags e o seu propósito inicial como linguagem de marcação de texto, e o que ele se transformou depois de tanto tempo.

Explicando de uma maneira bem sintética, o HTML faz o papel de marcação estrutural. Imagine aquela seu wireframe, sem cor nem design algum, só caixas marcando o seu layout. Agora imagine que cada caixa tem uma tipagem. Caixa do tipo botão, caixa do tipo texto, caixa do tipo imagem, caixa do tipo campo de preenchimento… pois bem, é isso que o HTML faz, lhe permite criar essas caixas através de suas tags.

CSS

Se o HTML lhe permite criar a marcação do seu layout através de tags, o CSS lhe permite dar personalidade à essas caixas. O CSS é a parte mais legal para nós designers, pois é onde adicionamos cores, tamanho, alinhamento, efeitos de animação e outras coisas que tornam o layout idêntico ao nosso layout estático que desenhamos.

O CSS possui inúmeras propriedades na qual podem ser aplicadas à um elemento html. Por exemplo, se eu crio um elemento HTML de título a seguir:

<h1 class="titulo-principal">
    Eu Sou um Título
</h1>

…com o CSS eu posso dizer que nossa ‘caixa’ título poderá ser azul, ter a fonte de tamanho 18px, ter o tipo de fonte Raleway, ter a espessura bold, e por aí vai. Adicionamos cada uma dessas características que podem ser reutilizadas posteriormente:

.titulo-principal {
    font-family: 'Raleway', sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: blue;
}

Aprenda o máximo que você puder sobre CSS, pois é aqui que sempre nos diferenciamos dos programadores que não são designers. É nesta etapa que fazemos tudo pixel-perfect, onde aplicamos aquele efeito ou estilo que muitos programadores simplesmente acham que não faz diferença. Devore CSS.

Javascript

Aqui a coisa começa a ficar mais séria e exige uma curva maior de aprendizado. O Javascript é o nome popular da linguagem de nome ECMAScript, que foi criada com a intenção de dar mais dinamismo e interação aos elementos de interface em um navegador web (client-side), sem que estes scripts de interação visual precisassem ser processados no servidor (server-side). Posteriormente foi padronizada e chamada ECMAScript.

Antes do Javascript sua própria regra de renderização de conteúdo, a maioria deles renderizava apenas HTML e CSS. Então quando um programador fazia um site, era muito provável que este site apareceria diferente em navegadores distintos e que esse site fosse bastante estático, onde todas as interações eram processadas pelo servidor.
Tentando metaforizar, é como se um navegador fosse o Corel Draw, outro o Adobe Illustrator, e outro o QuarkXpress; quando você fazia um desenho vetorial no Corel você não conseguia abrir esse desenho com a mesma qualidade no Illustrator ou QuarkXpress. O Javascript veio inicialmente como uma aposta para criar interações mais ricas em uma briga de empresas fabricantes de navegadores, e acabou se tornando uma espécie de normatização e padrão de script para client-side (navegador)… concluindo a metáfora, é como se fosse o .eps que padroniza de certa forma os arquivos de imagem vetoriais e abre em tanto no Corel, Illustrator ou QuarkXpress.

Junto com essa tentativa normatização veio uma linguagem de programação puramente interpretada pelos motores de renderização dos navegadores, assim, programadores podiam agora escrever seus códigos em javascript e ter uma maior garantia de que a maioria dos navegadores iria interpretar e renderizar tudo da mesma forma.

Trabalhar com Javascript significa que agora você não vai apenas criar ‘caixas’ estáticas HTML e aplicar estilos CSS às suas caixas. Agora você pode programar ações e criar condições para que essas ações sejam realizadas na tela. Um exemplo simples seria uma ação de clique que faz um menu lateral se abrir. Com o Javascript você pode programar algo do tipo ‘quando o botão azul for clicado (condição), abra o menu lateral (ação)‘. Daí em diante a imaginação é o limite para como você vai manipular seus elementos de tela com Javascript.

O processo de aprender o Javascript pode ser um tanto longo e frustrante pois é uma linguagem bastante extensa. Para iniciar neste mundo eu te recomendo estudar coisas básicas como variáveis, condicionais, array, loops, e também estude bastante sobre como fazer funções e disparar eventos. Por fim, se você estiver com muita dificuldade em aprender o CSS puro, estude a biblioteca JQueryque facilita bastante nossa vida na questão de sintaxe.

Pré-Processadores CSS

Depois de você ter uma boa noção dos 3 itens acima, considerando um grande domínio principalmente de HTML e CSS, você provavelmente já estará fazendo muita coisa boa. Neste momento, você pode pensar em partir para alguns incrementos sendo que um deles bem interessante seria aprender a utilizar um pré-processador de CSS.

Eu tive contato com pré-processadores apenas quando fui trabalhar em equipe no desenvolvimento de uma aplicação web. De repente estavam lá os arquivos .sass, e eu não sabia muito bem o que eram. Uma rápida pesquisa e tudo se clarificou. Os pré-processadores mais famosos são o SASS o LESS e o Stylus, e todos eles lhe permitem pensar o CSS de uma maneira modularizável e tendem a te forçar a pensar em sistemas de estilos.

Quando falo de sistemas de estilos eu digo isso de forma estrutural. Aqui, fica um pouco difícil de explicar o conceito se você ainda não sabe nem o básico de CSS, mas a idéia geral é que você possa escrever código CSS utilizando alguns conceitos de programação como variáveis, condicionais, operadores para realizar cálculos, etc. Você cria uma estrutura/sistema de estilos que evita repetição de código e lhe permite aplicar determinados estilos sempre que uma propriedade respeita determinadas condições ou hierarquia dentro do sistema de estilo.

Frameworks Javascript

Depois de aprender todos os tópicos acima você provavelmente já estará pronto para adentrar o mundo dos Frameworks Javascript. Se você estudou apenas JQuery ao invés de estudar o Javascript puro, você vai ter muito mais trabalho em utilizar algum framework. Este foi o meu caso, e se também é o seu, essa é aquela hora em que você tira a carta ‘volte 10 casas’ do baralho. Então, volte algumas casas e estude novamente o Javascript e as novidades que chegaram com a versão ES6 do Javascript.

Os Frameworks mais famosos e que valem a pena dedicar algum esforço, na minha opinião, sãoReact JS (Mantido pelo Facebook) e Vue JS. Existe ainda alguma relevância para o Angular JS que é um framework mantido pelo Google, mas eu achei o Angular muito difícil e meio que rolou um abandono da comunidade depois que lançaram a versão 2 com muitas diferenças para a versão 1.

Mas sem entrar muito em detalhes, todos estes Frameworks nos permitem trabalhar o Front End de uma maneira mais organizada, trabalhando através da criação de componentes de interface que podem possuir propriedades de interação com o servidor, alteração de dados reativa, reutilização e outras características que tornam estes frameworks o supra-sumo do desenvolvimento de interfaces interativas para aplicações web nos tempos atuais.

É como se você pudesse montar uma biblioteca de componentes de interface do seu projeto, desde um simples botão até uma tela inteira com inúmeros elementos. Cada componente possui propriedades que podem ser alimentadas, e quando alimentadas podem causar um novo efeito em um elemento próximo, e assim por diante… tudo sem a necessidade de recalcular a página inteira, e tudo realizado no client-side e não no server-side.

Tentando exemplificar, imagine que você tivesse um fogão de cozinha em código javascript feito com React JS. Esse fogão tem lá o componente carcaça, depois tem os componentes internos, as bocas, os botões de acionamento, o forno, etc. Você pode ter todos estes elementos interligados entre si, compartilhando informações de acordo com o que o cozinheiro (usuário) faz… ou seja, quando o cozinheiro gira o botão, o seu componente ‘gás’ se atualiza automaticamente e libera o gás, o seu componente ‘forno’ recebe o gás e fica aguardando o componente ‘fogo’… o usuário então adiciona o componente ‘fogo’ e uma nova corrente reativa chamada ‘Assar o Bolo’ se inicia.

A parte legal é que com esses mesmos componentes nós podemos criar outros fogões, com 4 bocas, com 10 bocas, com 2 fornos.. enfim, como quisermos, sem a necessidade de criar todos os componentes novamente para ter um novo fogão, basta apenas ‘utilizar’ os componentes já existentes e ditar as características do novo fogão. Estes componentes vão manter suas funcionalidades não importa onde você esteja reutilizando eles.

Depois de aprender algum framework Javascript você será um Front-End designer pleno e estará apto a trabalhar como um híbrido, um unicórnio do mercado que domina tanto a parte de usabilidade, prototipação e design de interfaces, mas que também manja dos paranauês de desenhar os componentes da sua interface já preparados para interagir como servidor de maneira inteligente. Isso é foda demais e acredito que designers que têm essa habilidade entendem muito melhor de projeto e possivelmente são muito melhor remunerados.

Mas não se engane, essa não é uma tarefa fácil e muito menos rápida. Exige muita dedicação e disciplina e por muitas vezes pode ser bastante frustrante. O negócio é procurar ajuda de programadores mais experientes ou mesmo de outros designers passando pela mesma situação de aprendizado para que possam compartilhar e crescer juntos.

Atualmente eu me encontro no final desta jornada, estudando com afinco o React JS, na esperança de poder futuramente criar uma didática mais amigável e compreensível para nós designers, que temos um jeito um pouco diferente de pensar e aprender coisas mais técnicas. Bora estudar que o caminho ainda é longo.