Paper wireframes before a first build

Hands drawing a wireframe layout in a notebook with a pen. — Fig. 2. A paper sketch used to settle the table layout before writing markup.

Before writing markup for the Durak table, I drew the layout on paper. This is not a design-process manifesto. It is a record of what the sketch had to decide so the first HTML pass would not invent a second layout halfway through.

The page has to show: the opponent's hand as a count (not the faces), the stock and the trump indicator, the current attack-defence pairs, the player's hand with ranks readable at a glance, and a single line of status ("defend", "attack", "take", "done"). Those five regions sound obvious until you try to place them on a narrow phone and on a desk monitor without two different programs.

The paper pass forced a vertical order: status, table, player hand, with the stock tucked beside the table rather than above it. Opponent count stays at the top, where a physical table would put the other player. I also marked which things are buttons (the cards in the player's hand, plus take and done) and which things are not (the opponent count, the stock). That stopped me from hanging click handlers on decorative elements later.

I do not keep the sketches as finished art. Once the markup matches the agreed order, the paper can be discarded. The useful product is the list of regions and the click map, which now lives in the note you are reading.