netoguimaraes' blog


Design para devs #1 - Introdução

Mais um post da série design para desenvolvedores.

Essa série de posts tem como propósito facilitar o entendimento de alguns conceitos de design para os desenvolvedores frontend. Neste primeiro, daremos apenas um introdução generalista e simplista.

Não sou o melhor designer do mundo e estou longe de ser bom, mas nos últimos tempos tenho dedicado boa parte do meu tempo livre a entender como melhorar visualmente minhas criações. Em geral, trabalho apenas com implementação, mas sempre me interessei em entender como são pensadas as interfaces e porque são do jeito que são. Acabei por perceber que existe muita exatidão por trás da criatividade.

É comum de todo desenvolvedor frontend começar a querer desenvolver seus próprios projetos, seja pra treinar suas habilidades ou pra colocar pra frente ideias reais. Mas sempre surge o dilema: criar do zero interfaces não requer apenas codificação, é preciso também ser um bom designer. No mínimo, não usar Comic Sans. Eu segui esse caminho (frontend->design) e aprendi algumas coisas. Inicialmente, percebi que uma coisa muito clara: é muito mais fácil virar frontender sendo designer do que fazer o caminho inverso. A área de design requer muito mais apuração de senso crítico para um resultado minimamente interessante. Minha experiência tem sido interessante e rendido bons frutos. Aqui vão algumas dicas introdutórias sobre o que aprendi.

Entenda o que é Design.

“Design é beleza”. Não, não é. E isso no começo é difícil de entender. Implementar um interface bonita é importante sim, mas se a beleza não for útil, ela pode ser descartada. O papel do design não é tornar as coisas simplemente bonitas, mas torná-las funcionais. A beleza é a consequência e não a causa. Desenvolva sempre suas ideias com base em seu conteúdo, adaptar o conteúdo para ele “caber” no design é um caminho que quase sempre gera resultados ruins.

Conceitos básicos: cores e tipografia.

Esses são conceitos básicos que se tem que estudar antes de qualquer coisa: as cores e a tipografia constituem quase que 100% de um design na web.

Entender sobre Teoria das Cores, discos cromáticos e suas utilidades para a web é de suma importância para desenvolvimento de uma percepção visual mais lúcida. Criação de paletas de cores e entendimento de seus significados é essencial também. Este guia é uma mão na roda pra quem não tem ideia de nada.

Como André Rafael, do Origamid, diz: tipografia é 95% da web, entendê-la e fazer bom uso de seus conceitos significa ter domínio sobre boa parte do seu conteúdo. Conhecer as famílias tipográficas, seus usos mais comuns e recomendados, saber quando usar bolds, italics e underlines e também entender sobre seus tamanhos e kernings. Este curso possui o primeiro módulo free e é muito esclarecedor para iniciantes.

Pense no design de tudo

Criar interfaces, componentes ou mesmo temas pra wordpress não requerem apenas habilidades específicas de webdesign, mas sim habilidades genéricas de design gráfico, experiência de usuário e às vezes até de design de produto, portanto, pensar no design de tudo é um exercício muito bom para aprimorar as skills.

E quando eu digo tudo, não é apenas tudo referente ao seu projeto em si, mas sobre a vida e as coisas que te cercam. Comece a pensar na forma em que você organiza sua comida no prato quando almoça, na forma que veste suas calças ao sair de manhã, na forma como digita suas frases num texto e obviamente, como essas frases ficarão dispostas no seu blog. Pensar no design de tudo é um exercício simples de ser feito e que abre os horizontes de formas inimagináveis, pois se você conseguir entender qual a melhor forma de de dobrar sua calça ou de organizar sua comida no prato, organizar os posts do seu layout de blog se tornará mais simples.

Tenha boas referências na manga - inclusive dos frameworks

Usar um framework não é pecado, mas saber quando não usar um é uma dádiva dos deuses. Frameworks de CSS geralmente funcionam assim: eles te dão helpers, grids e em alguns casos, mixins e extends para facilitar sua vida. Também te dão componentes prontos, onde você só precisa adicionar as classes nas suas tags e pronto: a mágica acontece. O que não se entende no começo é que os frameworks acabam por gerar um styleguide padrão para o desenvolvedor. E nem sempre é bom. Frameworks como o Miligram ou o Semantic UI, são exemplos de ferramentas que se preocupam mais com as funcionalidades e semântica do que com oferecer estilos definitivos prontos.

Frameworks como Bootstrap ou Foundatoin são interessantes para desenvolvimento ágil, mas sua personalização é essencial. Recomendo usá-los como referência e não como ferramenta principal. Como sempre digo, o mais indicado é criar um framework para cada projeto, com styleguide próprio e se possível, com uso do atomic design.

No geral, além dos frameworks, o CodePen e o Awwwards são boas referências para se ter na manga no quesito de webdesign. Outras referências que pode ser interessante ter é de outra área que seja correlata ao design, por exemplo: fotografia ou moda. Mas aí vai do seu gosto.

Este texto tem como objetivo introduzir desenvolvedores à alguns conceitos de design, nos próximos textos da série, explorarei aspectos mais práticos e mais específicos. Até lá!