What Goes into Great Websites

People think websites are made out of pages but they’re actually made out of decisions.

Tiny ones. Hundreds of them. Some strategic, some aesthetic — and some guided by 26 years of design experience and a few typography awards along the way.

A good website doesn’t just look nice — it feels consistent, intentional, and effortless. Which is funny, because behind the scenes it’s usually a mix of design systems, responsive testing, asset wrangling, and asking yourself why Safari (or Chrome, or Firefox) is the way it is.

As a veteran in the industry with over 15 years of website building here’s my typical workflow.

1. Moodboarding: Where Vibes Become Variables

Before I build anything, I start with a moodboard for:

  • color direction
  • typography pairings
  • layout inspiration
  • overall tone

This stage matters more than people expect. Fonts alone can make a site feel premium, playful, corporate, or chaotic — and I usually test multiple combinations before committing.

Because once the typography is wrong, everything is wrong.

2. If There’s No Branding, We Build It First

Sometimes clients come in with a full brand kit.

Other times they come in with: “We want it to feel modern.”

So before the site can really take shape, I often create the foundation they don’t have yet:

  • a usable color system
  • typography that fits the brand’s tone
  • button + UI styling
  • spacing rules and layout rhythm

Even if no one calls it “branding,” this is 1000% branding work — and it’s what makes the final site feel cohesive instead of templated.

3. First Delivery: Hi-Fi Mockups

For the first major delivery, I build high-fidelity mockups directly in the staging site — not static files. I move fast when I’m working in the backend of WordPress and while I can build in Figma I feel that is an extra step that I don’t need because I know how to design AND develop the sites I create.

These mockups usually include:

  • Homepage (header, footer, global styling, typography, spacing, core UI)
  • Landing page (conversion structure + layout flexibility)
  • Product page / key template page (real content behavior)

This gives clients something they can actually click through — which makes feedback faster and way more accurate.

4. Site Structure: Menus + Blank Pages

Once the direction is approved, I build the site architecture:

  • navigation menus
  • page hierarchy
  • blank pages for the full scope

This is the unglamorous part that makes the site feel intuitive instead of like a maze but I love it because it makes a big impact seeing the menu come to life.

5. Building Pages: Unique Layouts + Templates

Next comes the full build:

  • pages with distinct layouts
  • templated pages built for consistency
  • reusable sections and components

This is where the site stops being “a design” and becomes a system — which is the only way it stays clean as it grows.

6. Images: The Most Underestimated Step

Adding images is never just uploading.

It’s:

  • learning what assets exist (and what don’t)
  • resizing and optimizing
  • cropping for angle, impact, and wow – the magic of design
  • making headers, galleries, and grids behave
  • keeping the site fast and visually balanced

This is where a site starts to feel real — and where a lot of time quietly disappears.

7. Forms + Functionality (And Testing Like a Skeptic)

Then I build and test forms:

  • contact forms
  • newsletter signups
  • inquiry / application forms
  • notifications
  • confirmations

I check:

  • required fields
  • error + success states
  • mobile usability
  • integrations (if needed)

Forms are one of the easiest ways for a site to feel broken if they’re rushed.

8. Mobile + Tablet Testing: Where Good Designs Get Stress-Tested

A website can look perfect on desktop and completely fall apart on smaller screens.

And while I do a full responsive pass near the end, mobile isn’t something I “save for later.” It’s part of the build from the very beginning.

As I’m building each page, I’m constantly checking it on at least two screen sizes — usually desktop and mobile — so I can catch layout issues early instead of rebuilding entire sections at the end.

Then once the full site is built, I do a deeper responsive sweep across:

  • mobile (multiple sizes)
  • tablets (where spacing and columns love to get weird)
  • desktop

This testing includes things like:

  • typography scale (especially headings)
  • spacing and stacked layouts
  • navigation behavior
  • tap targets (buttons that aren’t microscopic)
  • image cropping in galleries and headers
  • tablet breakpoints where designs often “almost work” but not quite

Mobile isn’t “desktop but smaller.” Tablets aren’t “big phones.”

Each breakpoint has its own layout logic — and making the site feel intentional across all of them takes real time.

9. Cross-Browser QA: Where the Weird Bugs Live

I also test the site across multiple browsers — because a design that looks perfect in one place can break (or just look slightly off) somewhere else.

Throughout the build (and especially during final QA), I’m checking the site on at least three browsers on both desktop and mobile, which usually includes:

  • Chrome
  • Safari
  • Firefox (or Edge, depending on the project)

This is where the “invisible” work happens: making sure typography renders consistently, spacing doesn’t shift, menus behave properly, and forms work the same way everywhere — not just on the device I built it on.

10. Final Polish: The Invisible Work

This is the step that makes the site feel designed.

I go through everything and refine:

  • spacing
  • typography hierarchy
  • consistency across pages
  • rhythm and alignment
  • UI details that most users won’t notice — but will absolutely feel

11. Launch Prep

Before launch, I do a full sweep:

  • broken links
  • missing images
  • layout inconsistencies
  • mobile issues
  • form testing
  • performance basics

We add in all tracking codes and containers (GA4, GTM, etc).

Then we ship.

And then, naturally, someone views it on a device I’ve never heard of. So we test and adjust.

The Highest Impact Work Is the Work You Don’t Notice

A polished website isn’t built in one magical design moment.

It’s built through iteration: font testing, spacing adjustments, mobile fixes, image optimization, and dozens of small decisions made on purpose.

Most of the work is subtle.

That’s why the final site feels effortless.

A feast of beauty, information, and ease of use for users.