Who says games can’t be educational? In today’s post, we’ve rounded up 20 of the coolest design-centric games that teach the basic concepts and fundamentals of design. These games help you learn about colors, fonts, typography, UI design, Photoshop and Illustrator tools, logos, and more.
The best part is that all these games are free and browser-based. You don’t have to download any app or program. These games are a fun way to learn graphic design, and can help you test and upgrade your skillset. Most of them are actually quite addictive as well. Check them out below and tell us your favourite in the comments.
1. Hex Invaders
Destroy the alien invader whose color matches the hex code displayed at the top of your screen.
2. Kerntype
Master the art of spacing between letters.
3. Color Game
A color-matching game that tests your knowledge and ability to work with colors.
4. The Bezier Game
A game to help you master the Pen Tool.
5. It’s Centred That
Test your design skills and judge wether the dots are in the middle of the given shapes.
6. Can’t Unsee
Test your attention to UI details by picking the design that is most correct.
7. Logo Design Quiz
Guess the brand with just a partial preview of its logo.
8. Better Web Type
Train your eye for web typography and learn how to kern, lead, and track the perfect paragraph.
9. I Shot The Serif
Shoot only the serif fonts within the available time to move onto the next stage.
10. The Font Game
Test your font identification skills in this tricky multiple-choice quiz.
11. What The Hex
Guess the hexadecimal code of the color on the screen.
12. Pixact.ly
How well can you estimate pixel dimensions? Draw a box that matches the given width and height, and receive scores based on how close you are.
13. Shape Type
Fix the badly shaped letters with curve-adjustment tools and create perfect letterforms of different typefaces.
14. The Boolean Game
Learn how to use boolean operations in Adobe Illustrator, Sketch, Figma, and other vector editors.
15. X-Rite Color Challenge
A free tetrachromatic test that allows you to test your color accuracy and color vision.
16. Ragtime
Fix a bad example of ragged text and make it Swiss-perfect in a specified amount of time.
17. CSS Diner
A fun game to learn and practice CSS selectors.
18. Type Connection
A typographic dating game that helps you learn how to pair typefaces.
19. Posterdle
A daily puzzle game in which you have 20 seconds and 6 guesses to figure out the movie poster.
20. Kolor
A fast-paced color-guessing game that tests your vision and color-matching skills.
Share this post with a designer friend and tell us your favourite in the comments below.