What are wireframes? A guide to UI wireframing
The world of UI design can be a little intimidating. 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. What is a wireframe? How do I create one? Which online wireframing tool should I use to get the most out of my project?
The truth is, wireframing isn't all that complicated once you get your head around the basics. In its simplest terms, you can think of a wireframe as the blueprint of your website or app design; how you create your wireframes and ensure they adhere to the right standards for your design project is the tricky part.
Don't know your wireframes from your wireflows? We’re here to help. Here is our beginner’s guide to wireframes and wireframing...
Skip to section:
What are wireframes in UI design?
What is a wireframe for a website?
What is a wireframe for an app?
How to create a UI wireframe for your own project
What is a wireframe?
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.
Wireframes can be created in several ways, typically though, they are often sketched by hand or created digitally. Check out the clickable example of a wireframe below to get a better understanding of the feel of a wireframe (you can navigate the wireframe via the clickable links in yellow).
What are wireframes in UI design?
Wireframing is one of the most important steps when designing apps, websites, or UI systems. A UI 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).
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 UI 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.
Mid fidelity wireframes
Mid 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. Medium fidelity wireframes show your idea in the development stage and reflect input from users, team members, and stakeholders gathered throughout testing and iteration.
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.
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 UI templates and web UI 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 UX/UI 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 UI 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 UX/UI wireframing 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).
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 online wireframing software 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.