Design para devs: conceitos que mudam layout | guia prático
Conceitos de um livro que mudaram como um dev/web designer cria no Figma: criatividade, modernidade e layouts que não parecem template genérico
Resposta direta
Dev que também designa ganha ao estudar princípios — não só atalhos de ferramenta. Bom, se você é um designer ou é um web designer, é muito interessante que você aprenda Figma, porque você vai criar as suas telas aqui no Figma para um desenvolvedor desenvolvê-las, ou então você mesmo desenvolvê-las, né? Se você está pegando um projeto freelancer de um cliente, o cliente quer que você crie uma.
O que o livro deslocou na cabeça
E esses conceitos mudaram os projetos que eu criava, eu comecei a fazer layouts muito mais incríveis, criar projetos, sabe, que a pessoa olha e fala, nossa, que design moderno, algo parece mais único, não é parecido com os sites que a gente tem atualmente, que são sem graça, então, designs mais incríveis. Antes de eu passar para vocês isso que eu aprendi no livro sobre criatividade e tudo mais, não quer dizer que você não precisa saber sobre design visual e experiência de usuário. Você precisa ter a base, esses conhecimentos técnicos, e aí você vai juntar com essas dicas que eu vou dar para você sobre a criatividade. Por exemplo, em uma landing page, pode ser que seja comprar um curso, agendar uma consulta, se for um site.
Por exemplo, se você vai fazer um site que tem a ver com comidas vegetarianas, você saber utilizar tons de verde, só que não só jogar um verdão de plano de fundo, que é claro que não vai ficar bom, mas precisa ter detalhes verdes. Então, para você realmente conseguir criar uma paleta de cores que funcione, que vai ter uma cor primária, uma cor secundária, uma cor para chamada de ação, para os botões. Uma página dark não é só você jogar um preto de plano de fundo, a gente nunca usa preto 100% e nem branco 100%. Primeiro ele precisa ler o título principal, depois ele pode ver, por exemplo, um subtítulo, ou então já ver o botão de chamada de ação, ou às vezes se você está fazendo um site para um aplicativo, para um software, a primeira coisa que você quer que o seu usuário veja na página é o software em si, então vai ter uma imagem, um vídeo bem chamativo, e aí você precisa ir.
Ordenando o olhar daquele usuário, de forma que ele veja primeiro a informação principal, depois uma secundária, depois talvez já veja o botão de chamada de ação, para que ele execute a ação que é o objetivo daquele site, daquela página. Então, às vezes, se você colocar um pouquinho mais de espaçamento, pode ser que você, de certa forma, esteja acertando no espaçamento que seria necessário para um elemento, para uma divisão de sessão, um botão, um card. Bom, se você é um designer ou é um web designer, é muito interessante que você aprenda Figma, porque você vai criar as suas telas aqui no Figma para um desenvolvedor desenvolvê-las, ou então você mesmo desenvolvê-las, né? Qual é a primeira coisa que você faz dentro do Figma quando você vai criar um projeto?
Criatividade além de 'inventar do zero'
Vamos supor que a gente tenha uma landing page, que é o projeto mais simples que tem, que seria uma página única, e vai ter algumas seções. Tem a primeira seção do site, que é um banner mais chamativo, com o título principal, do que aquela empresa faz ou da dor que ela resolve. Se você está pegando um projeto freelancer de um cliente, o cliente quer que você crie uma landing page para a empresa dele, esse cliente, mesmo que ele não entenda muito sobre isso de site, landing page, ele vai te passar uma copy, mesmo que não seja uma copy certinha, esse texto, nesse formato, você vai colocar na seção 1. Às vezes ele pode passar um texto gigantesco, ou então um texto muito curto, e aí você como desenvolvedor, como webdesigner, você vai ajudando ele a lapidar esse texto.
O que eu faço então é assim, ó, me fala sobre a sua empresa, aí o cliente manda um testaço, e aí eu ajudo ele a lapidar. Falo, ó, então, disso daqui dá pra gente aproveitar essa parte, essa parte aqui também é importante, mas seria melhor que a gente colocasse ela, por exemplo, na parte de serviços, ou logo na parte da hero. Então a gente ajuda o cliente a lapidar essa copy, e aí vamos supor então que a gente teria uma copy aqui. Aqui ó, fiz o seguinte, criei rapidinho aqui, né, uma copy falsa, né, do site Loren Y, aqui ó, peguei um textinho falso aqui só pra gente ter como base.
Então vamos supor que na seção principal, depois de lapidar aquele material que o cliente te entregou, você chegou a um resultado mais ou menos assim. Nesse momento do esboço do wireframe, você não pensa na posição das coisas, você não pensa no design, você só pensa em inserir todas as informações necessárias para o layout aqui dentro. Não sei ainda se vai ser exatamente assim, se a imagem realmente vai ficar na direita, se o texto vai ficar assim, dessa forma não. Depoimentos, não sei se vai ser assim, se vai ter uma fotinha aqui da pessoa, não sei se vai ser os serviços em formato de card.
Leitura útil
Dev que também designa ganha ao estudar princípios — não só atalhos de ferramenta. Use o trecho acima como restrição, não como citação ornamental.
Do Figma ao layout que parece moderno
Então, se a gente der um Ctrl 0 aqui dentro do Figma, né? Você precisa pegar o máximo de informações de um layout, porque design, mesmo que não seja algo particular, design não é igual ao arte. E se ficar bom ou não para outras pessoas, isso não importa, porque é o estilo daquele artista, então ele expressa algo dele. Precisa ser algo claro, que você gosta daquilo que você faz, como é que você vai criar uma coisa que você não gosta.
Você precisa sim achar aquilo dali bonito, maneiro, só que a maioria dos usuários que forem acessar aquilo dali precisam concordar que aquilo também é bacana, senão não é válido. O cliente gosta de site minimalista, o cliente gosta de site dark, de um tom mais tecnológico, moderno. Você pega esse gosto e a partir desse gosto você vai criar realmente um design bonito que agrada a maioria dos usuários, do público, do nicho daquele cliente, que vão consumir aquele site, aquele conteúdo. Muitas vezes você pode ter aberto o Figma, você fica olhando para aquela tela e pensa o que eu faço agora?
Não vem nenhuma ideia na mente e aí você fica com aquele branco e fala, caraca, criatividade, eu acho que a pessoa já tem que nascer com aquilo. Sempre que eu tentei fazer, seja um layout, seja uma arte no Photoshop, sem pegar inspiração, me dei mal, saiu um resultado não tão bom, poderia ter sido muito melhor. Você vai fazer algumas adaptações para o seu layout de acordo com a empresa do seu cliente. Eu posso reaproveitar isso daqui, só que eu posso dar um toquezinho a mais, um charme, pegando, por exemplo, o logotipo da empresa do cliente e jogando de fundo aqui desse card com uma opacidade bem baixinha.
Erros de template que o princípio evita
Senão você vai ver inspirações aqui no Figma e você nem vai saber coisas que são bonitas ou não. Para você também, você tem a sua página no Instagram aí, você siga perfis de designers, de web designers, de desenvolvedores profissionais da área, porque aí você vai estar vendo postagens o tempo todo. Então siga o máximo de coisas que vai te trazer inspirações e às vezes quando você estiver criando o design de um cliente, às vezes só do cliente te falar que ele quer uma sessão assim assado, Você já pensa já em algo, porque você já viu muitas referências, então você já consegue, a partir dessas referências, a criar, a moldar algo novo. E aí, sempre quando eu pego alguma coisa, por exemplo, gostei dessa forma que ele fez aqui os cards, eu copio essa imagem e venho aqui no Figma e jogo.
Se eu fizer a Hero nesse estilo aqui, com esse feixe, aí você precisa saber sobre Figma também. Ou então, você pode também utilizar a inteligência artificial, você pode pedir pra ela criar um fundo mais ou menos nesse estilo aqui, com esse. Não sei se parece pra você que isso daqui é falta de criatividade, isso é plágio, mas não é assim, tá? Acredite em mim, nada é feito do zero toda arte maravilhosa que você fez ela teve alguma base essa luz aqui, você pode ter certeza que o profissional que fez isso daqui ele pegou alguma outra referência ele estudou algum tipo de neon nesse estilo, e aí as pessoas criam coisas a partir de outras quando eu peguei essa visão, eu comecei a treinar muito mais a minha criatividade, porque quanto mais você pega inspiração, mais você guarda isso também no seu cérebro e mais fácil fica para que você faça algo mais do zero, tá?
Sem ficar tão dependente assim de, pô, se eu não tiver várias inspirações aqui do lado do meu frame, eu não consigo criar nada sozinho. Isso daqui eu tinha visto há um tempo atrás, e eu pensei, caramba, como é que a gente faz essa plataforma aqui? Tanto no Figma, como quando a gente for desenvolver, como é que faz isso? Comunidade WebHub, a gente ensina tudo sobre desenvolvimento web, desde o design, experiência de usuário, Figma, Photoshop, até o desenvolvimento front-end, back-end, com inteligência artificial, e até low-code e no-code com WordPress, Elementor, JetEngine e outras ferramentas também.
Como praticar os conceitos em um projeto
Nesse vídeo eu vou falar para vocês sobre conceitos que eu adquiri, que eu descobri através de um livro. Eu vou falar depois para vocês também qual é esse livro. E mudou a minha forma de pensar, mudou o que eu achava que era criatividade, transformou os layouts que eu crio. Eu sou desenvolvedor, programador, mas além de desenvolver layouts, eu também crio eles antes no Figma.
Então, eu também sou web designer, eu sou designer, também mexo com Photoshop, Figma. E esses conceitos mudaram os projetos que eu criava, eu comecei a fazer layouts muito mais incríveis, criar projetos, sabe, que a pessoa olha e fala, nossa, que design moderno, algo parece mais único, não é parecido com os sites que a gente tem atualmente, que são sem graça, então, designs mais incríveis. Para isso, eu precisei entender de verdade o que é a criatividade, como evoluir essa criatividade, e eu vou passar tudo isso. Aqui pra vocês, meu nome é Gustavo Campelo, esse aqui é o nosso canal onde a gente fala sobre desenvolvimento web.
Depois, se você não curtir esse vídeo, se achar que ficou ruim, você pode dar um dislike sem problema, mas curta aí. A maioria do pessoal esquece de curtir e isso daí ajuda muito. Hype o vídeo também, que é uma nova função do YouTube. Se você curtir esse vídeo e achar útil, é claro.
Próximo passo
Escolha uma métrica (tempo, retries, conversão ou qualidade aceita) e rode 7 dias antes de escalar o padrão.