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. Check out the list and if I’ve missed any fun games be sure to share in the post comments.
Fun Graphic Design Games
1. The Bézier Game
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 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 Type is a companion 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 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
Most of us can recognize when typography isn’t kerned very well. But how many of us can fix those kerning issues?
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.
4. The Font 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!
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
Looking to brush up on your CSS selection skills? Not quite able to memorize some syntax for modern CSS development?
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?
As the name suggests, this is a hex color game 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.
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
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.
10. Type 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
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.
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.
And if you’re looking for more articles on design theory try out these related posts: