15 jeux pour apprendre le webdesign en s’amusant

12/06/202026/10/2022

Tutos

Vous souhaitez mettre votre solution en avant en haut de cet article ? Contactez-nous

Pour apprendre ou vous perfectionner, vous pouvez bien entendu suivre une formation, lire un livre, ou encore suivre des tutoriels sur YouTube. Mais les jeux vidéo peuvent aussi constituer un excellent moyen de développer votre savoir tout en passant un bon moment.

Vous trouverez des exercices sur les couleurs, les courbes de Bézier, du CSS, du JS, de la typographie.

J’adore ce genre de petits jeux. Il n’y a rien de sérieux mais ils permettent de nous tester un peu, d’apprendre en meme temps que de nous divertir. Un moyen sympa de gaspiller quelques minutes à la pause café ou de lancer des défis à vos les collègues pour savoir qui va ramener les croissants demain 🙂

Nous avons justement sélectionné quelques perles qui vous permettront de mettre à l’épreuve vos connaissances en web design ou en code, tout cela de manière ludique et légère. Cette liste n’est pas exhaustive, proposez vos trouvailles dans les commentaires et nous compléterons cet article avec vos découvertes.

Table des matières

Kern Type

Kern Type est le jeu idéal pour mettre à l’épreuve vos compétences en crénage (kerning en anglais), c’est-à-dire la gestion de l’espacement entre deux caractères.

Le principe est simple : on vous présente un mot dont les lettres ont un espacement un peu approximatif. C’est maintenant à vous d’ajuster la position de chaque caractère pour obtenir la bonne disposition. À chaque tour, une nouvelle police est utilisée pour pimenter la difficulté.

Hex Invaders

Hex Invaders est une version revisitée du classique jeu d’arcade Space Invaders, dont les plus anciens d’entre vous se souviennent peut-être.

Ici, il ne suffit pas de tirer sur les envahisseurs, puisqu’il faut viser celui dont la couleur correspond au code Hex affiché. Si vous avez vu juste, un autre code apparaît, et ainsi de suite. Une manière divertissante de tester votre maîtrise des couleurs.

The Bézier Game

L’outil Plume de Photoshop est réputé pour ne pas être le plus facile à prendre en main, et il a donné des sueurs froides à de nombreux designers…

Heureusement, The Bézier Game est un jeu conçu pour apprendre à maîtriser la plume : il consiste à dessiner des formes en utilisant cet outil, tout cela avec un nombre de clics limité. À chaque niveau, les formes deviennent de plus en plus complexes, permettant de progresser pas à pas.

CSS Diner

CSS Diner est un jeu en ligne très bien conçu pour apprendre le CSS ou réviser vos connaissances en la matière.

En prenant pour exemple une table avec des assiettes et des aliments à sélectionner (d’où le nom du programme), CSS Diner rend les choses très compréhensibles et vous permet de vous entraîner simplement à utiliser les sélecteurs, les identifiants, les classes…

What the Hex?

Le principe de What the Hex est similaire à celui de Hex Invaders, avec un gameplay toutefois un peu plus posé.

Au lancement du jeu, un code Hex s’affiche, accompagné de cinq ronds de couleurs différentes. Vous l’aurez compris : il faut deviner lequel de ces échantillons de couleur correspond au code. Il y a d’ailleurs plusieurs niveaux de difficulté (qui multiplient le nombre de couleurs à l’écran) si vous aimez le challenge.

Font Game

Font Game est basé sur un principe très simple : un mot s’affiche (“fargo”, en l’occurrence) et votre mission est de deviner quelle est la police d’écriture utilisée.

Le principe est simple, certes, mais reconnaître les 30 typographies qui composent ce quiz “à l’œil nu” n’a rien d’évident ! À chaque tour, vous avez le choix entre 4 polices, ce qui peut tout de même vous faciliter la tâche.

Type Connection

Type Connection se décrit comme un “jeu de rencontre typographique”… Et même si cela peut paraître étrange, le concept est bel et bien d’organiser des “dates” entre différentes polices d’écriture !

En réalité, il s’agit d’une métaphore pour apprendre, de manière ludique, l’art d’associer différentes polices, en fonction de leurs caractéristiques, de leur forme, etc. Alors, arriverez-vous à former des couples heureux ?

Avec ces 7 jeux en ligne gratuits et accessibles, vous allez pouvoir tester votre connaissance des couleurs, de la typographie, ou encore du CSS, tout en vous amusant : de quoi joindre l’utile à l’agréable ! N’hésitez pas à partager d’autres jeux dans les commentaires pour compléter cette liste.