8 Design Games That Actually Teach You Something

What are graphic design games?

Graphic design games turn a design skill into a quick round with a score. You make a judgement, the game tells you at once how close you were, and you go again. That instant feedback is what a tutor gives you on a good day, and it is the reason a ten-minute game can teach more than an hour of reading about colour theory.

Our sister post on quick games for designers covers the type and precision games: kerning, letter shapes, the Pen tool and centring. This list deliberately uses different games and puts them in order, so a student can work through them as a short course in colour, shape and layout. (If you searched for game design, meaning making video games, that is a different field; these are games about graphic design.)

A learning path: 8 graphic design games in order

Stage one trains your eye for colour. Stage two connects what you see to the codes you type into Figma or Photoshop. Stage three moves to shapes, and stage four to the layout rules behind every website.

1. X-Rite Online Color Challenge

Start by finding out how well you see colour. X-Rite, a colour measurement company, offers a free online version of the Farnsworth Munsell 100 Hue Test: drag rows of colour chips into hue order, then get a score where zero is perfect, plus a chart of the parts of the spectrum where you are weakest. It is not a medical test, but it is a useful baseline. Take it again at the end of the path and compare.

2. I Love Hue

A calm puzzle app for iOS and Android. Each level is a mosaic of tiles that you rearrange into a smooth gradient, using a few fixed tiles as anchors. It trains the same skill as the hue test, small differences in hue, saturation and lightness, but across hundreds of levels instead of four rows. Good for the bus or a break between lectures.

3. Kolor

A browser game by developer Jorge Moreno: 25 timed rounds that ask "What colour is this?" and score you on speed and accuracy. Where I Love Hue is slow and careful, Kolor makes you decide quickly, which is closer to how you judge colour while working.

4. What the Hex?

Now link colour to code. What the Hex? shows you a hex code such as #3A7BD5 and a set of swatches; you pick the one that matches. After a few sessions you start to read hex codes: the first pair is red, the second green, the third blue, and higher numbers mean more light. That makes you faster at adjusting colours by typing values rather than dragging pickers.

5. Hexcodle

A daily, Wordle-style game for hex codes. You get five tries to guess the six-character code of the day's colour, and after each guess the game shows your colour beside the target with hints on how close each part was. One puzzle a day makes it an easy habit, and it tests the hex reading you started in the previous game.

6. The Boolean Game

From Method of Action, the makers of the Bézier and kerning games. Each stage asks you to build a target shape by combining others with union, subtract, intersect and difference, the same Boolean operations found in Illustrator, Figma and every other vector editor. Most icons and many logos are built this way, so this is the game with the most direct link to client work. If you have not played The Bézier Game yet, do that first: it is in our designer games list.

7. Flexbox Froggy

Layout is where graphic design meets the web. Flexbox Froggy teaches CSS flexbox by having you type short lines of code to move frogs onto lily pads. You do not need to become a developer, but knowing how flexbox arranges items explains why Figma's auto layout behaves the way it does, and it makes your designs easier for developers to build.

8. Grid Garden

From the same creator as Flexbox Froggy: water a carrot garden by writing CSS grid rules. Grids are the backbone of page layout in print and on screen, and this game makes columns, rows and spans concrete. Finish it and you will read a website layout as a grid rather than a collection of boxes.

Which design game trains which skill?

Session times are our rough estimates for a first play, not figures from the games.

A four-week practice plan

1. 01Week 1, colour baseline: take the X-Rite challenge once and note your score. Then ten minutes of I Love Hue on most days.
2. 02Week 2, speed and codes: alternate Kolor and What the Hex?, and start the daily Hexcodle.
3. 03Week 3, shapes: work through The Boolean Game. Then rebuild one simple icon from a brand you like in Figma or Illustrator using only Boolean operations.
4. 04Week 4, layout: finish Flexbox Froggy and Grid Garden. Then lay out one web page in Figma with auto layout and a 12-column grid.
5. 05End of week 4: retake the X-Rite challenge and compare your score with week 1.

The exercise at the end of each week matters more than the game. A game sharpens the skill; using it on a real piece of work is what makes it stick. Pair the plan with our colour tools for building a palette in week two and the beginner design principles in week four.

Using design games in a classroom

Teachers and course leaders can use these as warm-ups. A few formats that work with graphic design students:

• Open a colour theory class with the X-Rite challenge and discuss why scores differ, including lighting and screen calibration.
• Run Hexcodle as a daily class puzzle and share results before the lesson starts.
• Set The Boolean Game as homework before a logo or icon brief.
• Pair design students with Flexbox Froggy before a web design module, so they can talk to developers in the same terms.

Where design games stop helping

Games train perception and tool skills. They do not teach you to understand a client's business, choose an idea or explain a decision, and those are what get designers hired. Once a game feels easy, stop playing it and move the time to real briefs: redesign a local shop's menu, or a logo for a friend's business. AI tools can now produce a layout in seconds, which makes a trained eye more useful, not less, because someone has to judge what the tool produced.