Hook and Eye Company — Design Direction Options
Four directions. None of them is pre-selected. The mock-up you'll see (separate file) builds the one I am recommending — Direction A — but it is yours to ratify, reject, or redirect in the meeting. If you look at these and want a fifth direction, we build the fifth.
Each direction is one page. Skim the names first, then drop into whichever ones catch your eye.
Direction A — Graphic-Novel Primary (recommended)
The idea. Comic-book visual grammar is the site's main voice. Not cartoonish — graphic-novel in the serious sense. Bold panels, hand-lettered sans-serif display type, speech-balloon moments where they fit the content, narration bars at the top of long pages. "We build cool shit" lives over the leather-jacket-with-tiger hero image on the Home page. The Process page is actually laid out like a four-panel strip.
Why this. It does four things at once. (1) Nobody confuses it with a Wix template. (2) Nobody confuses it with a generic AI-built site — this is the opposite of what skills-based AI defaults produce. (3) It pairs attitude with professionalism, which is the exact duality you named. (4) Theater-kid audiences immediately get the register; commercial buyers read the craft and the confidence before they read the jokes.
Color. Warm paper-tone background (cream/off-white, not stark white), deep ink for text, one saturated accent color for hero moments (I'd suggest a muted red-orange or jewel green — you pick in session). Black-and-white photography for team / behind-the-scenes shots; color for portfolio work.
Type. Display face with attitude (Bangers, or a similar heavy sans-serif with character) for headlines and balloon text. Clean body face (Comic Neue is too juvenile; I'd use Inter or a similar modern humanist sans). Two fonts, maximum.
Hero moment. Jacket-with-tiger, full-bleed, with the hand-lettered tag over it. Below, a carousel of three recent projects as comic-frame stills.
Portfolio treatment. Each project is a mini-comic — one establishing panel, one close-up, one finished shot. Like a page from an art book.
Process page. Four panels: inquiry → fitting → build → final. Short narration bars walk the reader through it. Your privacy language about measurements and photos lives in the fitting panel.
Trade-offs. Gain: differentiation, memorability, a site people actually forward to friends. Give up: some commercial buyers might want a plainer register on first contact. (Mitigated by the professionalism in execution — the site reads confident, not chaotic.)
Direction B — Graphic-Novel Accent
The idea. Editorial-clean foundation, with graphic-novel moments. Most of the site reads like a well-designed magazine or museum program. The comic language shows up only where it earns its place: the hero image on Home, the Process page, one specific portfolio piece's case study.
Why this. Lower-risk version of Direction A. If we are worried about commercial buyers taking the site less seriously on first impression, this hedges — the landing page can read more grown-up, and the attitude reveals itself as they scroll.
Color. Restrained palette — one neutral (warm gray or cream), one deep tone (navy, forest, or ink), one accent used sparingly (a signature color we'd pick together).
Type. Editorial pair — a serif with presence for headlines (Playfair or similar), a clean sans for body (Inter). The comic display face appears only inside the illustrated moments.
Hero moment. Strong photograph of work-in-progress (a detailed stitch, a dressing-room moment) with a well-set headline over it. The jacket-with-tiger lives on the About/Who We Are page instead.
Portfolio treatment. Magazine-style case studies. Strong photography, long captions, occasional illustrated interludes.
Process page. Still uses the comic-panel idea, but only on this page — it becomes a signature feature rather than a recurring pattern.
Trade-offs. Gain: safer for commercial-buyer first impression; still feels custom. Give up: some of the memorability of Direction A; requires visitors to scroll before the personality shows.
Direction C — Atelier / Maker-Craft
The idea. Photograph-led. The site is built around close-up, beautifully-lit images of the work — stitches, fabric, hands cutting, shoes on a last. Typography stays quiet. The message is "look at what we make" rather than "here's what we sound like."
Why this. You said it yourself: nobody makes anything anymore. A site that leans into craft as the story differentiates by subject, not by style. Commercial buyers recognize the register immediately — this is how couture houses and independent designers present. Normies see the care and understand the pricing.
Color. Natural, material-driven — fabric-dyed warm neutrals, the colors of unfinished muslin and raw thread. Deep photographic blacks. One accent color picked from a current project.
Type. Quiet, confident — an elegant serif for display (Freight Text, GT Alpina, or similar), clean sans for body. Generous white space. Italics used carefully.
Hero moment. A single large photograph — hands working, or a piece in progress, with the tagline set small beside or below it. Jacket-with-tiger becomes one portfolio entry, not the site's voice.
Portfolio treatment. Long-form case studies, photography-led, with process captions. Think Kinfolk or The Gentlewoman applied to a costume shop.
Process page. Documentary-photography timeline. Each step is a real image of real work.
Trade-offs. Gain: commercial-partner-friendly; timeless; leans into the "I would give these people money" cue from professional visual polish. Give up: the attitude. This is the most grown-up direction, and it gives up some of the fun that theater-kid visitors will respond to.
Direction D — Theater Program
The idea. The site is laid out like a gorgeously-printed theater program or playbill. Typography-led. Bold titles, clear act/scene structure applied to the site's sections. A nod to the theater-kid register without committing to comic panels.
Why this. It honors the cultural world your audience actually comes from. Theater people recognize the register instantly. It is also less visually loud than Direction A, which some commercial buyers will prefer.
Color. Paper cream, ink black, one dramatic spot color (velvet red, or old-program-gold). Feels printed, not screen-native.
Type. Big confident display serif with personality (Playfair Display, Recoleta, or Canela) paired with a classic sans or a typewriter-inflected body face. Small caps used deliberately. Generous leading.
Hero moment. The Home page opens like the cover of a program: company name set large, a list of "this season's featured productions" (your portfolio pieces) beneath it. The jacket-with-tiger becomes the cover illustration of one specific act.
Portfolio treatment. Each project page opens like Act I, Scene i — "Dramatis Personae" (the team who worked on it), synopsis, stills, credits. Slightly theatrical. Genuinely unusual.
Process page. Three acts: Consultation, Build, Curtain Up. The measurement-and-photo privacy language sits naturally in "Consultation."
Trade-offs. Gain: distinctive cultural register; rewards the audience that actually loves Hook and Eye; typography-led which ages extremely well. Give up: readers who don't have theater in their context will read it as merely elegant rather than specifically-for-them. Less immediate pop than Direction A.
A note on the AI-look question
You flagged in our call that AI-built websites are starting to look recognizable. You are right. The pattern is: default typography, default color stacks, default component libraries, default stock photography, grid-rhythm regularity. A site built fast against defaults looks like every other site built fast against defaults.
All four directions above are designed to not land there. Each one picks a specific visual language and commits to it. That commitment is what breaks the pattern. The fastest way to make a site look AI-built is to refuse to pick a voice; the fastest way to make it look like yours is to pick one and hold it.
How to choose in the meeting
You do not need to arrive decided. The meeting is where we walk through whichever directions you want to discuss, see the recommended direction rendered as an actual mock-up (next file), and talk about what you'd keep, swap, or remix. A final choice can be a hybrid — A's hero with C's portfolio treatment, for example, or B's editorial base with D's act-structure on the Process page.
The only thing I'd recommend against is no-choice. The next step (the first posted version of the site) needs a direction to build toward. Even a provisional "try A and we can swap to B if it does not feel right after a week" gets us unblocked.
See you Friday at 11:00.