Home / Blog / Mockup

MockupOCTOBER 18, 2024

Mockups that become fast websites, not pretty pictures

A gorgeous mockup that ignores loading, layout shift and thumbs is a promise the build can't keep. Here's how we prototype with intent.

Clean code on a screen representing lean web builds

Design the loading states first

Before the hero gets polished, we sketch what it looks like at second zero: skeleton blocks, font fallbacks, the order things appear. If the loading state feels calm, the finished page will feel instant — because perceived speed is designed, not compiled.

Budget every element

Each mockup ships with a weight budget: so many images, so many fonts, so much JavaScript. A carousel that costs 400KB has to earn its place against a static grid that costs 40KB. Clients love this conversation because it turns taste into arithmetic.

Prototype on the worst phone, not the best monitor

We review every prototype on a three-year-old mid-range phone over throttled 4G. If it stutters there, the design changes — fewer web fonts, smaller hero video, native-feeling interactions. Flagships forgive everything; real users carry everything else.

The takeaway

A mockup is a contract with the build. Ours include loading, weight and device notes from day one, which is why our web design projects launch fast and stay fast.

Next: A handoff playbook clients praise Discuss Your Project