Vandelay Design may receive compensation from companies, products, and services covered on our site. For more details, please refer to our Disclosure page.

These are fun and educational graphic design games that teach design fundamentals or simply improve your sense of design knowledge. Design games can involve Photoshop functions, type recognition, or color information. Below are eleven awesome games that will help you hone your design skills!

Who says games can’t be educational? Though I’ll admit when I hear the concept of a design-centric game I rarely assume it’ll be fun. But after scouring the Internet for web games I’m surprised how many are out there, specifically with a focus on digital design concepts.

So I’ve organized this post on graphic design games that you can play right in your browser for free. 

These are our favorite graphic designer games that teach a variety of different creative concepts. With this list at your disposal, you can play design games free at any time.

1. The Bézier Game

bezier game webappbezier game webapp

Learning to use the pen tool is one of the most frustrating yet enlivening things a designer can do. It’s a must-know tool for everything from photo manipulation to digital painting.

This free bézier game is one of the best games for graphic designers to help you come to terms with the complexity of pen tool manipulation. It can be tricky since the curves have to be exact to move onto the next level. But you’ll learn a lot in the process and have some fun along the way.

2. Shape Type

Shape TypeShape Type

Shape Type is a companion graphic design game also from Method of Action, the creators of the Bézier Game. Shape Type uses bézier handles to manipulate letterforms. You’ll still be learning about the pen tool, but in this case from the viewpoint of typography.

Give these two design games a try and see what you think. They’re both useful for the absolute novice but they’re also fun for the pen tool expert to test his/her skills.

3. Kern Type

kern type webappkern type webapp

Most of us can recognize when typography isn’t kerned very well. But how many of us can fix those kerning issues?

Kern Type is another game created by Method of Action, the team behind the Bézier Game.

In this game, your objective is to move letters into proper kerning. It’s your task to figure out which letter(s) instigate the problem, and how much rearrangement is required for perfect kerning. This can be frustrating over time but it’s a great game for typography lovers and design perfectionists, and the rest of us can learn a lot by trying it.

4. The Font Game

Font GameFont Game

The Font Game is straightforward, easy to play, and also a lot of fun (especially for font any typography lovers). You’ll be given the name of a font, 4 different text samples, and you’ll have to identify the sample that is presented in the listed font. It’s a simple multiple-choice game.

Go ahead and test your own font identification skills! Can you tell one sans serif from another?

5. Pixactly

pixactly playing game webapppixactly playing game webapp

If you want to put your eye to the test give Pixactly a try. This game tests your ability to draw shapes that perfectly match a set of dimensions, like a 40x80px box.

You draw right in the browser and the results tell you each time what your dimensions are and how far off they were from the stated goal.

You get five rounds and your total score is tallied up. It works much like golf where you want to be at 0 points by the end of the game. While this may not make you a great designer, it will improve your eye for pixels and it’s a fun way to pass the time.

kerning. This can be frustrating over time but it’s a great game for typography lovers and design perfectionists.

6. CSS Diner

css diner webapp selectorscss diner webapp selectors

Looking to brush up on your CSS selection skills? Not quite able to memorize some syntax for modern CSS development?

Then try playing CSS Diner, a free open source game hosted on GitHub by Luke Pacholski. This game asks players to write the perfect CSS selector with requirements like the :nth-child pseudo-classes.

Each level gets progressively more complex with 26 levels in total. While this game may not ensare every designer, it’ll surely capture the attention of designers with an interest in frontend development.

7. What The Hex?

what the hex webapp gamewhat the hex webapp game

As the name suggests, this is a hex color game for designers where you have to guess the hexadecimal code for the color on the screen.

It’s a game made for designers with a fondness for color and minor nuances, just like the pixel matching game. But this game trains more than just your eye. It’s a means of memorizing the hex color system and learning the subtleties of hex values in action.

You select how many total colors you want on the screen, ranging from 2 up to 48. A hex code appears and you click the color that you think it represents. This is something you’ll probably struggle with at first, but over time you’ll become surprisingly adept at hex color matching.

8. Color

Color gameColor game

Color is another game created by Method of Action. This game makes it fun to test your knowledge and ability to work with colors. Segments to the game include hue, saturation, complementary colors, analogous colors, triadic colors, and tetradic colors.

9. Logo Design Quiz

logo design quiz gamelogo design quiz game

Brand design lovers will get a kick out of this logo quiz matching game.

Here’s how it works: a series of logos appear on the screen, each representing a letter of the alphabet. Some offer the full logo while others are only partial shots.

You have to guess which company the logo represents. It can be surprisingly tricky when you’re just staring at a letter design, but it’s a great way to ingrain brand recognition into your brain.

This isn’t just for designers, but logo designers will especially love it.

10. Type Connection

Type ConnectionType Connection

Reminiscent of the old Love Connection game show comes Type Connection, a dating game for typography.

You start by choosing a main typeface and answering various questions along the way. It’s the metaphorical equivalent of an online dating profile… but for typefaces.

Once you make a selection the fonts will be paired up and compared side-by-side. If you decide to match them up you’ll get the Type Connection’s personal opinion on the matchup. You’ll get feedback about how compatible they are, as well as why they work well together or why they do not.

While this game is fun, it’s also very educational and effective at helping to teach the concepts and principles behind font pairing.

11. Color Test Challenge for Graphic Design

color test challenge webappcolor test challenge webapp

Color management company X-rite has built a really fun color challenge game for rearranging preselected colors in order of gradation, testing your visual skills.

The goal is to drag and drop colors in order based on hue. Many of the color palettes use washed-out shades or pastels to provide a more difficult challenge. And unlike the hex code game, this really does test your eye and reveals how well you can see colors in relation to each other.

Final Thoughts on Fun Design Games

So what do you think of the list? I’m sure you’ll find at least a few graphic design games that you’ll enjoy playing. And just as importantly, you’ll learn a lot along the way. Playing graphic design games online is the perfect way to learn and improve. Try them and you’ll see how fun graphic design can be.

And if you’re looking for more articles on design theory try out these related posts:

Similar Posts