Design Language: Why the Board Looks This Way
Line weight, stone contrast, spacing, and why the faux wood texture got cut. The reasoning behind every choice on the YiBoard board.
Good board game design is measured by how quickly you stop noticing the interface. Nothing on the board should need explaining before your first move: lines are lines, stones are stones, and the last move is obvious at a glance. Each choice below looks small on its own, and together they decide whether your first game feels smooth.
The grid comes first
The grid is the first thing that has to be right. Line weight decides how readable the stones are, since thick lines compete with the black stones and thin ones vanish on a small screen. We settled on a weight that leaves a visible gap between the stone and the lines, so a stone sitting on an intersection still shows line on all four sides.
- Fixed line weight that does not scale with board size: the 19 line and 15 line boards carry the same visual weight
- Star points only where the rules actually need them, decorative dots removed
- Outer margin set to half a stone diameter, so a stone on the edge never touches the border
Stone contrast and the last move marker
Telling black from white is the one piece of information that has to be instant. We do not use pure black and pure white: pure white glares on a bright display and pure black overpowers the grid. The actual pair is a slightly warm white against a slightly cool dark grey, which is easier to stare at for an hour.
- The last move gets a thin marker that never covers the stone, so you can always see where the opponent played
- Forbidden moves and the winning line share one color language rather than introducing a third accent
- Hover preview stays translucent: you see the result before committing, without mistaking it for a placed stone
Spacing is a finger problem, not a taste problem
The smallest reliable touch target on a phone is far bigger than the grid cells in most mockups. We sized spacing for thumbs rather than for eyes, so the distance between neighbouring intersections keeps a thumb from hitting the wrong one. The trade is that a 19 line board gets tight on a small screen, and for that case we suggest turning the phone sideways.
What we cut
- Faux wood grain: it was in the first build and looked nice, but the texture runs close to the grid direction and dark stones lose their edge against it
- Multiple stone sounds: one sample only, since a set of variants pulls attention away from the board
- Stone shadows: they add depth and make the boundary between adjacent stones harder to read
- Coordinate labels: off by default, available for people reviewing a game, otherwise it is noise
Every time someone proposes adding something, the question is whether it makes the next move easier to see. Usually the honest answer is no.
Keyboard and screen readers are the same problem
Keyboard support forced us to make the move order predictable, and a screen reader needs that same ordering. Both collapsed into one focus model, so keyboard players and screen reader users now follow the same path. The details are in /blog/keyboard-friendly-board-games.
If you just want to see the result, the fastest check is a match on the play page, and /blog/one-minute-to-play covers how long the first game takes. Background on board games returning to the browser is in /blog/board-games-browser-revival, and the about page covers the team.
FAQ
Why not make it look like a wooden board?
We tried it. The grain runs close to the grid direction, dark stones lose their edge against it, and reading a position costs an extra beat. Not worth the trade.
Does a 19 line board work on a phone?
It works, but portrait is cramped. Intersection spacing is set to the smallest reliably tappable distance, and going below that starts producing mistaps, so holding the phone sideways works better there.
Can I turn off the last move marker?
Yes. It is on by default because most people keep looking back at where the opponent just played, but if you track it yourself, turning it off removes a layer of visual noise.
Will the color scheme change later?
Themes will be added, the default will not change. The contrast on this pair was tuned over several rounds; new themes arrive as options beside it.