Como fazer um site bonito, mesmo que você não saiba criar

Isso soa familiar - você tem uma ótima ideia, constrói essa ideia, começa a olhar para o resultado final e pensa... Isso parece terrível.

E o pior, você não sabe como consertar. Afinal, somos desenvolvedores, não designers.

Felizmente, você não precisa ser um designer incrível. Você só precisa ser engenhoso e entender algumas dicas simples de design. A internet está cheia de ferramentas e recursos gratuitos para complementar sua falta de habilidades de design.

Vou mostrar como aproveitar esses recursos para criar algo do qual você possa se orgulhar.

Este guia abordará as ferramentas, técnicas e recursos que uso para criar sites. Não é o fim de tudo, mas é uma ótima diretriz para pessoas que lutam com design. Vamos construir um aplicativo chamado DesignDo. Será uma coleção de dicas e recursos de design (tão meta!). Tudo o que usarmos será 100% gratuito. Para manter nosso foco no objetivo deste post, não usaremos um framework front-end. Apenas HTML estático.

Planejamento

Use uma estrutura CSS

Você já jogou boliche com alguém que é péssimo nisso? Eles colocaram aqueles pára-choques na pista para não poderem jogar uma bola na sarjeta? A estrutura CSS é o seu pára-choque. É quase impossível jogar uma “bola de sarjeta” com eles. Eles lhe darão um ótimo ponto de partida e também fornecerão as restrições que um desenvolvedor que luta com o design precisa.

Eu recomendaria Tailwind CSS. Ele usa classes que são abstrações de propriedades CSS. Ele serve como rodinhas de treinamento para aprender CSS, além de facilitar a criação de sites atraentes com ele. Leia os documentos aqui .

Além disso, se você não estiver usando uma estrutura de front-end como React ou Vue, sugiro usar alpine js. É ótimo para mudanças simples na interface do usuário, como transformar sua navegação em um menu de hambúrguer quando estiver em dispositivos móveis.

cores

Mantenha simples.

Use um fundo branco e texto preto ou cinza escuro. Se você tiver texto em preto em uma área com uma cor de fundo mais escura, como um botão, altere-o para branco.

1 cor primária para o seu logotipo e botões de chamada para ação. Use-o com moderação para coisas que você deseja “se destacar” em seu design.

As cores secundárias devem ser claras para destacar os cartões do fundo branco. A maneira mais simples é usar apenas vários cinzas claros para isso. Eles vão com tudo.

Determine a personalidade do seu site

Cada site tem uma personalidade. Eles podem ser sérios e profissionais. Eles também podem ser divertidos e despreocupados. Descubra o que você quer que seja a personalidade do seu site. Isso determinará algumas propriedades CSS que você usará. Entender? Bom.

Agora, se você escolheu serious , sugiro usar:

• Fonte : Use a fonte CSS tailwind padrão. Você não terá que configurar nada.
• Raio da borda : Não use o raio da borda. Botões quadrados e caixas emitem vibrações sérias.
• Cor : para sua cor primária, azuis escuros, verdes, cinzas e roxos são ótimas opções.

Se você escolheu diversão , sugiro usar:

• Fonte : Tailwind Default ou Outfit
• Raio da borda : use um raio de borda médio a grande. Escolha 1 embora. Não misture diferentes tamanhos de raio de borda. Mantenha-o consistente.
• Cor: Para sua cor primária, você tem muitas opções. Eu sugeriria uma cor mais clara e vibrante.

Encontre inspiração

Tudo bem, então você tem uma ideia da personalidade que seu site terá. Agora vá encontrar alguma inspiração para despertar sua criatividade. NÃO COPIE o design de alguém para o T ou seu código. Use-o como sua estrela do norte.

Sites de inspiração para web design

• https://land-book.com/
• https://www.awwwards.com
• https://www.siteinspire.com/
• https://dribbble.com/

Minhas escolhas

DesignDo será um site divertido/criativo. Estarei usando a fonte tailwind padrão e um grande raio de borda em botões e cartões. Também usarei violeta claro como minha cor primária.

Eu estarei usando este modelo de site como minha inspiração...

Ele tem uma boa seção de heróis onde posso colocar uma cópia sobre o que é meu site e uma lista vertical, da qual precisarei listar minhas dicas e recursos de design.

Trabalhe de forma mais inteligente, não mais difícil

Parte de melhorar em desenvolvimento e design é engolir seu ego. Você não é um desenvolvedor melhor porque cria tudo do zero. Você é apenas um desenvolvedor lento. O mesmo vale para a construção de seu site.

Encontre componentes ou temas gratuitos

Eu nunca começo meu HTML do zero. Eu sempre começo com alguns componentes pré-construídos e vou a partir daí.

Iríamos usar uma ótima opção gratuita, Wicked Blocks .

Usando meu site de inspiração para me guiar, escolhi os seguintes blocos para usar.

Meu Cabeçalho

Herói

Abaixo está o conteúdo da dobra:

Rodapé

Junte seus blocos em HTML

Antes de começarmos a customizar nosso site, vamos juntar nossos blocos em HTML.

É um bom começo, mas ainda temos algum trabalho antes que o DesignDo esteja onde queremos.

Logotipo

Mais uma vez, mantenha-o simples!

Eu costumo usar um logotipo baseado em texto para meus sites. O nome do meu site é DesignDo, então é assim que meu logotipo será. Normalmente, usarei a cor primária como plano de fundo e usarei texto em branco ou preto. A cor do texto tem tudo a ver com legibilidade. Portanto, se o texto em branco for difícil de ler sobre sua cor primária, use texto em preto e vice-versa.

Você pode criar seu logotipo escrevendo HTML ou usando um editor de imagens.

Se você decidir usar um editor de imagens, recomendo o Photopea .

É uma imitação do photoshop, é grátis e é incrível! Você também pode fazer upload de suas próprias fontes para texto.

Para o logotipo DesignDo, usarei apenas o nome como texto com fonte em negrito extra. O fundo será minha cor primária.

Também estou adicionando uma ligeira rotação ao logotipo para dar a ele um pouco mais de personalidade. (Não faça isso se quiser um design mais sério.

Links de navegação

Não deve haver muito a ver com links de navegação. Certifique-se de que o texto esteja cinza ou preto. Se você quiser adicionar ícones junto com o texto, você pode. Heroicons é uma ótima biblioteca de ícones gratuita que eu uso o tempo todo. Eu sugeriria usar isso se você estiver fazendo um site mais sério.

Você também pode usar Heroicons para um site divertido/criativo. Também gosto de usar emojis como ícones se a personalidade do meu site for divertida e criativa.

Para DesignDo, só tenho 1 link de navegação e usarei o emoji de fogo para chamar mais atenção.

Herói

Como usamos Wickedblocks para nos dar uma vantagem, a seção de heróis não tem muito o que fazer.

Só precisamos atualizar algum texto. Ao lidar com tags de título grandes como a nossa, estruture-as de forma que a primeira linha seja mais longa que a segunda. É mais atraente aos olhos.

Também precisamos atualizar a cor do nosso botão Notifique-me para nossa cor primária

Contente

Mais uma vez, não estamos muito longe de como queremos que nosso conteúdo abaixo da dobra seja exibido.

Não estou sentindo os ícones. Eles não combinam com a personalidade do site. Então, vou procurar Heroicons para obter algo mais alinhado com o nosso tema.

Isso é melhor! Vou deixar o plano de fundo dos ícones sozinho, pois é um cinza claro e é um bom contraste com nosso ícone escuro e fundo branco. Ele também é arredondado para seguir nosso tema de grandes raios de borda.

O “título curto” é um H2, mas está usando os mesmos estilos da descrição abaixo dele. Queremos que o título da dica se destaque e chame a atenção do leitor. Vou aumentar um pouco o tamanho e o peso da fonte (não queremos que ela seja maior que a tag H1 acima dela).

Por fim, atualizaremos o texto padronizado que veio dos blocos perversos com nossas próprias dicas de design!

Resumo

Muitas pessoas defendem o uso de seu próprio CSS feito à mão e o uso de ferramentas de design como o Figma para criar maquetes. Concordo, ambos são grandes coisas. Mas a verdade é que, como desenvolvedor, não tenho tempo para me tornar um especialista em Figma ou para escrever minha própria biblioteca CSS personalizada que possa levar de projeto para projeto.

Mas posso ser engenhoso e usar ferramentas e recursos gratuitos na Internet para criar designs bonitos em um ritmo acelerado.

Se você quiser conferir o projeto que criei neste post, siga estes links:

Você pode encontrar o DesignDo aqui .

O repo para este projeto está aqui .

Se você gostou deste artigo, sinta-se à vontade para se juntar à minha newsletter @ https://thefreelancedev.com

Publicado também aqui .