Design-PRinciples
the Arcade Game

Design PRinciples
the Arcade Game

Player ONE is ready

HIGHSCORE: 999999

◍ 1 PLAYER ◍ 5 LEVELS ◍ NO COINS

PRESS START

DESIGN principles ARCADE LOADED
- WE ♥ DESIGN -

DESIGN principles ARCADE LOADED
- WE ♥ DESIGN -

DESIGN principles ARCADE LOADED
- WE ♥ DESIGN -

► SELECT YOUR LEVEL

▼ OR KEEP SCROLLING ▼

LEVEL 1

Simplicity

// Simplicity

Reduce to the essentials. Over 3 rounds, remove all unnecessary ornament around the symbol – each round starts fuller, each round the clock is ticking. What remains is the clearest form.

ROUND 1/3
TIME: 6Score: 0
Tap away every unnecessary decorative element until only the heart remains. But be quick ... the timer is running.
ROUND 1/3
TIME: 6Score: 0
Tap away every unnecessary decorative element until only the heart remains. But be quick ... the timer is running.

LEVEL 2

HIERARCHY

// HIERARCHY

Visual hierarchy guides the eye: the most important thing is biggest, boldest or comes first. Size, weight and position signal what should be read first.

ROUND: 1 / 3
Score: 0
Reorder the elements so the most prominent is on top and the least prominent is at the bottom.

LEVEL 3

Order

// Order

What belongs together is grouped and aligned. A grid, even spacing and clean edges create calm and make content quick to scan.

ROUND 1 / 3
Time: 6sScore: 0
Drag the scattered cards into the empty grid slots. Once every card snaps neatly into place, order is restored. You're playing against the clock.
Hint: Always place cards in order 1→N on the next slot.

LEVEL 4

White Space

// White Space

Empty space is not wasted space. It gives elements room to breathe, guides the eye and keeps a layout from feeling overloaded.

ROUND: 1 / 3
TIME: 2sScore: 0
Find the one tile with more white space and tap it. Here too the timer is ticking.

LEVEL 5

Contrast

// CONTRAST

Differences in color, size or brightness make elements stand out and direct attention. Strong contrast means visibility and emphasis — and it's crucial for legibility.

ROUND 1 / 3
Score: 0
Find the minimum contrast ratio per WCAG AAA for large text. You only have three attempts – if you don't make it, you get no points and go back to round 1.

HIGH SCORE

GOOD DESIGN

You cleared every level. The highest score is good design — and the next project is your next game ;-)


READY FOR YOUR NEXT GAME PROJECT?

You cleared every level. The highest score is good design — and the next project is your next game ;-)

READY FOR YOUR NEXT GAME PROJECT?

◄ MOVE ME ►

HANSEN.INK GAMES

by Hansen.ink | Graphic & Web Design

Create a free website with Framer, the website builder loved by startups, designers and agencies.