Rootline Web Co.Rootline Web Co. home
Case study · Rootline Scholarship build · Party decor · Aurora, Colorado
Scholarship build · Her first revision round

Almost everything I wanted to do was on her list of nos.

Confetti Committed Creations makes party decor by hand. Banners, cake toppers, layered number centerpieces. She won the scholarship, filled out her intake, and handed me a list of things she didn’t want that ruled out most of how I build. Best thing she could have given me.

0.2 mleaf litter
Where this stands

One round in

Four directions went out at one link. She picked two, The Pennant and The Layer, so I merged them into one home page on the same link: her palette pulled out of the logo, the brighter backgrounds she asked for, the banner builder rebuilt from her real order form. She approved that, and the whole site got built in it, all 29 pages.

Then I kept making calls as the real pages came together. I tried them on the home page only, with every other page still in the styling she had signed off, and showed her the two side by side. She chose to carry them through the rest of the site rather than keep them on the home page.

I’m almost done with her first revision round now. She has one more after it, and then it launches. Nothing is live yet, so the pictures here are the design rounds. The real thing goes in when it goes up.

I’m posting it this early on purpose. The decisions worth reading about all happen before launch and nobody shows them.

It’s a scholarship build, so Kristen isn’t paying for it. I give away one full custom build every three months. Same work, no invoice.

The Confetti Committed Creations home page with the new direction on it, next to the Birthday Themes and Questions pages still in the earlier approved styling
The calls tried on the home page first, with every other page still in the styling she had signed off.
The home page, Birthday Themes and Questions pages of the Confetti Committed Creations site all in the same finished design
The same design carried through every page. One language across all 29.
0.6 mtopsoil
The actual problem

The impulse buy was dying in her inbox

Someone fills out her form, she emails back a free mock-up, they go back and forth, she invoices, then she makes it. Every step is an email.

Somebody who wants a banner for a party in two weeks doesn’t always survive a week of that. Excitement peaks in the first ten minutes and the process asks them to wait. That gap is a website problem, not a business problem.

Her other one: customers kept getting surprised by what the cardstock actually looks like in person. She asked for a page showing her real colors, and she was right to.

1.1 mthe root zone
The intake

Eight things she didn’t want

A client who tells you exactly what they hate is doing you a favor. I took every one of these literally.

  1. 01

    No white backgrounds

    A hard no, not a preference. That alone kills the easy version of most layouts.

  2. 02

    Nothing cookie cutter

    Elements that are hers, not ones that are there because they're easy to code.

  3. 03

    Title Case In Headlines

    Her capitalization, kept exactly, everywhere.

  4. 04

    No ragged grid rows

    No tall rectangle next to a short square leaving a gap. Space between sections is fine. Inside a grid it isn't.

  5. 05

    No dead space in photos

    She wanted the box sizes so she could shoot to them instead of forcing photos to fit.

  6. 06

    No giant background images

    No full bleed hero photo, which is how nearly every site like this gets built.

  7. 07

    No carousels

    Everything visible, nothing rotating.

  8. 08

    Nothing moving around

    Drifting objects distract her. That one rules out most of what I reach for.

That list kills full bleed photography, motion, the rotating hero and the loose editorial grid. Basically everything I’m known for.

1.8 mhardpan
How I started

Four home pages at one link

Rather than commit a whole site to a direction I was guessing at, I built four different home pages and put them at one link with a bar to flip between them. Same content in all four, so only structure and mood change.

  1. 01

    The Pennant

    The site strung like one of her banners. Pennant lines open every section, headlines screen printed with a real ink offset, cards die cut with a clipped corner and a colored spine.

  2. 02

    The Cut Sheet

    The site as stacked cardstock. Every section a sheet with a scalloped cut edge overlapping the one below, every card two offset paper layers.

  3. 03

    The Worktable

    Her cutting mat. A measured grid under the page, specs in tabular figures, registration marks, and a punched index card rail doing the job of the nav.

  4. 04

    The Layer

    Mine. Motion, and a Calm Mode toggle that turns all of it off.

The four home page directions side by side: The Pennant, The Cut Sheet, The Worktable and The Layer
All four, as she saw them: the same content in four different structures and moods.

Four real pathways, and none of them cost her a revision round. That’s the whole point. They sit in front of the rounds, so the rounds she does spend go on refining something she already picked.

The fourth one is mine. She had ruled out movement and I still thought it suited her, so I built my version once and said so. No obligation. Showing the idea once beats quietly ignoring what she asked for.

2.6 msubsoil
The rule I design by

Her nos were about restlessness, not boldness

A client’s restrictions are never a reason to ship a plain site. When someone bans what I normally reach for, my job is finding where my craft and their limits meet.

So I reread her list. Every item is about things that move, rotate, sprawl or leave holes. None of them say quiet. She didn’t ask for a plain site, she asked for a still one.

So I moved the craft into what holds still: material, type, shape, depth, detail. And the material was right there. She makes cut layered cardstock, so I built the sites out of paper. Strung pennants, scalloped edges with real shadows, offset backing sheets, die cut corners, punched index cards, registration marks, a cutting mat grid.

All static. All hers. Not one rule broken.

3.4 mclay
The unglamorous part

Fifteen themes became sixteen

Her no ragged rows rule sounds like styling. It’s arithmetic. Fifteen only divides evenly at three and five across, so at two or four the last row rags.

The fix wasn’t clever CSS, it was a sixteenth tile: “Your Own Idea”, linking to the banner builder. Sixteen divides at two, four and eight. Even at every breakpoint, and it catches the person whose theme isn’t listed.

Same on the colors page. Sixty papers in one grid instead of thirty-four solids alone, because sixty divides at two, three, four and six.

4.3 mparent material
The centerpiece

A banner builder traced from her own order form

This is the piece aimed at that week of email. Pick your wording, shape, lettering, up to three colors and any extras, and an SVG draws the banner as you go. One button writes the whole thing into the order form below it, so nothing gets typed twice.

I wasn’t going to guess at her shapes. I went through every banner she has photographed and recorded how each one is actually cut. Ten shapes, all real, each labeled with the set it came from.

The nineteen lettering styles are numbered exactly like her own order form, so style eleven on the site and style eleven in her inbox are the same thing. Matching her paperwork instead of inventing my own is the difference between a tool she uses and one she works around.

5.2 mthe deep
The color library

Sixty real papers

34 solids, 14 foils, 12 glitters. I sampled every hex from a photo of the actual paper instead of picking colors that looked nice, because the whole point is that what you see is what shows up. Foils and glitters get a real gradient mixed from their own color so they catch light instead of going flat.

Pick up to three and watch them land on a pennant preview. It only reacts to a click, so it lives inside her no movement rule.

6.1 mbedrock
By the numbers

Where the first iteration landed

Measured against the built site, not a mockup.

  • 4Home page directions, built for real at one link. Pages she could click through, not pictures of designs.
  • 0Revision rounds spent on them.
  • 60Real cardstock papers in the color library. Every hex sampled from a photo of her actual stock.
  • 10Pennant shapes, traced from how her banners are really cut.
  • 29Pages, every one statically rendered and crawlable.
  • $0What the stack costs her a month. Everything on free plans, in her name.
  • 0JavaScript frameworks. No React, no jQuery, no tracking bundle.

One that isn’t up there: the home page is 11,500 pixels tall on a phone. Everything she wanted on it would have run double that, so I made calls. Eight themes behind a See All instead of sixteen, occasions two across, the builder moved onto its own page. A phone isn’t a desktop with narrower columns.

7.0 mgroundwater
What happens next

One more round, then launch

What the merged direction is made of: The Layer’s frame, The Pennant’s strung line opening each section and its dimensional headline type, sections alternating in the four colors out of her logo. She wanted brighter backgrounds than any of the four had. Right about that too.

One thing is deliberately open. She hasn’t decided whether to take payment up front or keep invoicing after a mock-up, so I haven’t built checkout. Building it before she decides means building it twice.

Her second round comes after this one, and then it goes live. I’ll update this at launch, and again at thirty to sixty days with whatever actually happened.

Your website should be yours.

If you have a list of things you don’t want, bring it. That list is the most useful thing you can hand me.