What are wireframes? A beginner's guide

What are wireframes? A beginner's guide

The world of design can be a little intimidating for a non-designer. 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.

Whether you are planning on designing a mobile app, a tablet app, or something for desktop, you might be wondering what wireframes are, what they do, and whether you even need one in the first place.

If you don't know your wireframes from your wireflows then we’re here to tell you that wireframing isn’t all that difficult once you get your head around the basics. Here is our beginner’s guide to wireframes...

design template for mobile app wireframes
Mobile app wireframe template in Uizard

Skip to section:

What is a wireframe?

What is a wireframe for a website?

What is a wireframe for an app?

Why use wireframes?

How to create a wireframe for your own project

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.

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 is 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 will likely encounter 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 core functionality. Unlike a mockup, a website wireframe has no graphical elements or text and typically uses placeholders instead. A wireframe for a desktop website will usually be presented in the standard desktop aspect ratio (16:9).

website wireframe template
Uizard's website wireframe template

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 demonstrate user journeys.

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

Wireframes and fidelity

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 relevant, with screen resolution and UX considerations differing between device types.

Low-fidelity wireframes

Low-fidelity wireframes are basic layouts of what content goes where and how pages relate to one another. Low-fi wireframes are commonly illustrated as whiteboard sketches or grayscale renderings and are seen as a starting point whilst wider concepts are being built-out.

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

Medium-fidelity wireframes

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

High-fidelity wireframes

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, hi-fi wireframes 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 user experience side of things hasn't been properly worked out.

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. It is now 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!

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 to help ensure that the digital solution being built is coherent and aligned with the needs of the end-user.

How to create a wireframe for your own project

Design needs to evolve through feedback and iteration. Starting with something that feels "too real" (like an advanced prototype) can influence the type of feedback your receive. 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 whilst also allowing your idea to develop and mature, regardless of what design experience or know-how you have (you can check out some great wireframe examples in our dedicated guide if you need a little extra inspiration).

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, prototyping and wireframing tool that supports web and app design projects, all in one place. Sign up for free now and visualize your next big idea with Uizard now.