Let’s be real — mindlessly scrolling Pinterest or lurking in endless Reddit threads isn’t turning you into the next UI/UX superstar. Sure, it feels productive. But are you actually leveling up?
If you’re ready to ditch the snooze-worthy tutorials and add a splash of fun to your learning, you’re in the right place. These 18 browser games and interactive challenges will sharpen your design instincts, one quick session at a time — checked and playable as of July 2026.
Visual Perception — Train Your Eye
1. Can’t Unsee
Two versions of the same interface appear side by side. Pick the better one. Sounds easy — until the differences shrink to a 2px margin or a slightly off-white background. This is the closest thing to a design review simulator in game form, and it trains the exact eye you need when polishing real product screens.
2. It’s Centred That
Is the dot perfectly centered inside the shape? That’s the only question this game asks — over and over. It sounds trivial until you miss three in a row. Built by UK agency Supremo, it maps directly to the optical-alignment judgment calls you make in every layout.
3. What the Hex
You see a hex code. You pick the matching color swatch. Being able to glance at #3B82F6 and think “mid blue” is a small superpower when you live in design tokens and style sheets — and this game trains exactly that.
4. Color
Hue, saturation, complementary, analogous, triadic, tetradic — Color runs you through the full vocabulary of color harmony in fast, timed rounds. It’s a quick way to find out whether you actually see the difference between color relationships, or just know the definitions.
Typography — Read Type Like a Pro
5. Kern Type
You drag letters into position and get scored against a typographer’s solution. Kerning is one of those details users never name but always feel — and this game gives you objective feedback on a skill that’s usually pure eyeballing.
6. Shape Type
Here you’re given a broken letterform and asked to restore its curves by adjusting anchor points. It builds the same instincts as The Bézier Game but through type — what makes a letterform look right, useful for logos, wordmarks, and custom display text.
7. The Triangle
Based on Matej Latin’s “Equilateral Triangle of a Perfect Paragraph,” this game makes you balance three variables — font size, line height, and line length — until body text actually reads well. The most directly applicable typography game on this list for anyone designing content-heavy screens.
8. Font Guesser
You pick a difficulty, then identify typefaces from a set of popular fonts — beginner through expert. It trains the same eye Typewar used to: spotting the small differences between fonts that look almost identical at a glance, with a leaderboard if you want to compete.
Vector & Tools — Master the Fundamentals
9. The Bézier Game
Taming the pen tool is a rite of passage for every designer. This game makes you trace shapes using a limited number of nodes, which teaches the economy that separates clean vector paths from lumpy ones. If you’ve been fighting with Figma’s pen tool, start here.
10. The Boolean Game
Unite, subtract, intersect, exclude — these four operations are behind almost every icon you’ve ever traced in Figma or Illustrator. This game drills the mental model of seeing complex shapes as combinations of simple ones, with step-by-step animations that show you where you went wrong.
11. Figma Ninja
If Figma is your home base, this is your cheat code. It’s a game-like Community file that teaches keyboard shortcuts and power-user tricks so you can stop hunting through menus and actually finish things. Open it in Figma and play through the challenges there.
CSS for Designers — Speak Developer
12. Flexbox Froggy
Help a frog reach its lilypad by writing CSS Flexbox. Twenty-four levels walk you from justify-content to complex multi-axis alignment. Even if you’re not a developer, understanding Flexbox makes you a much better collaborator — and explains why some of your layout ideas work better than others.
13. Grid Garden
Same concept as Flexbox Froggy but for CSS Grid — you grow a carrot garden by writing grid layout code. Together, these two games cover the CSS layout models that drive almost every modern web interface.
Design Challenges — Practice Under Pressure
14. Designercize
Select a difficulty (Easy, Medium, Hard), hit generate, get a random whiteboard challenge, and design before the timer runs out. It’s a direct simulator for the live design exercise that many companies use in interviews. If you’re job hunting, make this part of your weekly practice.
15. Sharpen
Sharpen generates random design challenge briefs — app features, marketing campaigns, product redesigns — so you’re never staring at a blank canvas with no direction. Great for portfolio building when you don’t have real client work yet.
16. Daily UI
100 daily design challenges delivered to your inbox — splash screens, dashboards, checkout flows, error states. It’s structured, low-pressure portfolio building, one screen at a time. If you commit to finishing even 30 of the 100, you’ll have a portfolio.
UX Knowledge — Build the Mental Models
17. UX Tools Challenges
Real-world UX scenarios with community solutions to compare against. It’s less of a game and more of a deliberate practice tool — you solve a UX problem, then see how other designers approached the same brief. That comparison is where the actual learning happens.
18. Laws of UX
A collection of the psychological principles that govern how people interact with interfaces — Hick’s Law, Fitts’s Law, Jakob’s Law — presented as interactive, visual cards. Not a game, but the most efficient way to internalize the theory behind every UI decision you make.
Why Gamified Tools Work
Design can feel like a grind. These tools break the monotony with quick, focused challenges that let you practice without the pressure of a real deliverable. They give you the freedom to experiment, fail without judgment, and build skills in the gaps between projects.
By turning learning into play, these games help you sharpen your attention to detail, build speed and precision, and actually enjoy getting better. That’s rare.
Ready to Level Up?
Close those tutorial tabs. Pick one game from a category where you feel weakest — typography, color, or the pen tool — and spend ten minutes. Do it twice a week and you’ll notice the difference in your work within a month.
Play hard. Learn harder. Game on.
