Quando comecei minha carreira eu fazia principalmente interfaces para os websites dos meus clientes. No entanto eu tinha que sempre contratar um desenvolvedor para terminar o trabalho, já que eu não sabia programar. Hoje, mais de 10 anos depois, esse ainda é o dilema de muitos designers.
Naquele tempo, por volta de 2005, ou você era designer ou você era programador, não existia meio termo. E a falta de entendimento entre esses dois de profissionais, fazia com que muitas vezes trabalho não fosse entregue da maneira com que o cliente aprovou.
O desenvolvedor frontend veio para preencher essa lacuna no mercado. O desenvolvedor frontend é o profissional que é especializado em escrever código HTML, CSS e Javascript, enquanto desenvolvedor backend é especializado em outras linguagens de programação como Ruby, Python, PHP entre muitas outras.
Mas mesmo com o surgimento do desenvolvedor frontend, essa é uma função que muito frequentemente é acumulada por um designer ou um desenvolvedor backend.
O Designer Frontend
Brad Frost, autor da metodologia Atomic Design, escreveu em seu blog um artigo falando sobre as características de um Designer Frontend. Traduzi os pontos principais onde ele descreve essas características:
- Entende princípios de UX e boas práticas, mas não passa seu tempo conduzindo pesquisas, criando flows ou planejando cenários;
- Tem um olhar afiado para estética, mas não passa seu tempo escolhendo tipografias, comparando paletas de cores ou criando ilustrações e ícones;
- É capaz de escrever Javascript, mas não passa seu tempo desenvolvendo uma aplicação complexa ou debugando código;
- Entende a importância do desenvolvimento backend, mas não passa seu tempo escrevendo lógica, configurando servidores ou fazendo testes, etc.
Embora essas definições variem de um profissional para outro, nós designers trazemos uma grande bagagem quando o assunto é interface e experiência do usuário. Aliando esse nosso background com a capacidade técnica de criar interfaces funcionais traz uma infinidade de novas possibilidades, como por exemplo:
- Autonomia na hora de desenvolver seus projetos;
- Entendimento das possibilidades e limitações quando projetar suas interfaces;
- Tomar decisões de design mais precisas e realistas uma vez que você tem ideia da complexidade da implementação.
Esses são apenas três de vários outros pontos positivos de um designer aprender a programar. No entanto, mesmo sabendo de todas essas vantagens, isso não significa que você deva aprender só por aprender.
Redesign do processo criativo
Quanto mais eu estudava sobre HTML, CSS e Javascript, menos eu passava meu tempo fazendo design, criando telas. Cheguei a passar mais de um ano sem nem abrir o Photoshop. Confesso que por um tempo dei uma enferrujada como designer, por outro lado aprendi muito sobre desenvolvimento.
Enquanto eu trabalhava no redesign do Choco la Design para este ano, comecei fazendo um style guide, catalogando os componentes, paleta de cores e tipografia. Depois que montei algumas telas, resolvi que era hora de começar a codar o que eu já havia feito até então.
Depois de codar alguns dos componentes e começar a prototipar, encontrei cenários em que eu não havia pensado durante o processo de design.
Levando isso para no contexto de uma empresa, certas mudanças no layout resultariam em uma nova aprovação de um stakeholder e, só então, a interface seria transformada em código.
Tendo essa primeira camada do código sendo feita durante o processo de design, simplifica e tornam mais viáveis alterações que, do contrário, seriam mais complexas. Portanto, essas alterações se tornam tarefas triviais uma vez que que no código você tem mais flexibilidade, além de poder fazer essas mudanças em escala e com o resultado final da implementação.
Em resumo…
Aprender a programar é, sem dúvidas, um excelente investimento e é uma habilidade que vai fazer o par perfeito com seus conhecimentos de UI e UX Design. Mas isso não significa que você deva aprender sem nenhum objetivo em mente.
Ferramentas como SketchApp, Adobe Xd e Figma tem funcionalidades de prototipação onde você pode explorar comportamentos muito similares à aplicativos reais. Além dessas ferramentas, o Webflow, oferece uma interface intuitiva que torna relativamente fácil o entendimento de alguns aspectos de HTML e CSS.
⭐️ ProTip: Avalie suas possibilidades, necessidades e interesses antes de dar esse passo. Apesar da infinidade de benefícios, para alguns designers, aprender a programar pode ser confuso e frustrante, então veja isso como oportunidade de expandir a sua área de atuação e não como uma regra.