Dicas simples de design da web para bons resultados

Existem infinitas maneiras de criar um site. Com isso em mente, também existem maneiras infinitas de bagunçar tudo. Existem dois métodos principais para evitar cair na segunda categoria - aprender os fundamentos do design e aplicá-los de acordo. Você também precisa ter experiência suficiente para aprender o que funciona bem e o que não funciona.

Todos os designers seguem diferentes caminhos de aprendizagem e frequentemente estão em diferentes estágios de sua jornada. Se você está lendo isso, com sorte, você também está tentando melhorar ainda mais seu trabalho e produzir designs melhores.

Infelizmente, não há como encaixar todo o conhecimento necessário em 1.500 palavras. Em vez disso, direcionaremos apenas algumas dicas para fazê-lo repensar como você pode abordar os elementos de UX / UI. Idealmente, essa forma de pensar também pode ser aplicada a outras áreas de seu trabalho de design.

Comece com uma boa compreensão do produto / local

É extremamente difícil fazer design quando você não entende totalmente o conteúdo / site. Agora, você não precisa estudar medicina para fazer um site médico, esse não é o objetivo. No entanto, você deve saber exatamente como um usuário acessaria qualquer uma das informações que ele / ela possa exigir.

Se você quiser criar um aplicativo de música, primeiro você deve pegar alguns dos existentes, brincar com eles para ter uma ideia, ler sobre a teoria por trás disso e como certos elementos funcionam.

O ideal é que você trabalhe com seu cliente, que também deve estar muito envolvido no projeto e deseja ajudá-lo a implementar uma UX melhor para seus usuários.

No entanto, se você não tiver um entendimento fundamental do que é o site e quais problemas ele resolve, você pode prejudicar a experiência do usuário ou forçar-se a seguir as soluções existentes e apenas reformulá-las (o que às vezes funciona).

Para sites, você deve ter o mapa do site à sua frente para trabalhar na navegação adequada e tomar decisões sobre quais elementos seriam adequados para determinadas páginas de destino. Se você fizer um design de “fábrica de chocolate”, poderá apresentar visualmente o processo de fabricação ou fazer um despejo de informações. Tudo depende dos objetivos do site.

Todas essas informações são necessárias de antemão para ter uma taxa de sucesso maior. Considerando o quão complicado isso é, isso pode acontecer com você se você for um designer freelance iniciante, então é melhor fazer muitas perguntas desde o início. Se você trabalha em equipe, não se esqueça de consultar os membros da equipe sobre conteúdo, experiência do usuário, objetivo e muito mais.

Dicas e truques específicos de design:

Agora, vamos ver algumas dicas específicas de UI / UX que você pode utilizar em seu próximo design:

1 - Contraste!

É tão fácil bagunçar o contraste em um site. Uma maneira rápida de identificar um designer menos experiente seria verificar o contraste geral. Veja este exemplo:

Fonte

Veja como o texto está claro em todos os lugares? Os botões verdes com texto branco, o texto cinza claro ?. Vamos compará-lo a uma IU mais contrastante:

Fonte

Uma grande parte da fonte é preta (ou quase preta) com informações menos importantes um pouco mais acinzentadas. O verde é mais escuro, o que agora permite texto branco na parte superior.

A dica aqui é - quando você trabalhar com texto, comece com Preto no branco ou branco no preto. Conforme você adiciona mais elementos e precisa separar com hierarquia visual, tente primeiro colocar em negrito ou alterar o tamanho da fonte. Só depois disso, se não funcionar, vá com mudanças de cor, mas idealmente não mais que 30-40% de diferença (geralmente a opacidade é definida para 70%).

2 - Espaço em branco consistente

Outro erro comum seria ter espaçamento inconsistente em torno dos elementos. Na verdade, é tão comum que a maioria dos designers continua lutando contra isso após anos de trabalho e é bastante compreensível - movemos as caixas com o mouse. É fácil escorregar um pouco e movê-lo um ou dois pixels para o lado. Ou você pode não ter treinado bem o seu olho ainda para detectar essa diferença diretamente.

No exemplo a seguir, observe como os diferentes componentes têm diferentes espaços em branco ao seu redor. Alguns estão desordenados, alguns são muito espaçados. Não parece muito coerente visualmente.

Em contraste, aqui está um exemplo com quantidade mais ou menos semelhante de conteúdo / tipo de componentes, mas com uma aparência mais consistente:

Fonte

Existem várias maneiras de fazer isso, mas na maioria das vezes não funciona apenas com medição. Muitas vezes é uma “sensação” quando você olha para ele. Parece equilibrado? Se você tiver caixas, você sempre pode medir algo como 30px das laterais, 30px sob o título, 15px sob o subtítulo etc. E é uma boa abordagem! Mas com elementos visuais maiores, como títulos ou imagens, você pode querer aumentar um pouco para compensar o elemento mais pesado.

3 - Cor

Outro componente fundamental de um bom design. As cores devem funcionar bem juntas. Uma maneira fácil de abordar sites é manter uma única cor primária e manter o resto monocromático.

O exemplo a seguir segue todas as três sugestões até agora - Bom contraste, equilíbrio e uso de cores:

Fonte

Uma maneira fácil de começar com as cores é seguir alguns esquemas de cores bem recebidos de sites como https://colorhunt.co/ ou obter inspiração do Dribbble para combinações. Trabalhar com a roda de cores é útil para descobrir as combinações, mas muitas vezes é necessário um pequeno toque adicional dos designers para descobrir as melhores combinações. Muitas vezes, as rodas de cores não produzem as cores perfeitas para aplicar em um design.

Exemplo da roda de cores da Adobe:

Fonte

Uma bela cor verde no meio, mas meio difícil de usar os resultados no lado esquerdo / direito.

4 - Siga um estilo em todo o site

Construir a sensação de um site é uma das principais tarefas do designer. Embora a ideia de “bonito” seja muito difícil de definir, especialmente porque as pessoas geralmente têm uma visão diferente do que é bom e do que não é. . Em vez de se preocupar com isso, concentre-se na consistência e mantenha o estilo.

O que isso significa? Bem, vamos criar um botão. Definimos o tamanho da fonte, a fonte, a cor, o plano de fundo, o espaçamento etc. E obtemos algo assim:

Agora, se quisermos adicionar uma imagem e um título, podemos conseguir algo assim, talvez:

Veja os cantos. Todas as curvas perfeitas de 90 graus, sem arredondamento. Agora, isso significa que nosso design seguirá principalmente cantos agudos. E parece mais consistente se a imagem também tiver esses cantos perfeitos. Assim como se adicionarmos entradas, todos eles terão esses cantos mais nítidos também. Vamos adicionar mais um elemento:

Adicionamos uma grade de caixas nos cantos superior direito e inferior esquerdo. Eles poderiam ser círculos, mas para manter a aparência nítida, nós os configuramos como quadrados. O mesmo pensamento deve ser mantido em todo o site. Se você começar a mudar os elementos, pode começar a perder a sensação, o que por sua vez resultaria em um design inconsistente e enfraqueceria a marca.

Aqui está o mesmo design de cima, mas com aparência arredondada:

É o mesmo, mas parece muito diferente agora.

5 - Projeto com componentes

Existem componentes em todas as ferramentas de design moderno, como Figma e Adobe XD. Eles estão aí por um bom motivo - os desenvolvedores implementam sites de uma forma que possam ser reutilizados tanto quanto possível.

Se você fizer um elemento como o acima, você deseja apenas “copiar e colar” em outra página e ele simplesmente funcionará. Não há necessidade de codificá-lo novamente com pequenas diferenças. Como designer, idealmente você desejaria reutilizar seus componentes de maneira semelhante.

Se você fizer uma página inicial com 3 postagens consecutivas, talvez você possa simplesmente reutilizar a mesma postagem da página inicial. Isso economiza tempo, economiza tempo do desenvolvedor e mantém o design consistente para os usuários.

Fonte

Imagine que você está fazendo um título de seção. Se você precisar ter 8 seções com um título, você o criaria todas as vezes ou copia e cola o anterior? Idealmente, você deseja reutilizá-lo. Mas e se você tiver que mudar de centralizado para alinhado à esquerda? Talvez mude um pouco o tamanho, talvez a cor? A dica é tentar e NÃO fazer isso. Tente mantê-lo como o original. Se você realmente precisa de visualizações diferentes (além da esquerda / centralizada / alinhada à direita), tente fazer apenas uma variação. Não cinco ou dez deles.

Exemplo de DevriX

Em suma:

Para obter bons resultados, você precisa de um forte entendimento dos fundamentos do design, como cor, contraste, espaço em branco, equilíbrio, hierarquia visual, ordem e muito mais. Quando você projeta com isso em mente e se concentra na usabilidade, consistência e estilo, mesmo que não seja um “WOW!” design, será sólido em todas as frentes e funcionará bem, o que muitas vezes produz melhores resultados para uma marca a longo prazo.