Graphic Design Games For Having Fun While Learning
What is a graphic design game?
These are fun and educational games that teach graphic design fundamentals or simply improve your sense of design knowledge. Design games can involve Photoshop functions, type recognition, or color information. Below are ten awesome games that will help you hone your design skills!
So I’ve organized this post on graphic design games that you can play right in your browser for free.
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.
As a companion game, I also recommend Shape Type which 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.
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 graphic design, it will improve your eye for pixels and it’s a fun way to pass the time.
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.
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 ensure every designer, it’ll surely capture the attention of designers with an interest in frontend development.
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.
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.
The Font Game
Simply titled the font game, this is a real hoot for both UI designers and graphic/print designers.
We all use typography and we all like to know the different typefaces we have at our disposal. This font game created by I Loves Typography will help you learn a bunch of typefaces and memorize what they look like.
The font itself displays the word “Fargo” with four typeface names. You select the one you think it is and gets a final score at the end.
Reminiscent of the old Love Connection game show comes Type Connection, a dating game for typography.
You start by choosing the 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.
Color Test Challenge
Color management company X-rite has built a really fun color challenge game for rearranging preselected colors in order of gradation.
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.
Truthfully this isn’t a very educational game. But even with all the seemingly pointless goals of this game, it’s a whole lot of fun.
Color Theory is a web-based platforming game where you move through puzzles based on colored blocks. You hit color switches to make those colors become passable objects, while the others become blocks you can climb. You run through each level searching for the exit door hidden between these colored blocks.
It may not teach you about color theory but it’s still a very creative game for graphic designers who want to kill some time in the browser.