Construa sua biblioteca visual: dicas e desafios de design

Uma das grandes diferenças entre um designer experiente e um novato é a biblioteca visual que ele constrói.

O que é uma biblioteca visual?

Isso é o que você passa pela cabeça quando se trata de elementos de interface do usuário e práticas de UX. O que você construiu e tem uma compreensão de como funciona. Quanto mais rica for sua biblioteca, mais rápido você poderá encontrar soluções no local.

Vamos dar um exemplo: como designer, você tem a tarefa de construir um novo site.

Qual site? Você pode perguntar. Bem, esses são todos os requisitos que você tem. Um desafio de um colega de trabalho. Ah, também, você tem uma hora para fazer isso. Este é um desafio que fizemos na DevriX e aqui está um dos resultados após 3600 segundos:

Design de Alex Dimitrov

Não houve muito tempo para considerar o tópico, então foi direto ao título. Quais componentes um cabeçalho possui?

• Um título com certeza
• Navegação
• Barra de pesquisa
• Alguns links sociais
• Alguns botões de apelo à ação, principalmente para registar e / ou criar uma conta
• Alguma navegação para torná-lo interessante

De onde veio tudo isso? Antes era uma página em branco. Não havia nem mesmo um tópico, para começar. Tudo aconteceu devido à biblioteca visual que foi criada na mente do designer ao longo dos anos de construção de sites, aplicativos e tudo ao seu redor.

De quantas maneiras você pode criar um cabeçalho? Centenas de maneiras. Existem tantos tipos diferentes de elementos, topografias, cores, sobreposições, botões, elementos e muito mais. É uma experiência interessante de fazer.

Como construir uma biblioteca visual

Embora a resposta mais simples seja “fazer mais designs”, não é muito satisfatória simplesmente porque há muito mais do que isso. O que é mais importante é a diversidade. Construindo designs diferentes. Uma maneira direta de abordar isso seria reformulando sites grandes.

Aqui estão alguns exemplos:

Facebook:

Fonte da imagem: Dribbble

Gmail:

Fonte da imagem: Dribbble

Twitter:

Fonte da imagem: Dribbble

Existem muitos exemplos. Quanto mais complexo for o design, mais rápido você progredirá. Mas como isso funciona exatamente?

Vamos dar uma olhada em uma lista como exemplo. Uma lista pode ter um cabeçalho que a nomeia, pode ter ícones que podem ser coloridos, semelhantes em design ou diferentes em design. Ele também pode ter um título e subtítulo maiores, talvez um rótulo com um número. Em seguida, você pode adicionar estados de foco, itens que podem ser selecionados ou desabilitados e assim por diante. Com todas essas variações, você pode fazer uma grande variedade de designs de lista.

Fonte da imagem: Dribbble

Ser capaz de criar tantas configurações e layouts é ter uma boa biblioteca visual. Para saber que você pode fazer assim. É como ter alguém próximo a você que diz “Desenhe uma caixa”, depois “Adicione um título” e você faz isso sem pensar. Todas essas decisões são tomadas porque você já fez isso antes. Na verdade, ele também segue os fundamentos do design, mas você não pode chegar até suas notas ou livros o tempo todo. É como treinar uma IA - você precisa construir padrões usando uma “ordem de elementos bem-sucedida”.

Todos os artistas visuais precisam construir bibliotecas

Um exemplo claro disso é Kim Jung Gi - um gênio que pode fazer obras de arte realistas usando qualquer perspectiva.

Arte de Kim Jung Gi

Em uma entrevista, ele conta como ao longo de sua vida olhou para todos os objetos ao seu redor, tentando entender sua forma e desenhá-los de uma perspectiva diferente. Com essa habilidade, ele agora é capaz de desenhar tudo o que você vê na imagem acima simplesmente começando a partir de um pedaço de papel branco sem nenhuma referência.

Ou melhor, sem referências que ele possa alcançar porque suas referências estão em sua mente - sua biblioteca visual. Este é um exemplo de obra de mestre, que é um grande objetivo para um designer.

Da mesma forma que os web designers aprendem sobre botões, listas, cartões, campos de entrada, pop-ups e muito mais, os artistas digitais aprendem sobre materiais, iluminação, silhuetas, como funcionam os músculos, como a gravidade puxa você para baixo e sobrecarrega seu corpo e assim por diante.

Ilustração de Suzanne Helmigh

Este é um exemplo de como artistas digitais aprendem sobre vários materiais ao tentar aplicá-los a uma esfera. Magma, madeira, pele, vinho, ovo, queijo, tudo é válido. Aprender sobre isso, fazê-lo com as mãos, grava aos poucos em seu cérebro. E quando chega a hora de aplicar esse material a uma pintura real, agora você tem uma compreensão melhor de como ela realmente funciona e como o resultado final deve ser realista.

Aqui está um exemplo em que pele, couro, metal e cabelo são usados ​​para produzir um produto final muito bonito. A falta de compreensão básica desses materiais pode fazer com que o metal pareça plástico, papel parecido com couro e assim por diante.

Fonte da imagem: Artstation

Desafios de componentes de web design

Agora, vamos dar uma olhada novamente em alguns componentes comuns que você usará com frequência em web design e algumas práticas para fazer:

1 - Botões

Um dos componentes mais fundamentais de um site. Os botões vêm em todas as formas e tamanhos. Você pode definir gradientes, alterar cores, adicionar sombra de texto, adicionar bordas (mais de uma), adicionar estilo de brilho, contorná-los, alterar sua forma (quadrado, cantos arredondados, círculo), alguns vêm com ícones, outros têm ícones separados em área subclicável.

Fonte da imagem: Dribbble

Tarefa : Crie um botão em 20 estilos diferentes. Quanto maior a diferença entre eles, melhor. Para cada um, continue seguindo as melhores práticas de design em termos de contraste, equilíbrio e assim por diante.

2 - Cartas

Cartões ou caixas são outro componente super comum. Ele pode conter qualquer tipo de conteúdo, embora alguns elementos comuns possam ser um cabeçalho / rodapé + conteúdo principal.

Fonte da imagem: Dribbble

Tarefa : Usando o conteúdo, forme os cartões acima, crie 10 variações, de preferência o mais diferente possível. Mude o estilo, adicione novos elementos, gire-os, use gradientes, sombras, ícones e ilustrações. Tente enlouquecer com isso.

3 - Comentários

Quase todos os blogs possuem algum tipo de sistema de comentários. Mas você considerou que o componente de comentário pode não conter realmente um comentário real, mas sim uma mudança de “status”?

Fonte da imagem: Dribbble

Tarefa: O exemplo acima mostra exatamente isso. Agora, tente inventar qualquer coisa relacionada a um componente de comentário - comentários de usuários, status de atualização de tarefa (que estão na área de comentários), comentários tipo chat, qualquer coisa. Qualquer coisa entre 7 a 10 variações seria um bom número. Novamente - tente mantê-los todos diferentes. Pesquise mais, encontre ideias, navegue em sites.

O objetivo desses exercícios é encontrar maneiras de fazer elementos comuns de novas maneiras que você não conhecia antes.

4 - Sliders

Os controles deslizantes são um dos componentes que muitos desenvolvedores de front-end odeiam devido à enorme quantidade de problemas que eles criam, bem como ao pesado JavaScript que pode estar sendo executado em segundo plano. Mas isso não significa que você não precisará fazer um.

Fonte da imagem: Dribbble

Tarefa: Navegue na web e em vários designs para aprender mais sobre os diferentes layouts e abordagens. Talvez dê uma olhada nas bibliotecas JS onde eles fazem slides para ver o que eles têm. A partir daí, crie de 10 a 15 designs diferentes para os controles deslizantes. Novamente - tente fazer cada design o mais diferente possível do anterior, não use apenas pequenas melhorias.

5 - Formulários de entrada

Os formulários de entrada são outra parte essencial de quase todos os sites. O interessante para eles é que recebem informações em vez de uma saída.

Fonte da imagem: Dribbble

Tarefa: seu trabalho aqui é encontrar o tipo mais estranho de informação que alguém possa precisar em um site. Faça upload de um PDF ou PSD (escolha um), informações de cartão de crédito, adicione uma receita para cookies, calcule as taxas de mistura de tintas, crie um configurador de concessionária de automóveis. Qualquer coisa que venha à mente, quanto mais original, melhor. Mais uma vez, continue navegando em sites para ver soluções reais. Projete pelo menos 10 formas exclusivas diferentes com designs exclusivos.

Resumo

Construir uma biblioteca de design como designer é um dos principais trampolins para melhorar seu fluxo de trabalho, produzindo designs rapidamente, resolvendo problemas para seus clientes e surgindo com maneiras únicas e geniais de melhorar a experiência do usuário. Quando você começa a navegar e observar atentamente cada elemento na web, começa a considerar as ações do usuário, o que ele vê e como isso poderia ser melhorado.

Usar as tarefas acima como trabalho de casa ajuda a preencher seu portfólio. Não se limite apenas às 5 tarefas mencionadas, vá lá, navegue por sites, faça reformulações, estude-as e continue desenvolvendo seus sentidos de design e construindo sua própria biblioteca visual!