Aiguisez vos compétences avec des jeux en ligne amusants pour les concepteurs

Les concepteurs qui réussissent améliorent et renouvellent régulièrement leurs compétences pour renforcer les fondamentaux utilisés dans les outils, les projets et les disciplines. Cependant, trouver du temps supplémentaire pour apprendre pendant la semaine de travail n'est pas facile. Heureusement, les jeux en ligne sont un moyen amusant et éducatif pour les concepteurs UI/UX d'affiner leurs compétences et d'en acquérir de nouvelles. Grâce à des expériences de jeu en ligne interactives et immersives (et souvent gratuites), vous pouvez perfectionner des compétences techniques telles que l'alignement, la typographie et la théorie des couleurs.

En plus d'apprendre de nouvelles techniques de conception, j'ai découvert que jouer à des jeux en ligne me rend plus léger, stimule ma créativité et m'aide à mieux utiliser les principes de conception de base. Chaque fois que j'ai du temps libre ou que je suis confronté à un problème de conception tenace, je joue à l'un de ces jeux et repart avec une nouvelle perspective.

Améliorez votre sens de l'alignement

L'alignement est un principe de conception fondamental qui guide la composition visuelle et prend en charge la convivialité et la lisibilité.

Il est centré, idéal pour entraîner votre sens de l'alignement et vous aider à détecter rapidement les erreurs d'espacement. L'objectif est de déterminer si un point est centré à l'intérieur d'une forme. C'est un concept simple, mais le jeu est difficile car les points sont souvent placés terriblement près du centre. Le jeu renforce la conscience de la composition en vous obligeant à prendre en compte la géométrie et à trouver des points de référence dans les formes superposées et adjacentes.

Développez vos connaissances en matière de conception de polices de caractères

Comprendre les nuances des polices de caractères peut aider les concepteurs à établir une hiérarchie visuelle, à garantir la lisibilité du texte et à mieux communiquer le sens de la copie.

Le jeu que j'ai tourné teste la vitesse à laquelle vous pouvez reconnaître les polices serif. Pour commencer, vous êtes présenté avec deux lettres, dont l'une est une police serif, et vous devez "tirer sur le serif" en cliquant dessus avant de manquer de temps. Au fur et à mesure que vous progressez, de plus en plus de lettres s'affichent simultanément, ce qui rend plus difficile la recherche et la prise de vue des différents styles d'empattement.

Ce jeu vous gardera sur vos orteils! J'y joue toutes les semaines et je suis toujours surpris de voir à quel point c'est difficile après quelques parties.

Typewar est un autre entraîneur de polices de caractères, qui met au défi votre capacité à identifier différentes polices de caractères. À chaque tour, un glyphe vous est présenté et vous devez choisir le nom de police correct parmi une paire d'options. Vous gagnez ou perdez des points pour la façon dont vous répondez à la question, et le nombre de points attribués à la fin dépend du nombre d'autres joueurs qui ont répondu correctement à la même question. Les commentaires instantanés, les statistiques en temps réel et l'exposition à des polices peu connues vous motiveront à continuer à apprendre.

Améliorez votre œil pour le crénage

Une façon d'améliorer la lisibilité du texte numérique est d'assurer un crénage efficace, ou l'espacement entre les caractères. Le crénage échappe souvent au radar des concepteurs car il est prédéfini dans les fichiers de police de chaque police de caractères. Mais il est utile de savoir comment ajuster le crénage lorsque la relation entre les caractères semble erronée ou si vous devez créer un logotype ou une police sur mesure pour un client.

Kern Type vous aide à affiner vos compétences de crénage en testant votre capacité à espacer correctement les lettres dans les mots. Pour chaque mot que vous crénez, vous recevez une note sur 100 et la possibilité de basculer entre trois vues : votre espacement, l'espacement optimal et une combinaison des deux à des fins de comparaison.

Je reviens sans cesse à ce jeu parce qu'il est difficile d'en marquer 100, et cela me rappelle qu'il y a toujours place à l'amélioration.

Améliorez votre jeu de couleurs

En améliorant vos compétences en matière de couleurs, vous pouvez prendre des décisions plus intelligentes et plus significatives dans un éventail de projets et de disciplines de conception. La couleur est un jeu qui vous met au défi d'identifier les teintes et la saturation, ainsi que les associations de couleurs complémentaires, analogues, triadiques et tétradiques. L'interface affiche une roue chromatique interactive avec une couleur en surbrillance au centre. Vous devez déterminer la couleur (ou les couleurs) à l'intérieur de la roue chromatique en 10 secondes ou moins, une tâche qui devient de plus en plus difficile à mesure que vous essayez de faire correspondre les couleurs pour les schémas de couleurs triadiques et tétradiques.

Affinez votre technique vectorielle

Des outils vectoriels tels que Figma, Sketch et Adobe Illustrator permettent aux concepteurs de créer des graphiques numériques qui évoluent sans perte de qualité, contrairement aux images en pixels, qui perdent en résolution à mesure qu'elles augmentent en taille. Mais dessiner et manipuler des formes et des courbes vectorielles peut être un processus délicat.

Le jeu booléen vous apprend les opérations booléennes utilisées pour construire et modifier rapidement des formes 2D dans des outils de conception vectoriels. Dans le jeu, on vous montre une forme à reproduire. Après quelques secondes, la forme se transforme en contour. Sur la gauche de l'écran se trouvent plusieurs formes que vous pouvez faire glisser dans le contour pour reproduire la forme finale. Au bas de l'écran se trouvent quatre opérations booléennes : union, soustraction, intersection et différence. Cliquer sur le bouton Continuer déclenche une animation étape par étape qui vous montre comment fusionner les formes à l'aide de l'opération booléenne choisie. Lorsqu'une opération incorrecte est choisie, cette animation vous aide à visualiser vos erreurs.

Shape Type est un autre jeu vectoriel à essayer. Dans celui-ci, le joueur se voit présenter une lettre qui doit être remodelée dans sa forme correcte en faisant glisser différents points d'ancrage et en lui donnant un score de similitude sur 100. Comme Kern Type, vous pouvez également basculer entre trois vues pour comparer votre résultat au forme originale. En plus d'affiner vos capacités de dessin vectoriel, Shape Type est un excellent moyen d'examiner de près les éléments anatomiques de différentes polices de caractères.

Un dernier jeu qui vous aidera à améliorer vos compétences vectorielles est The Bezier Game, qui vous aide à créer des graphiques plus précis à l'aide de l'outil stylo. Les didacticiels d'introduction expliquent comment utiliser les commandes, telles que alt et shift, pour positionner les points d'ancrage et manipuler les poignées de Bézier. Le jeu vous apprend à dessiner des formes géométriques simples avec des formes plus complexes, telles qu'un cœur et une voiture, avec le moins de points d'ancrage ou de nœuds possible. Pour garder les choses intéressantes, vous obtenez un certain nombre de nœuds pour chaque niveau, et le jeu conserve un décompte des nœuds que vous n'utilisez pas.

J'aime ce jeu car il m'aide à visualiser la relation entre le placement du point d'ancrage et les angles de la poignée de Bézier, ce qui conduit à des lignes et des courbes plus lisses.

Révisez le codage de base

Que ce soit pour le développement de carrière ou la collaboration avec les développeurs, comprendre les bases du HTML et du CSS fait d'un designer un atout considérable pour les équipes multidisciplinaires. De plus, les connaissances en programmation frontale aident les concepteurs à tempérer leurs idées avec des paramètres réalistes.

Flexbox Froggy décompose les bases du codage étape par étape. Il enseigne CSS flexbox, un modèle de mise en page Web CSS3 qui facilite le positionnement des composants de l'interface utilisateur en permettant le contrôle de l'alignement, l'espacement et l'habillage des éléments sur les pages Web avec seulement une ou deux lignes de code.

Dans le jeu, vous aidez une grenouille espiègle et ses copains à sauter sur l'écran en écrivant des lignes de code CSS. A chaque niveau, un mini tutoriel au-dessus de l'éditeur de code décrit les différentes commandes que vous pouvez utiliser. Lorsque vous écrivez le code sur le côté gauche de l'écran, les modifications correspondantes se produisent sur la droite. Si la grenouille atteint le nénuphar, le code est correct.

Boostez vos connaissances UI/UX

Les jeux en ligne peuvent également aider les concepteurs à améliorer leurs connaissances UI/UX et à créer des expériences fluides qui augmentent les taux de conversion et le retour sur investissement.

Can't Unsee enrichit vos capacités globales UI/UX en testant vos connaissances des concepts de conception, tels que la hiérarchie, le contraste, l'alignement, la typographie et le style des composants. L'écran affiche deux composants de conception et vous demande de sélectionner l'option la plus conviviale. Les composants peuvent sembler identiques pour un œil non averti, mais un concepteur expert devrait être capable de les distinguer en remarquant de petites différences entre les éléments, comme un texte mal aligné ou un rembourrage irrégulier.

Tirez le meilleur parti des jeux de conception en ligne

Je suis souvent étonné de la rapidité avec laquelle l'industrie du design évolue. Parfois, la pression pour suivre le rythme des nouveaux outils et techniques peut sembler écrasante et étouffer ma créativité. Je fais mon meilleur travail de conception lorsque j'aborde les problèmes avec un esprit enfantin, c'est pourquoi j'apprécie tant ces jeux : ils me permettent d'apprendre et de pratiquer tout en conservant un sens du jeu et de l'émerveillement.

Que vous cherchiez à vous recycler, à améliorer vos compétences ou à apprendre une nouvelle technique UI/UX, les jeux de conception en ligne peuvent vous aider à tester et à développer vos côtelettes artistiques et techniques. Comme l'a dit un jour Pablo Picasso, "Je fais toujours ce que je ne peux pas faire, afin d'apprendre à le faire."