Screens
Layout only. What the product does and why is in KB-1.
The shell
Drawn once here. Every screen below is the canvas, and sits inside it.
┌──────────────┬───────────────────────────────────────────────────────────┐
│ ▣ Top Table │ Adding up Change scenario Add … │ 54px
├──────────────┼───────────────────────────────────────────────────────────┤
│ Wedding │ │
│ │ │
│ Setup │ │
│ Guests 70 │ the canvas │
│ • Plan │ │
│ │ │
│ ──────────── │ │
│ Last saved │ │
│ 14:32 │ │
└──────────────┴───────────────────────────────────────────────────────────┘
192px, chrome light, everything else
Two zones and they never mix, which is KB-5's first rule. The top bar and the rail are dark; the canvas is light. A nav row carries its count on the right, and a zero count is shown rather than hidden. The active row takes a dot and a filled background, so it does not depend on colour.
Setup, first visit
┌────────────────────────────────────────────────────────────────────────┐
│ Start from a scenario │
│ Loads a guest list and a matching room. Change anything after. │
│ │
│ ┌────────────────────┐ ┌────────────────────┐ ┌──────────────────────┐ │
│ │ Small and cosy │ │ Adding up │ │ Celebrity scale │ │
│ │ 40 guests │ │ 70 guests │ │ 200 guests │ │
│ │ 4 tables of 8, │ │ 9 tables of 8, │ │ 26 tables of 8, │ │
│ │ top table 8 │ │ top table 6 │ │ top table 8 │ │
│ │ 40 seats, none │ │ 78 seats, 8 spare │ │ 216 seats, 16 spare │ │
│ │ spare │ │ │ │ │ │
│ └────────────────────┘ └────────────────────┘ └──────────────────────┘ │
│ │
│ ────────────────── or set it up yourself ───────────────────────── │
│ │
│ [ Event name ] │
│ [ Round tables ] [ Seats each ] [ Top table ] │
│ │
│ No guests yet, so nothing to work out │
└────────────────────────────────────────────────────────────────────────┘
Scenarios lead, manual configuration sits below a divider. Nobody wants to think about table counts before they have seen the thing work.
Setup, after importing
┌────────────────────────────────────────────────────────────────────────┐
│ ( Adding up loaded ) Change scenario Guests │
│ 70 loaded │
│ [ Priya and Tom, 14 March ] │
│ Seats │
│ [ Round tables 9 ] [ Seats each 8 ] [ Top 6 ] 78 configured │
│ │
│ ┌────────────────────────────────────────────┐ Plan │
│ │ 78 seats for 70 guests. 8 spare. │ Not generated │
│ │ 9 × 8, plus a top table of 6 │ │
│ └────────────────────────────────────────────┘ [ Go to guests ] │
│ │
│ Drop to 8 tables: 70 seats for 70 guests. Exactly enough. │
└────────────────────────────────────────────────────────────────────────┘
The capacity readout is the most-read component in the product. Every figure in it is monospace, or it jitters as you type. Editing any config field detaches from the scenario and the chip reads "Custom".
Guests
┌────────────────────────────────────────────────────────────────────────┐
│ [ Search name or tag ] [ Add guest ] │
│ │
│ 70 guests · 41 bride · 27 groom · 2 both · 8 with needs │
│ ───────────────────────────────────────────────────────────────────────│
│ Name Side Role Tags Needs │
│ ───────────────────────────────────────────────────────────────────────│
│ Danny Whitaker Groom Best man (uni)(footie) ⋯ │
│ Maureen Shah Bride Mother of bride (family) Step-free ⋯ │
│ Kev Braithwaite Groom Guest (footie)(work) ⋯ │
│ ───────────────────────────────────────────────────────────────────────│
└────────────────────────────────────────────────────────────────────────┘
Dense rows, hairline separators, no cards. The list reaches 200. That is a ruling about this screen and not about the unseated list on the plan, which is a different component with a different job.
Needs shows allergies and accessibility only. Dietary preferences are not a column, because they are a catering count rather than something that changes where someone sits.
Add guest, slide-over
┌──────────────────────────────────────────────┐
│ Add guest × │
├──────────────────────────────────────────────┤
│ Who they are │
page dimmed │ [ Name ] │
behind │ [ Side ] [ Role ] [ Age ] │
│ │
│ Who they are with │
│ [ Household ] [ Partner ] │
│ [ Tags ] │
│ │
│ Keep apart from │
│ [ Search guests ] │
│ │
│ Needs and seating │
│ [ Allergies ] [ Diet ] │
│ [ Accessibility ] [ Social type ] │
├──────────────────────────────────────────────┤
│ Cancel [ Save ] │
└──────────────────────────────────────────────┘
Right-hand panel, roughly 55% width. Same panel serves add and edit. Five group headings do real work with thirteen fields. Partner and conflicts are pickers over the existing list.
Plan
The canvas splits into a header, the floorplan, and the unseated list beneath it. The side panel is a third column, 300px, and does not scroll with them.
┌──────────────────────────────────────────────────────┬───────────────────┐
│ Adding up │ Violations │
│ 78 seats for 70 guests 77% 0 0 │ 3 rules registered│
│ 8 spare · 9 × 8, top table of 6 │ │
│ Fit Pinned Unseated │ ▌Geoffrey and │
│ [ Auto-allocate ] │ ▌Barbara are not │
│ Clear allocation Clear allocation… │ ▌sitting together │
├──────────────────────────────────────────────────────┤ ▌Soft · Top table │
│ ┌────────────────────────────────────────────────┐ │ │
│ │ ( Top table · 6 of 6 seats ) │ │ ▌Gareth and │
│ │ │ │ ▌Rachel are not │
│ │ ( 1 ) ( 2 ) ( 3 ) ( 4 ) ( 5 ) │ │ ▌sitting together │
│ │ 8 of 8 8 of 8 8 of 8 8 of 8 8 of 8 │ │ ▌Soft · T1 and T2 │
│ │ │ │ │
│ │ ( 6 ) ( 7 ) ( 8 ) ( 9 ) │ │ Nothing is │
│ │ 8 of 8 8 of 8 8 of 8 0 of 8 │ │ blocking this │
│ └────────────────────────────────────────────────┘ │ plan. │
├──────────────────────────────────────────────────────┤ │
│ Unseated 0 Click a guest then a seat to … │ │
│ [ Search name or tag ] [Any side ▾][Any role ▾][Any…]│ │
│ ( Priya Shah Bride ) ( Tom Whitaker Groom ) … │ │
└──────────────────────────────────────────────────────┴───────────────────┘
Auto-allocate is the only filled button on the screen. Clearing sits beside it and is never filled, because KB-5 allows one primary action per view.
The stat trio reads fit, pinned and unseated. Fit is the plan score and opens a per-dimension breakdown when clicked, in the third column.
Hard violations list before soft ones, and within a severity, in table order. With nothing blocking, the footer says so in words. There is no green and no tick.
The grid is generated from config, not fixed. Five tables and twenty-seven both have to render, and the tables scale down to fit the height the unseated list leaves them rather than scrolling.
Seats are drawn one per seat. A round table carries them around its ring, numbered as a clock face from twelve. The top table carries them in a single row along the edge away from the room, so the guests face it, numbered left to right in the order KB-4 fixes. TT-44 builds that; today they are marks on a ring with nothing to number or point at.
Table detail
Clicking a table replaces the violations panel with that table's guests until dismissed.
│ Table 1 × │
│ 8 of 8 seats │
│ ──────────────────────────── │
│ 1 Danny Whitaker • │
│ Best man · uni, footie · │
│ livewire │
│ 2 Leah Okonjo auto │
│ Chief bridesmaid · uni · │
│ sociable │
│ 3 Kev Braithwaite auto │
│ Guest · footie, work · │
│ quiet │
│ … │
│ ┌──────────────────────────┐ │
│ │ Needs at this table │ │
│ │ 1 step-free, 1 nut │ │
│ └──────────────────────────┘ │
At two hundred guests a table is fifty-odd pixels across, which fits a number and nothing else. Without this, the largest scenario is unusable.
Each guest carries their role, their tags and their social type under the name. Those three drive the top table rule, the tag group rule and the social balance rule, so they are what a person needs in order to judge a seating and cannot read off the floorplan. A guest with none of them leaves no empty line behind. The second line is TT-44.
A filled dot is a pinned guest. Anyone placed by auto-allocate reads "auto". The needs block is omitted entirely when a table has none.
Three states that must look intentional
Each is a place where a design can read as broken rather than deliberate.
- The empty setup screen, before any guests exist
- The empty guest list
- The violations panel with one rule registered