Aprimore suas habilidades com jogos online divertidos para designers

Designers de sucesso rotineiramente aprimoram e requalificam para reforçar os fundamentos usados ​​em ferramentas, projetos e disciplinas. No entanto, encontrar tempo extra para aprender durante a semana de trabalho não é fácil. Felizmente, os jogos online são uma maneira divertida e educativa para os designers de UI/UX aprimorarem suas habilidades e adquirirem novas. Por meio de experiências de jogos online interativas e imersivas (e muitas vezes gratuitas), você pode aprimorar habilidades técnicas, como alinhamento, tipografia e teoria das cores.

Além de aprender novas técnicas de design, descobri que jogar jogos online me deixa mais leve, aumenta minha criatividade e me ajuda a usar melhor os princípios básicos de design. Sempre que tenho tempo livre ou estou enfrentando um problema de design teimoso, jogo um desses jogos e saio com uma nova perspectiva.

Melhore seu senso de alinhamento

O alinhamento é um princípio de design fundamental que orienta a composição visual e suporta usabilidade e legibilidade.

É centrado Isso é ótimo para treinar seu senso de alinhamento e ajudá-lo a detectar erros de espaçamento rapidamente. O objetivo é determinar se um ponto está centralizado dentro de uma forma. É um conceito simples, mas o jogo é desafiador porque os pontos são frequentemente colocados dolorosamente perto do centro. O jogo cria consciência composicional, forçando você a considerar a geometria e encontrar pontos de referência em formas sobrepostas e adjacentes.

Expanda seu conhecimento de design de fontes

Compreender as nuances dos tipos de letra pode ajudar os designers a estabelecer uma hierarquia visual, garantir que o texto seja legível e comunicar melhor o significado da cópia.

O jogo I shot the serif testa o quão rápido você pode reconhecer fontes serif. Para começar, você recebe duas letras, uma das quais é uma fonte com serifa, e precisa “atirar na serifa” clicando nela antes que o tempo acabe. Conforme você progride, mais e mais letras são mostradas simultaneamente, tornando mais difícil encontrar e fotografar os diferentes estilos de serifa.

Este jogo irá mantê-lo em seus dedos! Eu jogo toda semana e sempre fico surpreso com o quão desafiador é depois de algumas rodadas.

Typewar é outro treinador de tipos de letra, que desafia sua capacidade de identificar diferentes tipos de letra. Em cada rodada, você recebe um glifo e deve escolher o nome correto do tipo de letra entre um par de opções. Você ganha ou perde pontos pela forma como responde à pergunta, e a quantidade de pontos concedidos no final depende de quantos outros jogadores responderam à mesma pergunta corretamente. O feedback instantâneo, as estatísticas em tempo real e a exposição a fontes pouco conhecidas o motivarão a continuar aprendendo.

Melhore seu olho para Kerning

Uma maneira de melhorar a legibilidade do texto digital é garantir um kerning eficaz ou o espaçamento entre os caracteres. Kerning geralmente voa sob o radar dos designers porque é predefinido nos arquivos de fonte de cada tipo de letra. Mas é útil saber como ajustar o kerning quando a relação entre os caracteres parece incorreta ou se você precisar criar um logotipo ou fonte sob medida para um cliente.

Kern Type ajuda você a ajustar suas habilidades de kerning testando sua capacidade de espaçar corretamente as letras dentro das palavras. Para cada palavra que você kern, você recebe uma pontuação de 100 e a opção de alternar entre três visualizações: seu espaçamento, o espaçamento ideal e uma combinação de ambos para comparação.

Eu continuo voltando a este jogo porque é difícil marcar 100, e isso me lembra que sempre há espaço para melhorar.

Atualize seu jogo de cores

Ao atualizar suas habilidades em cores, você pode tomar decisões mais inteligentes e significativas em um espectro de projetos e disciplinas de design. Color é um jogo que desafia você a identificar matizes e saturação, bem como combinações de cores complementares, análogas, triádicas e tetrádicas. A interface mostra uma roda de cores interativa com uma cor destacada no centro. Você deve determinar a cor (ou cores) dentro da roda de cores em 10 segundos ou menos, uma tarefa que cresce em dificuldade à medida que você tenta combinar cores para esquemas de cores triádicos e tetrádicos.

Refine sua técnica vetorial

Ferramentas baseadas em vetor, como Figma, Sketch e Adobe Illustrator, permitem que os designers criem gráficos digitais dimensionados sem perder a qualidade, ao contrário das imagens de pixel, que perdem resolução à medida que aumentam de tamanho. Mas desenhar e manipular formas e curvas vetoriais pode ser um processo complicado.

O jogo booleano ensina sobre operações booleanas que são usadas para construir e modificar rapidamente formas 2D em ferramentas de design baseadas em vetores. No jogo, você verá uma forma para replicar. Após alguns segundos, a forma se transforma em um contorno. À esquerda da tela há várias formas que você pode arrastar para o contorno para reproduzir a forma final. Na parte inferior da tela estão quatro operações booleanas: união, subtração, interseção e diferença. Clicar no botão Continuar aciona uma animação passo a passo que mostra como mesclar as formas usando a operação booleana escolhida. Quando uma operação incorreta é escolhida, esta animação ajuda você a visualizar seus erros.

Shape Type é outro jogo vetorial para experimentar. Nele, o jogador é apresentado a uma letra que precisa ser remodelada em sua forma correta, arrastando diferentes pontos de ancoragem e recebe uma pontuação de similaridade de 100. Como Kern Type, você também pode alternar entre três visualizações para comparar seu resultado com o Forma original. Além de refinar suas habilidades de desenho vetorial, Shape Type é uma ótima maneira de ver de perto os elementos anatômicos de diferentes tipos de letra.

Um último jogo que o ajudará a aumentar suas habilidades vetoriais é o The Bezier Game, que ajuda você a criar gráficos mais precisos usando a ferramenta caneta. Tutoriais de introdução explicam como usar controles, como alt e shift, para posicionar pontos de ancoragem e manipular alças de Bezier. O jogo ensina como desenhar formas geométricas simples junto com formas mais complexas, como um coração e um carro, com o menor número possível de pontos de ancoragem ou nós. Para manter as coisas interessantes, você obtém um certo número de nós para cada nível, e o jogo mantém uma contagem dos nós que você não usa.

Eu gosto deste jogo porque me ajuda a visualizar a relação entre o posicionamento do ponto de ancoragem e os ângulos da alça de bezier, levando a linhas e curvas mais suaves.

Aprimore a codificação básica

Seja para desenvolvimento de carreira ou colaboração com desenvolvedores, entender o básico de HTML e CSS torna um designer um ativo considerável para equipes multidisciplinares. Além disso, o conhecimento de programação front-end ajuda os designers a temperar suas ideias com parâmetros realistas.

O Flexbox Froggy detalha o básico da codificação passo a passo. Ele ensina CSS flexbox, um modelo de layout da Web CSS3 que facilita o posicionamento dos componentes da interface do usuário, permitindo o controle de alinhamento, espaçamento e elementos de encapsulamento em páginas da Web com apenas uma ou duas linhas de código.

No jogo, você ajuda um sapo travesso e seus amigos a pular pela tela escrevendo linhas de código CSS. Em cada nível, um mini tutorial acima do editor de código descreve os diferentes comandos que você pode usar. Conforme você escreve o código no lado esquerdo da tela, as alterações correspondentes ocorrem no lado direito. Se o sapo chegar ao lírio, o código está correto.

Aumente seu conhecimento de UI/UX

Os jogos online também podem ajudar os designers a melhorar seu conhecimento de UI/UX e criar experiências sem atrito que aumentam as taxas de conversão e o ROI.

Can't Unsee enriquece suas habilidades gerais de UI/UX testando seu conhecimento de conceitos de design, como hierarquia, contraste, alinhamento, tipografia e estilo de componentes. A tela mostra dois componentes de design e solicita que você selecione a opção mais amigável. Os componentes podem parecer idênticos ao olho destreinado, mas um designer experiente deve ser capaz de diferenciá-los notando pequenas diferenças entre os elementos, como texto desalinhado ou preenchimento irregular.

Aproveite ao máximo os jogos de design online

Muitas vezes me surpreendo com a rapidez com que a indústria do design evolui. Às vezes, a pressão para acompanhar novas ferramentas e técnicas pode parecer esmagadora e sufocar minha criatividade. Faço meu melhor trabalho de design quando abordo os problemas com um espírito infantil, e é por isso que gosto tanto desses jogos: eles me permitem aprender e praticar, mantendo um senso de diversão e admiração.

Esteja você procurando requalificar, aprimorar ou aprender uma nova técnica de UI/UX, os jogos de design online podem ajudá-lo a testar e aumentar suas habilidades artísticas e técnicas. Como Pablo Picasso disse uma vez: “Estou sempre fazendo o que não posso fazer, para aprender a fazê-lo”.