Slow & Steady — A Podcast by ARTILLERY
Last time we talked about wireframes, the website’s blueprint. Today we’re taking it one step further: turning those wireframes into something that actually looks like a website.
If your website is like a town, wireframes are the street map.
Mockups are when we start building the actual buildings.
John shares a wild example of an architectural firm that can project a life-size house outline onto the floor of a warehouse, so you can literally walk through it before anything is built. That is the exact idea behind mockups. It’s the closest thing to seeing the finished product early, while changes are still easy.
And in a world where it’s tempting to “just build it already” (especially with AI), this episode is your reminder: skipping mockups can cost you more time, more frustration, and more revisions later.
Episode at a Glance
Action step:
When you review mockups, focus on the big stuff first: messaging, hierarchy, and clarity. If the only changes are text and images, approve the design and save the small tweaks for development.
Main idea:
Mockups are the bridge between planning and building. They merge the style tile and wireframe into a high-fidelity preview of the website, so everyone can align before development starts.
Why it matters:
Mockups protect the project. They create clear checkpoints, prevent “this isn’t what I pictured” moments, and make it easier to keep scope, approvals, and expectations clean.
Big analogy:
Town → Address → Foundation → Architecture → Map →
Now: Buildings. Mockups are the 3D rendering of the town before it’s built.
Quick tool:
Figma. Collaborative mockups, shared libraries, variables, and clickable prototypes.
Listen & Subscribe
Podcast page: https://artillerymedia.com/podcast/
Apple Podcasts: https://podcasts.apple.com/us/podcast/slow-steady-a-podcast-by-artillery/id1840249614
Spotify: https://open.spotify.com/show/37ZzVcI8N7xnEDqkap2vCW?si=70b138e65b8c42ca
Follow along:
Instagram: https://www.instagram.com/artillery_media/?hl=en
Jake on X: https://x.com/jakekramer15?lang=en
Facebook: https://www.facebook.com/artillerymedia
Contact us: https://artillerymedia.com/contact/
Previous Episodes
Ep. 01 — The Domain
https://artillerymedia.com/ep-01-the-domain-your-websites-digital-address/
Ep. 02 — Website Hosting
https://artillerymedia.com/ep-02-website-hosting-setting-the-foundation/
Ep. 03 — Moodboards & Style Tiles
https://artillerymedia.com/2025/11/ep-03-capturing-the-design-vision-moodboards-style-tiles/
Ep. 04 — Content Outlines & Wireframes
https://artillerymedia.com/ep-04-building-the-blueprint-content-outlines-and-wireframes/
Highlights & Timestamps
00:00–02:10 — Welcome back + where mockups fit
Wireframes were the blueprint. Mockups are the next step. The “town” analogy continues: street map to buildings.
02:10–05:45 — Should you skip mockups and go straight to build?
Jake and John talk through the temptation to jump straight into a page builder, plus the pros and cons of that approach.
05:45–11:10 — Recon Report: Eclipse Auctions and the $995 moment
John walks through a real project where the wireframe technically included the $995 flat fee, but the mockup made it impossible to miss. That shift changed the whole site.
11:10–13:05 — Why mockups create better ideas
You get time to “simmer.” The design becomes real, and better decisions surface because you can finally see it.
13:05–20:15 — Tools: Photoshop to Figma, and why the switch mattered
John explains his evolution from Fireworks to Photoshop to prototyping tools like XD and Figma, and what changed when variables and shared libraries entered the picture.
20:15–24:45 — Client reactions and how approvals usually go
Most mockups are approved quickly because wireframes did the heavy lifting. Sometimes a project needs more rounds, but alignment is still the point.
24:45–27:10 — Why we don’t always give clients full commenting powers
A helpful discussion on expertise, decision fatigue, and why “capability” can create unnecessary nitpicking.
27:10–31:50 — Consistency is what makes design pop
Colors, fonts, border radius, reusable sections, and systems. The behind-the-scenes rules clients don’t always notice, but always feel.
31:50–35:55 — When can you skip mockups?
Coming-soon pages, quick turn projects, and repeatable layout systems (like template-based websites) are cases where you can move faster.
35:55–38:10 — How close is a mockup to the final site?
John calls it about 95% close, with the last 5% coming down to responsiveness, browsers, accessibility tools, and real-world variables.
38:10–end — Wrap-up + what’s next
Mockups bridge the gap. Next up: development, where mockups turn into a functioning website.
Bringing Wireframes to Life (Plain-English Guide)
Think of this episode as the moment your site stops being a plan and starts being something you can actually react to.
Wireframes answer:
“What goes where?”
Mockups answer:
“What does this really feel like?”
Mockups are where the style tile and wireframe get married. Same structure, now with real typography, real spacing, real visual hierarchy, and real clarity.
What Mockups Help You Decide
- Is the most important message impossible to miss?
- Does the page feel calm and obvious, or busy and confusing?
- Are we consistent with buttons, spacing, colors, and layout patterns?
- Does this look like a professional brand, or like a patchwork of ideas?
- If someone only skims for 10 seconds, do they get it?
Case Study: Eclipse Auctions and the $995 Flat Fee Breakthrough
Eclipse Auctions’ big differentiator is simple: $995 flat fee. No commission. No buyer premium.
In the wireframe, that idea technically existed, but it lived inside paragraph copy. Easy to miss.
During the mockup phase, John did what mockups are designed to do: he reconsidered hierarchy once he could actually see the page. The solution was not more copy. It was emphasis.
The $995 became large, clear, and instantly understood.
That change does not happen when you skip mockups and go straight into production. It happens when you give the idea room to breathe, and you give the team room to think.
Inside Our Arsenal: Figma (Why It Wins)
Figma makes mockups faster and cleaner because:
- You can update a color once and it updates everywhere
- Shared styles keep typography consistent
- Multiple designers can work in the same file
- Prototypes can be clickable for walkthroughs
- It reduces “where did we use that font size?” confusion
Photoshop can make beautiful mockups. But it is not built for systems. Figma is.
And when you are designing a full website experience, systems are the whole game.
How to Give Better Mockup Feedback
Here’s the filter we recommend:
Focus on:
- Clarity and hierarchy
- Brand feel
- Consistency
- What you notice first
- Whether the call to action feels obvious
Hold loosely:
- Text and photos (these are often easier to finalize in development)
- Tiny spacing tweaks
- Micro-preferences like “make it pop” without a reason
A helpful question is:
“If a stranger landed here, would they understand what we do in 5 seconds?”
When It’s OK to Skip Mockups
Mockups are valuable, but not always necessary.
You can often skip mockups when:
- It’s a simple coming-soon page
- You need something up fast, and perfection is not the goal
- You’re using a repeatable system with proven layouts
- It’s a smaller add-on project for an existing client
But for custom websites where messaging matters, mockups are one of the best protection steps you have.
Call to Action
Want help turning your blueprint into a website that looks real, feels clear, and stays aligned with strategy?
Start here: https://artillerymedia.com/contact/
Show Credits
Hosts: Jake Kramer & John Wooten
Produced by: ARTILLERY — Lincoln, Nebraska
Slow & Steady — A Podcast by ARTILLERY
🎧 https://artillerymedia.com/podcast/
