Design Direction and Design Critique for Websites (Pair)

# Visual review Status: DONE — first critique of the home page, 2026-10-07. Ten rows below 3; row 9 not scored (only the default state was seen). Rows 1 and 12 both score 1: the concept is not working (see Concept check). No changes have been made yet, so nothing has been re-scored. Score the twelve rows of the rubric in this skill's `references/visual-critique.md` on the rendered page at phone and desktop width. Every row needs an observation naming route and viewport, and a concrete change. The aim is no row below 3. ## Evidence set - No browser tool. Screenshots supplied by the user, read in full: `screenshots/home-390-first-screen.png`, `home-390-scroll-1.png`, `home-390-scroll-2.png`, `home-390-scroll-3.png`, `home-390-full-page.png`, `home-1440-first-screen.png`, `home-1440-full-page.png`. Route: `/` (`site/index.html`) only. - Capture artifact, not judged: `home-390-scroll-1.png` is identical to `home-390-first-screen.png`. The full-page 390 capture covers the gap, so no part of the page went unseen. - Not seen: any state other than the default (hover, focus, pressed, email field filled, form error, form success), the 390 page with a menu open (there is no menu control in the render), 390×667 or other short phones, tablet widths, favicon, tab title, share image and a 404 page. - No `.agentic-web-studio/BRIEF.md`, `CONCEPTS.md` or `DESIGN-DIRECTION.md` exists. Purpose taken from the request: main job is getting local people to sign up for the weekly bread share, collected on Thursdays; second job is giving walk-in visitors the hatch hours. Mode: Persuade. - `site/index.html` was opened only to name selectors in the Change column; every score comes from the screenshots. ## Three-second sentence - Mobile 390: "A purple-to-pink banner says 'Freshly Baked Goodness, Every Day' with a 'Get Started' button; it could be an app start-up as easily as a bakery, and nothing mentions Thursdays, a bread share or opening hours." - Desktop 1440: "A centred purple–pink gradient hero with a slogan and 'Get Started', then three equal white cards with gradient squares; the name says bakery, the look says software landing page. Nav links on the right say 'Bread share' and 'Hours', the only hint of either job." - Squint test: one dominant mass (the gradient hero), then an even pale grey for the rest of the page: breads, share and hours squint to the same centred grey column with a small purple tick on top. The bread share, the page's main job, has no mass of its own; the only other coloured spot below the hero is the Subscribe button. First-screen finding: at both widths the eye lands on the hero headline "Freshly Baked Goodness, Every Day", then on "Get Started". The headline is a slogan, not the bread share; "Get Started" does not say what starts. At 390 the first screen ends on the first bread card. The share form begins around y≈1400 of 2363 on the full page, and the hours begin around y≈1930. ## Defaults seen - Type formula: one system sans (renders as the platform UI face) for everything, bold Title Case headings, tracked uppercase eyebrows. A habit to change: nothing in the brief asks for a system stack, and a bakery by a harbour has no reason to look like an operating system. - Fallback font: the page renders a system face; no chosen webfont appears anywhere. A habit to change (row 3). - Rows of equal rounded cards: three identical white rounded cards with shadow (Rye, Spelt, Seeded) at 1440, stacked as three at 390. A habit to change: three bread names do not need cards (rows 4, 6). - Glass panels: none. - Gradient hero: purple (#7c3aed-like) to pink diagonal gradient in the hero, repeated on the bread icons and the Subscribe button. A habit to change; nothing about bread, a hatch or a harbour asks for it (rows 7, 12). - Eyebrow above every heading: "WELCOME TO GULLSTONE", "WHAT WE BAKE", "JOIN THE COMMUNITY", "VISIT US", one per section. A habit to change; remove all four (rows 3, 4, 11). - Centred everything: every block on both widths is centred, including running text. A habit to change (row 5). - Placeholder icons: gradient rounded squares with nothing inside, one per card. A habit to change: delete them (row 6). ## Rubric (2026-10-07) | # | Criterion | Score | Observation (route/viewport) | Change | Confirmed | |---|---|---|---|---|---| | 1 | Concept visible | 1 | / 390 and 1440 first screen: no organising idea is visible. There is no hatch, no Thursday, no harbour and no bread, only a gradient field with a slogan. The one concrete idea the business has (a loaf from the hatch every Thursday) appears only in the third section. | Make the Thursday share the hero's subject. Rewrite `.hero h1` to "A loaf at the hatch, every Thursday" and put the share's email form (now in `#share`) inside `.hero` under it. Add one line of hours under the form: "Hatch open Tue–Sat 7:30–13:00, Thursdays until 18:00." Do this only after a concept has been chosen (see Concept check). | | | 2 | Hierarchy | 2 | / 1440: the eye goes headline → "Get Started" → three equal cards; the share and the hours sit lower with the same centred eyebrow–H2–paragraph weight as "Our Breads". / 390: same order, with the share starting about 1.7 screens down. The primary action is a vague white pill; the real one (Subscribe) is a smaller gradient pill far below. | Move the subscribe form into `.hero` (row 1) and delete `.hero .btn` "Get Started". Below the hero, order the sections share details → hours → breads, and cut `#breads` to a single line (row 4), so it no longer competes for second place. | | | 3 | Typography | 2 | / both: one system sans throughout, bold Title Case headings ("Freshly Baked Goodness, Every Day", "Our Breads", "Hatch Hours"), tracked caps eyebrows at about 12 px. / 1440: H1 breaks with an orphan "Day" on line 2. / 390: H2 breaks "The Thursday Bread / Share" with "Share" alone; hours times wrap to "7:30 to / 13:00". The hero deck at 390 is 4 centred lines at about 18 px, with the last word "harbour." alone. | Choose a display face and a text face that fit the concept and load them, replacing the `body` `font-family: system-ui…` stack. Set headings in sentence case. Add `h1,h2{text-wrap:balance}`, `p{text-wrap:pretty}`. `.hero h1{font-size:clamp(2.25rem,6vw,4rem);letter-spacing:-0.02em;line-height:1.05}`. `.hours td:last-child{white-space:nowrap;font-variant-numeric:tabular-nums}`. Delete every `.eyebrow`. | | | 4 | Rhythm | 2 | / both: after the hero, three sections share the same 72 px padding, the same centred eyebrow → H2 → line pattern and the same pale grey ground, so the page reads as four equal beats. At 1440 about 120 px of empty grey sits between the cards and "JOIN THE COMMUNITY", and the same again between Subscribe and "VISIT US". The share, the main job, is the shortest section on the page. | Size sections by importance. Give `#share` its own ground (one solid colour band, not the gradient) and more content: what is in the loaf, the price, the collection window. Cut `#breads` to a one-line list ("This month: rye, spelt, seeded") with no cards. Set `section{padding:48px 24px}` and let only `#share` keep 72 px or more. | | | 5 | Composition | 2 | / 1440: everything is centred on one axis: hero text, section heads, three symmetrical columns, the form and a narrow centred hours table that floats in a 1440 px field with about 520 px empty on each side. No grid is used or broken. | Set `section{text-align:left}` and `.hero{text-align:left}`. At ≥ 64em use an unequal split for the share: copy left, form and hours right (`#share{display:grid;grid-template-columns:7fr 5fr;gap:4rem}`). Put the hours table at the left edge of its column, not centred (`.hours table{margin:24px 0 0}`). | | | 6 | Image & material | 1 | / both: no photograph, drawing or texture anywhere. The only imagery is three identical gradient rounded squares in `.card .icon` that depict nothing, so Rye, Spelt and Seeded look the same. | Delete `.card .icon` and the `.card` boxes (remove something first). If imagery is wanted later, choose one rule for it, for example one tightly cropped photo of a real loaf in the hatch, used in the share section only. | | | 7 | Colour | 2 | / both: the purple–pink gradient carries the hero, every eyebrow (purple text), all three icons and the Subscribe button, so the accent is everywhere, not rationed. It has no tie to bread, a hatch or a harbour. Neutrals are cool greys (`--bg` ≈ #f9fafb, muted ≈ #6b7280). White text on the pink end of the hero is estimated from the screenshot at around 4.5:1; not measured with a tool. Card body text in mid grey on white is estimated at about 4.5–5:1, also not measured. | Replace the gradient with one solid accent used only on the subscribe button and the Thursday hours row: `.hero{background:<solid ground>}`, `button{background:var(--accent)}`. Delete the gradient on `.card .icon` (removed in row 6) and the purple on `.eyebrow` (removed in row 3). Warm the neutrals (`--bg` toward a flour or stone tone, `--ink` toward a warm near-black) and measure body and button contrast with a tool, then record the ratios here. | | | 8 | Mobile authorship | 2 | / 390: the desktop page stacked. The header shows only the name: the nav (Our breads, Bread share, Hours) is gone and nothing replaces it, so a walk-in visitor looking for hours must scroll about 2000 px. The share form starts around y≈1400 of 2363. Three tall cards take about 500 px to show three words and three short lines. Hours time cells wrap. | At ≤ 720px replace `nav{display:none}` with a two-link row in the header: "Bread share" and "Hours" (`nav{display:flex} nav a:first-child{display:none}`). Put the form in the hero (row 1), so it appears on the first screen. Remove the cards (row 6). Stop the time cells wrapping (row 3). | | | 9 | States & interaction | not seen | / 390 and 1440: only the default state was captured. Visible in that state: the email field has no visible label, only a placeholder ("Enter your email"), which disappears on typing. Not seen: hover and focus on links, "Get Started", the field and Subscribe; pressed; field error (empty or invalid email); submitting; success after subscribing. | Capture the focused field, focused Subscribe, an error on an empty submit and the success state at both widths, then score this row. Meanwhile, add a visible label above the field ("Email for your Thursday loaf") and design a success message that says what happens next ("You're in. Your first loaf is ready at the hatch on Thursday from 7:30."). | | | 10 | Micro-craft | 2 | Seams seen: the orphan "Day" (/ 1440 H1); the orphan "Share" (/ 390 H2); "harbour." alone (/ 390 deck); hours times wrapping (/ 390); the apostrophe in "We're" appears straight in the render; hours times use "7:30" next to "13:00" without tabular figures, so the column does not align on the colon; the footer holds only a copyright line, with no hours or address. Not checked (not in the screenshots): favicon, title pattern, share image, 404, `::selection`, focus rings, scrollbar. | Use a curly apostrophe (We’re). Add `.hours td:last-child{font-variant-numeric:tabular-nums;white-space:nowrap}` and write times as "07:30–13:00" with an en dash. Apply `text-wrap:balance` (row 3). Put the hatch hours and address in the `footer`. | | | 11 | Copy as design | 2 | / both: the strings are generic ("Freshly Baked Goodness, Every Day", "passionate about bread", "made with love and the finest ingredients", "Something for everyone.", "Join the community", "Get Started"); any bakery could swap them in. The share copy omits what a subscriber needs: price, what the loaf is, and when on Thursday to collect. The hours table contradicts itself: "Tuesday to Saturday 7:30 to 13:00" includes Thursday, then "Thursday 7:30 to 18:00" overrides it on the next row. | Rewrite: H1 "A loaf at the hatch, every Thursday"; deck "Sign up once. Collect a fresh loaf from our harbour hatch each Thursday, 7:30–18:00. Skip or cancel any week." (then add the price, which the page does not state). Button "Join the Thursday share". Hours rows: "Tuesday, Wednesday, Friday, Saturday · 07:30–13:00", "Thursday · 07:30–18:00 (bread share collection)", "Sunday, Monday · Closed". Delete "Something for everyone." and all four eyebrows. | | | 12 | Distinctiveness | 1 | / both: as a thumbnail this is the default gradient start-up landing page (gradient hero, centred slogan, pill button, three icon cards, email capture). Nothing would identify it as a harbour bakery with a hatch, and no convention is broken on purpose. | Do not polish this layout; choose a concept first (see Concept check). Inside any concept, the most distinctive asset the business owns is the hatch and its Thursday: make the hatch hours and the Thursday share the visual thing a person remembers. | | Concept check: rows 1 and 12 both score 1, so the current concept (if there is one) is not working: the page follows a generic start-up landing template that shows neither job. Choose a concept before more pages are built or before the changes above are polished. The project has no `CONCEPTS.md`. One direction the page's own content already supports is an **Index-first** hero built around the hatch board: Thursday share sign-up plus the week's hours as the first screen. The rows above are written so that they still apply under that concept or any other. ## Defects | Severity | Route/state | Observation | Fix | Confirmation | |---|---|---|---|---| | High | / 390 header | No navigation at phone width: the three nav links are hidden and there is no menu control, so "Hours" and "Bread share" cannot be reached except by scrolling | Row 8 change: show a two-link row ("Bread share", "Hours") in the header at ≤ 720 px | | | High | / both, `#hours` | The hours contradict: Thursday is in "Tuesday to Saturday 7:30 to 13:00" and also listed as "7:30 to 18:00" | Row 11 rewrite of the hours rows | | | Medium | / both, `#share` form | The email field has a placeholder and no visible label; the form gives no price or collection detail, so the sign-up asks for commitment without terms | Visible label (row 9); price and collection window in the share copy (row 11) | | | Low | / both, footer | The footer holds only a copyright and test-page notice; a walk-in visitor reaching the bottom finds no hours or address | Put the hatch hours and address in `footer` | | | Low | evidence | `home-390-scroll-1.png` duplicates the first screen (capture artifact); states, short phones and page furniture were not captured | Re-capture scroll 1 and the states listed in row 9 at the next round | |