Dans Webdesign
Explorez notre sélection de 15 mini-jeux gratuits spécialement créés pour vous 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.
Dans cette collection, vous découvrirez des exercices ludiques sur les couleurs, les courbes de Bézier, le CSS, le JS et la typographie. Ces jeux interactifs de design vous offriront une expérience immersive et divertissante pour affiner vos talents et vous épanouir dans votre domaine.
Il est temps de mettre à l'épreuve vos connaissances en matière de couleurs. Ce jeu de design est un test complet et simple qui mettra votre œil à l'épreuve en vous demandant d'identifier les teintes, la saturation et les associations de couleurs complémentaires, analogues, triadiques et tétradiques.
Dans le jeu de design Color, une roue de couleurs interactive s'affiche avec une couleur mise en évidence au centre. Vous devrez identifier la couleur (ou les couleurs) à l'intérieur de la roue en 10 secondes ou moins, une tâche qui se complique lorsque vous essayez de faire correspondre les couleurs pour les schémas triadiques et tétradiques. Bonne chance !
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.
Le principe de What the Hex est similaire à celui de Hex Invaders, avec un gameplay toutefois un peu plus posé.
Au lancement du jeu de design, 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.
Êtes-vous capable de distinguer le magenta du fuchsia ou la neige de l'ivoire ? C'est l'occasion parfaite de mettre à l'épreuve votre sens de l'observation pour les nuances subtiles, alors dépêchez-vous d'identifier la bonne couleur dans le jeu de design Kolor, l'horloge tourne !
Une femme sur 255 et un homme sur 12 présentent une forme ou l’autre de déficience en matière de vision des couleurs. En faites-vous partie ?
Si vous travaillez dans un domaine où la couleur a son importance, ou si vous êtes juste curieux de votre QI des couleurs, relevez ce défi en ligne pour le déterminer. Basé sur le test Farnsworth-Munsell 100 Hue, ce jeu de design constitue une façon rapide et amusante de mieux comprendre l’acuité de votre vision des couleurs.
Kern Type est le jeu de design 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é.
Le jeu de design I shot the serif teste à quelle vitesse vous pouvez reconnaître les polices serif. Pour commencer, on vous présente deux lettres, dont l’une est une police sérif, et vous devez « tirer sur la sérif » en cliquant dessus avant de manquer de temps. Au fur et à mesure que vous progressez, vous voyez de plus en plus de lettres simultanément, ce qui rend plus difficile de trouver et de shooter les différents styles de sérif.
En tant que concepteurs, nous utilisons régulièrement des polices de caractères. Mais pourquoi est-il si difficile de se souvenir de leurs noms ?
Si vous trouvez constamment que le nom de la police parfaite est juste au bout de votre langue, voici un jeu de design pour vous aider à améliorer vos connaissances et à comprendre subtilités entre les différents styles de police. Le jeu n’est pas chronométré, alors prenez votre temps et bonne chance !
Shape Type est un autre jeu de vecteur à essayer. Dans ce jeu de design, le joueur doit modifier une lettre pour la remettre dans sa forme correcte en déplaçant divers points d'ancrage, et obtenir un score de similitude sur 100.
Comme Kern Type, vous avez la possibilité de passer entre trois vues pour comparer votre résultat avec la forme d'origine. En plus d'améliorer vos compétences en dessin vectoriel, Shape Type est un excellent moyen d'analyser de près les éléments anatomiques des différentes polices de caractères.
The Bézier Game est un jeu de design conçu pour apprendre à maîtriser l'outil plume. En suivant les étapes, vous pourrez dessiner des formes simples comme des formes plus complexes telles qu'un cœur ou une voiture, en utilisant le moins de points d'ancrage ou de nœuds possible.
Les tutoriels d’introduction expliquent comment utiliser les contrôles, tels que alt et shift, pour positionner les points d’ancrage et manipuler les poignées Bézier. Pour pimenter le tout, vous disposez d'un nombre limité de clics pour chaque niveau.
Le jeu de design Boolean Game vous apprend les opérations booléennes utilisées pour créer et modifier rapidement des formes 2D dans des outils de conception vectoriels. Vous devez reproduire une forme en glissant les formes disponibles dans le contour qui lui correspond.
En bas de l'écran, vous avez le choix entre quatre opérations booléennes : union, soustraction, intersection et différence. En cliquant sur Continuer, une animation vous guide étape par étape pour fusionner les formes correctement. Si vous faites une erreur, cette animation vous aide à comprendre vos erreurs.
Développez vos compétences en UI/UX avec le jeu de design Can't Unsee en testant votre connaissance des principes de conception tels que la hiérarchie, le contraste, l'alignement, la typographie et le style des composants. Sur l'écran, vous trouverez deux composants de conception et vous devrez choisir l'option la plus conviviale.
Ces composants peuvent sembler identiques à première vue, mais un designer expérimenté devrait être capable de les distinguer en remarquant de petites différences, comme un texte mal aligné ou un espacement inégal. Ça semble facile, non ? Il n’y a qu’une seule façon de le savoir ;)
CSS Diner est un jeu de design 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, etc...
Flexbox Froggy est un jeu de design amusant qui vous guide pas à pas dans l'apprentissage du codage. Il vous enseigne les bases du CSS flexbox, un modèle de mise en page Web CSS3 qui facilite le positionnement des éléments de l'interface utilisateur. Avec seulement quelques lignes de code, vous pouvez contrôler l'alignement, l'espacement et l'apparence des éléments sur vos pages web.
Dans ce jeu, vous aidez une grenouille espiègle et ses amis à sauter à travers l'écran en écrivant du code CSS. À chaque niveau, un mini tutoriel vous explique les différentes commandes que vous pouvez utiliser. Lorsque vous écrivez du code sur le côté gauche de l'écran, les modifications correspondantes s'affichent à droite. Si la grenouille atteint le nénuphar, cela signifie que votre code est correct.
Défiez les conventions de l'apprentissage traditionnel et plongez dans Untrusted, où chaque défi est une opportunité d'affûter vos compétences en JavaScript tout en vivant une aventure captivante. Le jeu de codage en ligne Untrusted permet de lever le voile sur les mystères du JavaScript de manière immersive et divertissante, au travers d'énigmes.
Responsive Design : 5 conseils pour créer un site web adapté aux mobiles
15 sites web originaux avec des mesh gradients