Wireframes vs Mockups and Why you should Sketch with Words first — Design 101

Sketch of 3 objects: a mockup with lines of text in it, 3 wavy lines representing content, and a tablet screen with a mockup.

In a Design 101 session of a 7 week design curriculum that I lead, a question came up asking what the difference was between wireframes and mockups. While the question itself can be answered quickly addressing only the ‘what’, if you get into the ‘why’ to use one over another — this is where it gets complicated and insightful, especially in the government context.

The “What” of wireframes and mockups

Wireframes

They could be very simple.

Sketch of a content template representing different elements of the template.
Sketch of a content template representing different elements of the template.
A sketch of a content template with different elements and their order on the page.

They could include multiple options.

2 sketched wireframes for employee stories pages.
2 sketched wireframes for employee stories pages.
Two sketches representing possible ways of showcasing employee stories (yes, I know, carousels are a terrible UX practice … but sometimes you lose some to win some).

Or they could represent many moving parts and pieces.

Sketch with 5 different screens of content representing a journey from one state in a design process to another.
Sketch with 5 different screens of content representing a journey from one state in a design process to another.
Sketches representing a transition from the current state of the intranet’s corporate services to an eventual, more user-centred state.

Mockups

Screenshot of Canada.ca landing page.
Screenshot of Canada.ca landing page.
A screenshot from the live Canada.ca homepage; but it could have been a mockup and you would not be able to tell the difference.

The “Why” of wireframes and mockups

Why use a wireframe?

If done right, trimming design back to the very basics of frames, allows the team to focus on what truly matters — the actual content, discussions around user needs, structure, messaging.

Presenting ideas and framing solutions in a wireframe format could also prevent stakeholders from getting too attached to a ‘specific look-and-feel of a solution’ — the Achilles heel of any design challenge. Moreover, if long term partnership and sustainability of the design are important in your project (as they should be, most of the time), sharing wireframes rather than shiny mockups with your partners communicates to them that this is still a ‘work in progress’ and that they are welcome to contribute to it, without needing to be a ‘design expert’. Jared Spool has aptly summarized this point in his recent article To Show the Value of UX, We Must Show the Work of UX, where he states:

UX design leaders include their peers and stakeholders in the design process. They don’t just wait until the end of their design process to show them their final work product. They use a variety of techniques to open up their process to others on the teams.

There are certainly some downsides to using wireframes. The main challenge is when a designer thinks that the simplicity of the medium = simplicity of reflection and effort. In other words, if the thought process that goes into creating a wireframe has not been rigorous, the wireframe can be a barrier in the design process and miss important information. This can happen for example when there is an overreliance on lorem ipsum (filler text) rather than real content, missing true problems to solve. To avoid this, you need to practice content-first design; an amazing place to start is with this comprehensive article Content First, Design Second: Prototyping with Words and Adobe XD:

In order to create the most usable interfaces, content can’t be an afterthought — words alone can define the experience of an app or website.

Another challenge is that it might be more difficult to get buy-in from your stakeholders with something that is not as polished and visually impressive. A colleague from the Nova Scotia government, Beth Fox contributed the following reflection on the topic

It was difficult to get people used to the idea of presenting wireframes to share concepts or seek approval (especially with senior decision makers)… There was a fear of showing something “unfinished and rough”. What we’ve found though, is that in the early rounds, it actually helps reinforce the idea that we might not be correct. And our investment is low on purpose, because it’s easier to change.

I personally have found wireframing in iterative loops to be a really valuable tool to get some of the assumptions out of the heads of various stakeholders.Now it’s become normalized and we rarely get complaints about the “sketch” nature of wireframes.

A graphic summarizing what wireframes are and what are their pros and cons.
Recap about wireframes: Pros — fast to produce, basic prototyping skills, less attachment from stakeholders to look-and-feel, partners feel welcome to contribute. Cons — less polished, more difficult to get buy-in, more problems if real content is an afterthought.

Why use a mockup?

But this quick buy-in comes with a number of disadvantages. The mockup takes longer to produce, making everyone, including the designer, more attached to what is in it. The stakeholders may find the mockup so appealing (as it may represent their point of view , ensure they are the first area in the organization to have a new ‘look’ or cross-off some other checkbox exercise) that it would make changing the design as a result of new insights very difficult.

Not only can a mockup jeopardize the usability of the whole project, but it can also reinforce the general cultural misconception that design is about ‘looking good’ rather than whether it is functional and helpful.

It could also turn your partners against you, as you would be perceived as showing them what looks like a finished solution without likely involving them in the process.

Finally, high-fidelity prototyping used at an early stage of a design process could create a misconception about the design work being completed and undermine resourcing and support that you may need to actually realize the design (or to do the research necessary to test the assumptions). A learner in the course summed it up well by saying, it can give “the wrong impression that something is built or it is closer to done than it really is”.

A graphic summarizing what mockups are and what are their pros and cons.
Recap about mockups: Pros — look polished, easier to get buy-in. Cons — longer to produce, more attachment from stakeholders to the presented solution, reinforces the myth that design is about “look” rather than “function”, endangers partnerships as they don’t see space to contribute, makes it seem that all work is done, no need for more time or resources.

So what should you choose? — Start with words!

Don’t get me wrong, I’ve seen the biggest step towards a more user-centred transformation of internal government services on an intranet with 200,000 pages of content happen thanks to a mockup and the persuasive storytelling of my talented colleague Chad. But most people are not Chads.

Also, personally, my most successful experiences have been forging partnerships through the most unpretentious of wireframes, using tables in Microsoft Word, and I am pretty proud of that (apparently, I am not alone, as others in the industry have been promoting sketching with words and storyframing).

A table representing different sections of a well-being web page.
A Microsoft Word table with well-being topics, section names and the prioritized order of content, based on user needs.

What worked for one person and one situation is unlikely going to work for you; there are just too many human nuances that could tip the scale.

So when deciding which method to use — wireframes or mockups or both, be strategic and consider:

  • Your objectives
  • Your stakeholders
  • Your partners
  • The nature of the content you are working with
  • Where you are in the design process and which one would be most effective and, potentially, less risky

If the above does not help, then think of design as a conversation:

  • What prototyping method will ignite and encourage conversation?
  • Which one might put an end to it?

At the end of the day, prototypes are stories, so sketch with words. Content-first design sets you up for success early on and let the content determine the shape of the design (it will do all the decision-making for you!).

A concept map of different topics related to Digital literacy.
A concept/domain map of Digital literacy and the different elements that may need to be considered from user and stakeholder perspectives.

:: digital content specialist — passionate about open learning + inclusion + collaboration + systems + stewardship + learning design + reflective practice ::

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store