Are hi-fi mockups really needed?

Sketching a mug is not the same as actually throwing and glazing a ceramic mug.

Drawing a house is not the same as building a house.

Writing a recipe is not the same as cooking the food.

Everything we make gets refined in the actual making. The preparatory work sets the course, but we learn things as we go, and we iterate as needed. Plans are good and helpful, but the plan always gets modified in the making.

In the past, when I've built a website, I followed a process with the following steps:

1. Conduct contextual research to understand what the needs are. Sometimes that involves interviewing research participants. Sometimes it means just listening to what the client needs. Scale and scope dictates depth of research.
2. Design some lo-fi wireframes to figure out general site structure and flow.
3. Trick out the lo-fi wireframes and make them hi-fi. This helps validate color schemes image selection, etc.
4. Build the website, tweaking elements of the hi-fi mockup as needed.
   Depending on the complexity of the site or surrounding integrations, I may also draw up some process diagrams to show data flow or user journeys.

This process has served me well, but I'm beginning to question the need for designing hi-fi mockups before fleshing things out during build. I think research is always necessary—even if it's secondary research and brief conversations with the client. It's important to have a clear picture of what the site needs to do before you go off pushing pixels in cyberspace. At the same time, I'm finding that it's sufficient for me to plan the information architecture, draft up some lo-fi wireframes, and then work on implementing those as hi-fi pages in WordPress.

Rich Tabor, Product Lead at Automattic and Brian Gardner, Principal Developer Advocate at WP Engine discussed this idea a few months back, which inspired me to test this approach:

Brian Gardner: I know that WordPress is not out to feature parity Figma, and I know that Figma has become "the relative defacto design tool" sort of replacing Adobe Photoshop, Sketch, and all that kind of stuff. And I know that a lot of people in various conversations have said "Oh, I wish WordPress was more like Figma," which is kind of a ridiculous statement when you think about it because they're really two different things.

However, one thing I have appreciated…[is] the ability to rename groups and blocks inside of List View…and I can make the case—to some degree—that unless it was like a really sophisticated project there's almost not a need to use Figma at a light level.¹

The reality is that hi-fi mockups will never be as high-fidelity as the actual site. In construction, hi-fi architectural renderings give you a good idea of what a building will be like, but they're a far cry from actually standing in the building. Likewise, Figma gives a great impression of what a site will be like, but it's not the same as actually navigating the site on desktop and mobile.

In my current project, I'm working on a site that involves custom taxonomies, custom fields, and custom post types. Figma can help me understand what those pages/template could look like, but it couldn't help me understand how to implement them. For that, I need to work directly in WordPress.

I can see the use case for hi-fi mockups if you're designing a huge app with hundreds of screens and states with lots of microcopy and interations and you need to walk through those with a team of designers and developers before implementing anything. In that case, having the details nailed down makes sense. But for the solo designer/developer, or for smaller teams, I think it's best to set a trajectory with some strong wireframes and then prototype using the real tools, whether that's WordPress or some other platform. The "typical" or "expected" process can actually get in the way of iteration, and speed in iteration is how you reach the finish line. For the fastest results, get as close to the material as possible.