What are wireframes? A beginner's guide

What are wireframes? A beginner's guide

The world of design can be a little intimidating to a non-designer. Whether you are familiar with design processes or not, the jargon that comes with any design conversation can confuse even the most passionate project manager, team leader, or entrepreneur. Wireframes are only a small part of the design process yet; they can often be a sticking point for non-designers.

We’re here to help demystify the world of wireframes and to tell you that wireframing isn’t all that difficult once you get your head around the basics.

At Uizard, we’re hard at work democratizing the design process so more people can participate in developing a user experience in a more hands-on way. As a non-designer gearing up to tackle your own digital design project, you might be wondering what a wireframe is, what it does, and whether you even need to create one in the first place. Spoiler alert: you do. Here is our beginner’s guide to wireframes.

What is a wireframe?

Wireframes defined: A wireframe is a schematic or blueprint of an app or web page, or a set of pages, that conveys the structure, layout, and placement of content, as well as the general intent and purpose of a design.

A wireframe is a two-dimensional diagrammatic representation of a web page, app, or site that helps to demonstrate the core structure and functionality of a design or concept. Wireframes typically contain placeholder text and imagery, which allows the creator to demonstrate to developers, team members, and stakeholders the purpose and intent of a concept, before the development of assets even begins.

In our 5-step guide to wireframing with Uizard, we define wireframes this way: “A wireframe illustrates the hierarchy of all of the basic elements on a screen: text, imagery, navigation, and calls-to-action.” Pretty straightforward, right? Almost.

Wireframes can vary depending on both device type and the level of detail required in your design. To truly get to grips with wireframes and the surrounding terminology, it’s important to understand the different types of wireframe as well as the varying degrees of wireframe fidelity.

What is a wireframe for a website?

The most common form of wireframe you’ll likely see out in the wild is a website wireframe in desktop aspect ratio. A website wireframe is essentially a blueprint of a website or webpage that is designed to demonstrate the core functionality. Unlike a mockup, a website wireframe has no graphical elements or text within content blocks, typically using placeholders instead. A wireframe for a desktop website will usually be presented in the standard desktop aspect ratio (16:9).

Website compatibility on mobile devices has also become much more important in recent years. Historically, mobile accessibility was less of a concern however, today, for many sites, a mobile-first approach has been adopted. For this reason, you may also see website wireframes presented in mobile or tablet aspect ratio (screen size).

What is a wireframe for an app?

App wireframes, like website wireframes, function as a schematic to demonstrate the core structure and functionality of an app design. Although the presentation is similar to website wireframes (with placeholder images and text, and links between wireframe pages), app wireframes differ greatly in how they dictate the user journey, regardless of whether the app is mobile, or tablet based.

It’s worth remembering the distinction between an app wireframe and a mobile site wireframe here. Apps are downloaded directly to a handheld device, whereas mobile websites are browser-based sites that are typically a responsive version of the desktop site.

Wireframe fidelity

Regardless of device, with wireframing, the concept of fidelity (the extent of design detail included, e.g., color, typography, imagery) is instrumental to serving your design objective during the design process. What type of device you are designing for is also super relevant, with screen resolution and different UX considerations being key factors between device types.

What is a low-fidelity wireframe?

Low-fidelity wireframes are basic layouts of what content goes where and how pages relate to one another. These are most often whiteboard sketches or grayscale renderings and are your starting point while you’re building out your wider concept.

low-fidelity wireframe
Example of a low-fidelity wireframe in Uizard

What is a medium-fidelity wireframe?

Medium-fidelity wireframes present a more accurate representation of each page’s content hierarchy, positioning and flow of calls-to-action, and proportional placements of key interface elements. They include placeholder imagery, iconography, and lorem ipsum text. Mid-fidelity wireframes show your idea in the development stage and reflect input from users, team members, and stakeholders gathered throughout testing and iteration.

medium fidelity wireframe
Example of a mid-fidelity wireframe in Uizard

What is a high-fidelity wireframe?

High-fidelity wireframes tend to be known as design mockups because their primary function is to illustrate a visual design direction. They are polished to include branding, imagery, and representative copy to give a sense of the final product. Sometimes these are produced early in a design process to dazzle stakeholders, but this can be a slippery slope of over-promising and under-delivering if the UX isn’t properly worked out at this point. You can find out more about mockups in our mockups explained guide.

high fidelity wireframe or mockup
Example of a mid-fidelity wireframe in Uizard

Why use wireframes?

Easy-to-use design tools (like Uizard) have become increasingly sophisticated. More than ever, it is possible to cut out steps of the process and move straight to stunningly designed mockups or prototypes. In fact, we provide a whole host of mobile app templates and web templates to allow you to do just that. Who doesn’t love purpose-built design templates with best practice design systems embedded into them, right?

This doesn’t mean that the days of wireframing are over though. Essentially, it all comes down to the needs of the individual. If you are a founder wanting to get your concept off the ground as quickly as possible, a design template is perfect for you. If you are a project manager or a client manager in an agency, for example, you may be creating a complex structure that requires sign-off from multiple stakeholders. You may even be part of a team that has just mocked up an entire website on a whiteboard!

What we’re trying to say is… it really depends on the scope of your project. On a traditional design team, wireframes are typically the domain of UX designers, but more and more, non-designers are getting involved with the early design process, helping to facilitate collaboration with stakeholders, whilst also helping the development team ensure that the digital solution being built is coherent and aligned with the needs of the end-user.

How to create a wireframe

Design needs to evolve through feedback and iteration. Starting with something that feels "too real" influences how comfortable a user is in giving constructive criticism that might provide important insights and potentially limits the ingenuity of solutions a team might consider. People tend to skip wireframing because they don’t want to add extra steps to their design process, but with a tool like Uizard, you can keep up the momentum while allowing your idea to develop and mature, regardless of what design experience or know-how you have.

sketch to wireframe
Transform rough sketches into editable screens with Uizard

To get started, simply sign up to Uizard for free and start building your wireframe in our easy-to-use interface. You can even invite team members, collaborate with stakeholders, and show off your amazing designs to friends with a click of a button!

Uizard is an AI-powered design assistant that supports a seamless transition from wireframe to mockup to prototype, all in one place. Visualize your next big idea with Uizard now.