Sharpen Your Skills With Fun Online Games for Designers

Successful designers routinely upskill and reskill to reinforce fundamentals used across tools, projects, and disciplines. However, finding extra time for learning during the workweek isn’t easy. Fortunately, online gaming is a fun and educational way for UI/UX designers to sharpen their skills and acquire new ones. Through interactive and immersive (and often free) online gaming experiences, you can hone technical skills such as alignment, typography, and color theory.

In addition to learning new design techniques, I’ve found that playing online games puts me in a lighter mood, boosts my creativity, and helps me make better use of core design principles. Whenever I have spare time or I’m facing a stubborn design problem, I play one of these games and come away with a fresh perspective.

Enhance Your Sense of Alignment

Alignment is a fundamental design principle that guides visual composition and supports usability and readability.

It’s Centred That is great for training your sense of alignment and helping you catch spacing mistakes quickly. The objective is to determine whether a dot is centered inside a shape. It’s a simple concept, but the game is challenging because the dots are often placed agonizingly close to center. The game builds compositional awareness by forcing you to consider geometry and find reference points in overlapping and adjacent shapes.

Expand Your Typeface Design Knowledge

Understanding the nuances of typefaces can help designers establish visual hierarchy, ensure text is legible, and better communicate the meaning of copy.

The game I shot the serif tests how fast you can recognize serif fonts. To start, you’re presented with two letters, one of which is a serif font, and are required to “shoot the serif” by clicking on it before you run out of time. As you progress, you’re shown more and more letters simultaneously, making it harder to find and shoot the different serif styles.

This game will keep you on your toes! I play it every week, and I’m always surprised by how challenging it is after a few rounds.

Typewar is another typeface trainer, one that challenges your ability to identify different typefaces. In each round, you’re shown a glyph and must choose the correct typeface name from a pair of options. You gain or lose points for how you answer the question, and the amount of points awarded at the end depends on how many other players answered the same question correctly. The instant feedback, real-time statistics, and exposure to little-known fonts will motivate you to keep learning.

Improve Your Eye for Kerning

One way to improve the readability of digital text is to ensure effective kerning, or the spacing between characters. Kerning often flies under designers’ radar because it’s predefined in each typeface’s font files. But it’s helpful to know how to adjust kerning when the relationship between characters seems off, or if you need to create a bespoke logotype or font for a client.

Kern Type helps you fine-tune your kerning skills by testing your ability to correctly space letters within words. For every word you kern, you receive a score out of 100 and the option to toggle between three views: your spacing, the optimal spacing, and a combination of both for comparison.

I keep going back to this game because it’s hard to score 100, and it reminds me that there’s always room to improve.

Upgrade Your Color Game

By updgrading your color skills, you can make smarter and more meaningful decisions across a spectrum of design projects and disciplines. Color is a game that challenges you to identify hues and saturation, as well as complementary, analogous, triadic, and tetradic color pairings. The interface shows an interactive color wheel with a highlighted color in the center. You must determine the color (or colors) inside the color wheel in 10 seconds or less, a task that grows in difficulty as you attempt to match colors for triadic and tetradic color schemes.

Refine Your Vector Technique

Vector-based tools such as Figma, Sketch, and Adobe Illustrator allow designers to create digital graphics that scale without losing quality—unlike pixel images, which lose resolution as they increase in size. But drawing and manipulating vector shapes and curves can be a tricky process.

The Boolean Game teaches you about Boolean operations that are used to quickly construct and modify 2D shapes in vector-based design tools. In the game, you are shown a shape to replicate. After a few seconds, the shape transforms into an outline. On the left of the screen are several shapes that you can drag into the outline to reproduce the final shape. At the bottom of the screen are four Boolean operations: union, subtract, intersect, and difference. Clicking the Continue button triggers a step-by-step animation that shows you how to merge the shapes using the chosen Boolean operation. When an incorrect operation is chosen, this animation helps you visualize your mistakes.

Shape Type is another vector game to try. In it, the player is presented with a letter that needs to be reshaped into its correct form by dragging different anchor points and given a similarity score out of 100. Like Kern Type, you can also toggle between three views to compare your result to the original shape. In addition to refining your vector drawing abilities, Shape Type is a great way to get an up-close look at the anatomical elements of different typefaces.

One last game that will help you boost your vector skills is The Bézier Game, which helps you create more precise graphics using the pen tool. Intro tutorials explain how to use controls, such as alt and shift, to position anchor points and manipulate Bézier handles. The game teaches you how to draw simple geometric shapes along with more complex shapes, such as a heart and a car, with as few anchor points, or nodes, as possible. To keep things interesting, you get a certain number of nodes for each level, and the game keeps a running tally of the nodes you don’t use.

I like this game because it helps me visualize the relationship between anchor point placement and bezier handle angles, leading to smoother lines and curves.

Brush Up On Basic Coding

Whether for career development or collaboration with developers, understanding the basics of HTML and CSS makes a designer a considerable asset to multidisciplinary teams. Moreover, front-end programming knowledge helps designers temper their ideas with realistic parameters.

Flexbox Froggy breaks down the basics of coding step by step. It teaches CSS flexbox, a CSS3 web layout model that makes UI component positioning easier by enabling alignment control, spacing, and wrapping elements on webpages with just one or two lines of code.

In the game, you help a mischievous frog and his pals hop across the screen by writing lines of CSS code. At each level, a mini tutorial above the code editor describes the different commands you can use. As you write the code on the left side of the screen, the corresponding changes occur on the right. If the frog reaches the lilypad, the code is correct.

Boost Your UI/UX Knowledge

Online games can also help designers improve their UI/UX knowledge and create frictionless experiences that increase conversion rates and ROI.

Can’t Unsee enriches your overall UI/UX abilities by testing your knowledge of design concepts, such as hierarchy, contrast, alignment, typography, and component styling. The screen shows two design components and asks you to select the more user-friendly option. Components may look identical to the untrained eye, but an expert designer should be able to tell them apart by noticing small differences between the elements, such as misaligned text or uneven padding.

Make the Most of Online Design Games

I’m often amazed by how fast the design industry evolves. Sometimes, the pressure to keep pace with new tools and techniques can feel overwhelming and stifle my creativity. I do my best design work when I approach problems with a childlike spirit, which is why I enjoy these games so much: They allow me to learn and practice while maintaining a sense of play and wonder.

Whether you’re looking to reskill, upskill, or learn a new UI/UX technique, online design games can help you test and grow your artistic and technical chops. As Pablo Picasso once said, “I am always doing that which I cannot do, in order that I may learn how to do it.”