TwoMore

Appearance

Owner review 42 — the club hero, researched and redrawn (2026-10-16, proposal) ​

Status: Superseded — option B was chosen in review 43 · Date: 2026-10-16

Answers: "I want you to look for best practices in optimizing and improving the look of the club hero, from the photo album to the identity section below and all components on them."

Board: flat-v2-hub § 클럽 홈, group "Hero, proposal (review 42)": A, B, A with a tagline, A with no photo, A at 200%, A in dark. Library: §4 Club hero, Proposal.

What the evidence says ​

  • Carousels (NN/g, "Designing Effective Carousels"):
    • later frames get far less attention, and some people see only the first;
    • keep a set to five or fewer;
    • "indicate how many frames are present and where the user is";
    • dots are "a particularly poor cue on mobile";
    • never auto-advance on mobile.
  • Image galleries (Baymard): on mobile, people assume more images exist and swipe, so a strip of thumbnails is not needed.
  • Controls over a photo (WCAG 2.2, 1.4.11): a control needs 3:1 against what is next to it, and a photo varies, so a bare white glyph cannot promise it; a backing can. Photos themselves are exempt.
  • Apple HIG, Accessibility:
    • controls are 44 × 44 by default;
    • "about 12 points of padding around elements that include a bezel";
    • check contrast in light and dark.
  • Cover proportions: Facebook group cover 1.91:1 (third-party), Meetup and Discord 16:9 (official help pages), X header 3:1. Our 208 band on 390 is 1.875:1.
  • Identity: X, LinkedIn, Strava and Discord hang the avatar over the cover's edge (roughly half over; the library's measurements: LinkedIn 51%, X 50%, Strava 48%) and stack the name under it on one left axis.
  • Not found: no official specs were found for Band, 당근 모임, Naver Cafe, Strava clubs or the map apps. No value of theirs is cited as fact.

Today's hero, audited ​

PartTodayVerdict
Band208, the album paged, "1 / 12"Height is right; twelve frames exceed five, so most photos are never seen
Top controlsdark 40 circles in 48 targets, 8 apart; a 35% top scrimContrast is right (a backing on every glyph); the gap is tighter than Apple's ~12
Logo56, half over the band, a 2 canvas ringRight, by every reference
Name and factsbeside the logo, starting 24 below the band while the logo reaches 28 belowA second left axis a step lower than the logo: reads staggered
Facts"강남구멤버 42명"
No photo, logothe default court cover; the monogram tileRight
Loadinga grey bandCould fade in from a ThumbHash placeholder

Proposal (your pick: A or B) ​

  1. A, one left axis (recommended). The logo straddles the band at the rail, and the name and facts start 12 under it on the same axis. +16 tall. B: no overlap, the logo beside the name under the band, a compact row.
  2. Three facts: "강남구 | NTRP 3.0–4.0 | 멤버 42명". The level band is what a visitor decides on.
  3. An optional tagline, one line under the facts (clubs.tagline).
  4. Up to five featured photos.
    • The officers pick them (club_media kind featured); otherwise the band shows the five latest.
    • The first photo is the cover.
    • The counter reads "1 / 5", and the last frame opens the album.
    • Never auto-advance.
  5. Controls: keep the dark circles and the scrim, and widen the gap between neighbours to 12.
  6. Loading: a ThumbHash placeholder fading into the photo. expo-image supports it; RemoteImage passes none today, so the hash is stored at upload.

Members' faces stay out of the hero (owner review 2): they live in 멤버.

Checked: 200% (the name and the facts wrap whole), dark (the ring follows the canvas), no photo (same height, no counter). The board verifier passes every board.

Sources ​

Markdown remains the source of truth. Run yarn docs:check before handoff.