fundamentos de web design

Fundamentos essenciais para ser um@ web-designer melhor

Aqui estão os fundamentos que tod@ web-designer deve dominar para levar seu design visual para o próximo nível.

1: Volte para o básico com “types”

Você pode dizer muito sobre um designer, olhando para sua tipografia. Isso ocorre porque “type” é uma base fundamental para o design.

fundamentos de web design

Você pode criar desenhos inteiros com “types”. Você também pode basear os designs nos “type”, tirando filas sutis das fontes escolhidas. Para melhorar a tipografia em seus projetos, primeiro comece aprendendo o básico.

Leia mais: Recupere seu cabelo com produtos naturais

Desenvolva um vocabulário para descrever o “type”. Saiba mais sobre termos como rastreamento, kerning e lead mean e estude como aplicar a tipografia na Web.

Aprenda como juntar fontes. Um ótimo recurso para isso é FontWolf e FontPair. Ser capaz de emparelhar fontes em conjunto irá mudar drasticamente a dinâmica do seu design.

2: Use espaço para criar equilíbrio

O espaçamento ajuda a estabelecer movimentos verticais e horizontais em seus projetos. É essencial para criar hierarquia visual e formar associações entre elementos.

fundamentos de web design

Criar equilíbrio e harmonia visual

Você sempre pode procurar em sites como Behance e Dribbble para se inspirar em como espaçar elementos. Mas é importante desenvolver sua própria intuição para usar o espaço para criar equilíbrio e harmonia visual.

Leia mais: Crie seu próprio tema do WordPress

Ao estudar tipografia, você deve ter notado a importância do espaçamento no tipo. Ajustar o kerning e liderar as fontes é um ótimo exercício para desenvolver o seu olho para o espaçamento. Por esse motivo, recomendo que você experimente o KernType, um jogo em que você compara sua solução de kerning com a solução de um tipógrafo.

fundamentos de web design
Outro exercício que ajudará a desenvolver o seu olho é o seguinte: Pegue um desenho existente, desenhe um eixo x e y, simplifique o desenho em formas básicas, analise como o design é balanceado e, em seguida, reorganize os elementos. Preste muita atenção em como o espaço negativo afeta o equilíbrio dos elementos.

3: tamanho correto para estabelecer hierarquia visual

Quando se trata de criar hierarquia visual, o dimensionamento é incomparável. Usando o tamanho para transmitir relações visuais entre os elementos, você pode estabelecer o fluxo.
fundamentos de web design
O dimensionamento é uma das razões pelas quais as grades são úteis. Você pode usar grades para ajudá-lo a dimensionar elementos usando proporções para transmitir importância.

Depois de determinar um tamanho para um elemento, mantenha-o igual em todas as instâncias dele. Em design, consistência é rei.

fundamentos de web design

Use tamanho para estabelecer hierarquia visual

Aqui está um exercício que ajudará a desenvolver seu olho para o dimensionamento. A chave é pedir feedback.

Esboçar ou wireframe uma página de destino. Em seguida, peça a um amigo que olhe para o seu design. Faça com que circulem os elementos que mais se destacam. Depois, peça-lhes que numerem os elementos circulados com base no peso visual. Os resultados são o que você esperava?

Ao fazer este exercício, tenha em mente as seguintes questões:

Qual é a meta de conversão da página de destino? Como você pode otimizar para atingir seu objetivo?
Qual é a relação entre diferentes elementos? Quais elementos você quer enfatizar?
Seu layout direciona com sucesso o olho de um usuário pela página?

4: use cores para transmitir significado

A cor desempenha muitos papéis. Ela transmite significado, cria ressonância emocional e traz unidade aos projetos.

fundamentos de web design

  • Identifique o propósito do seu design antes de escolher uma paleta de cores. Um bom design alinha sua paleta de cores com sua finalidade.
  • Identifique seu público. As pessoas percebem as cores de maneira diferente. As cores têm efeitos diferentes sobre as pessoas com base em suas preferências pessoais, educação cultural e experiências.
  • Ao escolher uma paleta de cores, a simplicidade é fundamental. Escolha uma cor de fundo neutra. Em seguida, escolha uma cor de destaque primária e secundária. Por fim, com base nas outras cores, escolha um erro e cor de sucesso para os diferentes estados da interface do usuário.
  • Uma vez que você tenha uma boa compreensão dos fundamentos da teoria das cores, a cor se reduz à experimentação e à iteração. Tente sair da sua zona de conforto e experimentar novas paletas de cores.

fundamentos de web design

Aqui está um exercício que ajudará a desenvolver seu olho para a cor.
Passe tempo compilando paletas de cores para as coisas ao seu redor, como fotografias, revistas e seus programas favoritos. Em seguida, pegue um design existente e aplique novas paletas de cores.

Leia mais: Mulheres na tecnologia: por um mundo mais igualitário

Tome nota de como isso muda o humor e o tom do design. Isso muda o significado também?

Trate seu trabalho como um ofício, em que há sempre algo que você pode melhorar. Confie em si mesmo para ser a motivação para se tornar um designer melhor.