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á   Para manter nosso foco no objetivo deste post, não usaremos um framework front-end. Apenas HTML estático. 100% gratuito.  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.    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. 1 cor primária    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.  As cores secundárias  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   , sugiro usar: serious    : Use a fonte CSS tailwind padrão. Você não terá que configurar nada. Fonte    : Não use o raio da borda. Botões quadrados e caixas emitem vibrações sérias. Raio da borda    : para sua cor primária, azuis escuros, verdes, cinzas e roxos são ótimas opções.  Cor  Se você escolheu   , sugiro usar: diversão    : Tailwind Default ou  Fonte Outfit    : use um raio de borda médio a grande. Escolha 1 embora. Não misture diferentes tamanhos de raio de borda. Mantenha-o consistente. Raio da borda    Para sua cor primária, você tem muitas opções. Eu sugeriria uma cor mais clara e vibrante.  Cor:  Use 1 fonte para seu aplicativo. É muito difícil encontrar várias fontes que se complementam, especialmente se você é péssimo em design.  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.   é 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. Heroicons  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

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

About Author

COMENTARIOS

Rótulos

ESTE ARTIGO FOI APRESENTADO EM

Related Stories

Telegram: a ponte da Crypto Island para o continente

Navegando pelas águas: desenvolvendo aplicações RAG de nível de produção com data lakes

Quer ganhar um concurso de redação do HackerNoon? Aqui está o que os vencedores do concurso #crypto-api recomendam

Liberando o poder da IA. Uma revisão sistemática de técnicas de ponta: resumo e introdução

Telegram: a ponte da Crypto Island para o continente

Navegando pelas águas: desenvolvendo aplicações RAG de nível de produção com data lakes

Quer ganhar um concurso de redação do HackerNoon? Aqui está o que os vencedores do concurso #crypto-api recomendam

Liberando o poder da IA. Uma revisão sistemática de técnicas de ponta: resumo e introdução

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps