Unit 11: Intro to Photoshop
Unit 12: Design Accessibility
Unit 13: Product Design Thinking
Unit 14: User Experience Design
Unit 16: Introduction to Design Portfolios
Unit 17: Portfolio Development
Unit 18: Personal Branding
Unit 19: Case Studies
Unit 20: Portfolio Website Design
Unit 21: Career Coaching
2 of 2

Wireframes

In user interface design, wireframe helps designer plan out the design before they dive deeper into styling. Wireframing abilities are important for both UI and UX designers.

In this lesson, we’ll look at what defines a wireframe, what a good wireframe does and does not include, when a wireframe is most helpful, and how you can easily get started wireframing.

What Is A Wireframe?

A wireframe is a simple visual guide that represents the skeletal framework of a website or digital product. Think of it as the blueprint for your final design. You’re providing enough detail so that everyone knows the shape of the wall, but you’re not getting so deep into it that you’re giving exact details on the type of brick the walls should be made of (that comes later). Though wireframes are most often created by designers, they need to be basic enough so that everyone from other designers, stakeholders, devs, and users can understand the ideas.

Wireframes are not the time to set anything in stone. In fact, the opposite. The power of wireframes is that they provide an opportunity to gather more information through usability research and stakeholder input. Because wireframes are so simple, people can more easily focus on functionality and the user experience rather than getting hung up on colors and other aesthetic elements.

Types of Wireframes

In a traditional design process, wireframes come after on-the-fly hand-drawn sketches and right before high-fidelity mockups or prototypes. There are two levels of wireframing, low fidelity and high fidelity — though you can go straight from a low fidelity wireframe to a prototype and skip high fidelity wireframing as a distinct step.

Low-Fidelity Wireframes

Low fidelity is the most basic type of wireframing. It’s so simplistic, that paper and pen will still suffice as a way to represent your ideas, however, creating your wireframes in Figma will allow you to easily share them and make sure your team has access to your latest thinking as you iterate. Low fidelity wireframes are done in grayscale with a focus on layout and high-level interactions. UI elements and content are represented by basic shapes like squares, triangles, circles, and lines.

Low fidelifty wireframes utilize basical shapes to communicate page structure and layout.

High-Fidelity Wireframe

High fidelity wireframing takes what you put together in the low fidelity stage and sprinkles in more of the detailed elements. High fidelity wireframes include visual markers and branding signifiers like colors, graphics, and font style. UI elements look realistic and might even include textures and shadows. At this stage, a designer might also choose to add in images and copy.

Best Practices for Creating Wireframes

There are no hard and fast rules for what you need to include in your wireframe and what you must leave out, but there are some best practices to help you get the most out of your work.

Keep Colors Simple

Colors should be grayscale: white, black, and the grays in between.

Represent graphics and images with boxes

Keep the focus on the layout by using simple symbols that relay the future placement of graphics and images. Call out video placements with a triangle as a play button on applicable boxes. Image placement can be represented as squares or rectangles with Xs through them.

When to use a wireframe

There’s almost no wrong time to use a wireframe, but there are some instances when they can be extra helpful. Whether you’re trying to explain your idea to someone, get all the stakeholders on the same page, force a group decision, or validate your plan, a wireframe presents a simple visual representation that everyone can point to.

Get stakeholders to focus — Because the magic of a wireframe lies in the simplicity, your clients, colleagues, and execs won’t get hung up on downstream details like colors and images. Instead, they’ll be forced to zero in on important structural elements.

Catch problems early — Though they don’t present the actual functionality of a page, wireframes allow you to map out how all the elements will look and interact once the design is put into a working prototype. It’s way easier to re-work part of a wireframe than it is to rebuild a prototype or web application.

Cut down on revision time — Related to catching problems early, putting an idea in front of the team or a client in a wireframe gives everyone the opportunity to chime in at a time when it’s relatively easy to adjust and revise. By getting collective feedback early, you’ll cut down on revision time later.

Decide content prioritization — Wireframes naturally reveal space constraints and the hierarchy of elements on the page, without relying on the content itself. Seeing the elements laid out anonymously will help everyone decide if the right weight is given to the most important content.

Test usability with users — When you’re testing out a new idea with someone, they don’t need to see every little detail for you to determine if the idea is going to work. Wireframes give you just enough to work with so that you can validate your approach or pinpoint where adjustments are needed.

Next, let’s talk about how to get started on wireframing.

The Process of Wireframing

Step #1: Sitemap Planning

Getting started with wireframing begins with a good sitemap. Before you create a page wireframe, a sitemap will give you some structure. This way, you’ll understand which pages you’re going to build, and how they will all connect to one another.

Most small sites may not need a sitemap. They usually just have either a single landing page, or a few common pages like Features, About, and Contact Us.

This said, as soon as your website or application becomes larger and more complex, you’ll want a sitemap.

Sitemaps provide you with a brief overview of where items exist and how they interconnect.

In our example, we will create a simple sitemap which will contain just the Home Page, Features Page, and Contact Us page.

You don’t have to spend too much time on this. Just add a few boxes to show each page, lines underneath to show sub-pages, and that’s it.

Step #2: Creating Homepage Wireframe

We are going to create our first wireframe page. If you haven’t wireframed before, the process is quite simple. Each aspect of a website is represented with a shape or simple graphic, such as:

  • boxes with diagonal lines through them to represent images
  • horizontal lines to represent paragraphs of text
  • and a circle with an L in it to represent your logo.

For the homepage, we’ll build out a slider image, menu, and logo. We’ll also give it a few labels to show what each item is.

This is also useful to organize each section into rectangles that we can later copy-paste onto other pages (especially for the header and footer).

Let’s also create another section for an introduction to the company (About Us) and a sponsor section (with logos and images of our sponsors).

As we progress through the design, we can also implement other items into the homepage, like call-to-action buttons in areas that would be appropriate.

We finalize the design with a Footer section where we add common elements such as a Contact Form, Contact Info, and reuse the Logo once more.

Step #3: Using Markup in Wireframes

The wireframe is often viewed not just by designers, but by developers, clients, and management. So it’s useful to add some markup to each part of the content. This can help guide people viewing your wireframe for the first time. I usually do this at the end of completing a page.

In our example, let’s markup the homepage and label each part of the content with red text.

Aspects you want to markup include items such as sections, titles, contact forms, and what images might be.

Note that Markup doesn’t have to literally explain what the content will eventually be – just what it represents. So instead of putting in the actual “Example of intro title”, you can label the title as “Intro Title.”

Step #4: Add Other Wireframe Components like Header, Menu, and Footer

Now that we have already created a header and footer, we can reuse them for additional pages. If you’re working digitally, you can copy-paste headers, footers, and other recurring elements into new page wireframes. (And if you are just using paper and pen, you can always use a razor and a photocopier to achieve the same effect.)

This allows your wireframe design to remain consistent. Tools like Figma will allow you to create asset components which you can also copy-paste throughout your design. You can even configure them to dynamically update other parts of your wireframe when you change your root component.

In our example, we are going to reuse components to build a features page. By creating our first features section component, we can then copy and paste it below several times to build out our entire features page in just a few minutes.

Step #5: Features Page and Contact Page

It gets easier and easier to building out additional pages once you get started with wireframing and build out some components. With the features page finished, we can create a Contact Us page. All we really have to do is add a few common elements, such as a Google Map, Contact Us form, and some basic contact details like a phone number and email address.

In this example, I have small logos for a phone and email, and large blocks to represent where they will be located on the page.

The contact form will be located below (without a box outline), as well as a Google map on the right hand side.

Step #6: Make a Mobile Responsive Wireframe

No good wireframe can exist these days without a mobile version. This is because much of the web today is viewed on mobile devices.

It’s good to know how a design might collapse down to smaller viewports. If you are have more time on your hands, you can also build out a tablet version of the responsive wireframe as well.

In our example, we build out the home page design wireframe section-by-section. Most of the rows and columns are collapsed. And since we’re on a mobile viewport, many of the images, texts and blocks reduce in size.

Because of this, it’s possible for some of the sections to still have the same amount of height as their respective desktop versions. On the other hand, some sections with lots of images (like the sponsors section) might end up having much more scroll height.

Due to this, I often also add additional markup to show which desktop version sections correspond to which responsive equivalents for the mobile version.

Conclusion

Wireframing is a quick way to get a better idea of your website or application visually. After this lesson, you should be able to get started on creating wireframes for your next design project.

Scroll to Top