What is a Website Wireframe? A Beginner’s Guide to Website Wireframe Design

What is a wireframe for a website?

A wireframe is a very basic layout for a website or mobile app. A wireframe could be as simple as a very rough sketch, or it could be a more polished design, but they're all considered low-fidelity or medium-fidelity, which means they don't resemble the final design much.

Think of a wireframe as the frame of a house. When a house is framed, you can see the basic structure laid out in boards, but you have no idea what the final home will look like because the pretty parts—the walls, windows, doors, porches, and other elements—are added later.

Wireframes don't have to be pretty or even look like a real website or app. In fact, it's best that they're kept simple. This allows for rapid iteration. You can create twenty or more quick sketches in the time it would take you to create one pretty mockup. The simpler you keep your wireframe, the less committed you'll be to it and the easier it will be to make changes.

What is the purpose of website wireframes?

Wireframes serve as a basic structure for a website or app. Just like an artist may create a storyboard of sketches for a movie or cartoon to let people know how scenes will play out, a wireframe helps someone who is building a website or app create the structure. Wireframes allow for rapid iteration, making it quick and easy to change the layout, navigation, and appearance.

There are 3 major types of wireframes:

1. Low-fidelity (lo-fi): A low-fi wireframe looks very little like the final design. It is a simple sketch or a simple black and white graphic design. There are usually few details and may not even be any actual text, just lines or sketched boxes where features would go.
2. Medium-fidelity (mid-fi): A medium-fidelity wireframe is a bit more detailed and a little closer to a polished design. They're usually in black and white and don't contain any actual images, the same as a low-fi wireframe, but may have a little more detail, such as representations of graphical elements like buttons or image placeholders.
3. High-fidelity (hi-fi): A hi-fi wireframe goes beyond image placeholders and lorem ipsum text. A hi-fi wireframe is often a part of the prototype stage, including actual content, typography, colors and other branding elements that will be incorporated into the final website or app.

Wireframe vs mockup vs prototype

Many people use the words wireframe, mockup, and prototype interchangeably, but each of these is a different deliverable. A wireframe is a sketch or basic quick graphical layout of a website or app. While each of these website design stages have a lot in common, it is important to note the differences when it comes to building your own website or app.

A mockup is much more detailed than a wireframe and may look and feel very similar to the final design, but it is still non-functional. It serves only as a visual element to show what the product will look like. Sticking to the home building analogy, a mockup is more like a painting or 3D model to show what the final product will look like. You can't do much with it, but it gives you a lovely picture of what it will be when it's finished.

A prototype has functionality added. For example, a low-fidelity paper (sketched) wireframe can be turned into a prototype by creating several screens that people could do a mock navigation through, or a high-fidelity wireframe can be turned into a prototype in Figma, Sketch, Adobe XD, or another prototyping software package by connecting elements together to simulate the functionality of the final product. In our home building analogy, the prototype would be like a dollhouse-sized model of the real home, or a full 3D walkthrough simulation. You can see exactly what it looks like and how the rooms flow and such, but you still can't live in it.

What should be included in a website wireframe?

The elements that must be included in a wireframe will vary based on the type of website or app you're creating, what purpose it will serve, who your target demographic will be, and other factors. Generally speaking, there are major elements that nearly all wireframes should contain.

1. Navigation: Unless you're creating something that is only one page, you'll need to include elements to allow users to move between pages, including a button or link to return to the home page.
2. Logo: Most websites or apps have a logo or site name, usually located at the top left or top center of the page. In a wireframe, the logo is often just a shape used as a placeholder, or perhaps the website or company name in text.
3. Layout: A wireframe will have an overall layout that includes locations for images, text, navigation, and other elements. This is like a blueprint to follow when building the finished product.
4. Call to action: A call to action, or CTA, facilitates an action you want the user to take. For example, you might want the user to sign up to your email list or buy something. The CTA is often a button or text link, possibly with additional functionality attached like a form. There may be multiple calls-to-action, but placeholders should be included for them.

All of these elements can be (and usually should be) simple placeholders. They do not need to be specific at the wireframe stage. For example, the navigation links at the top of the page might just be lines showing where the menu will eventually go. Or the logo might just be a box or circle indicating potential placement. Remember, the purpose of a wireframe is to show the basic layout, not to choose fonts or colors or be representative of the final design.

Do you need your content ready for the wireframe?

No. You do not need any type of content ready to build your wireframe. Since a lo-fi wireframe can be as simple as a sketch with boxes and lines as placeholders, you don't even need to know things like navigation options. If you want to see what a design might look like with content, you can use placeholder text known as lorem ipsum.

Many software packages have lorem ipsum plugins that you can use to generate placeholder text, or you can just make up gibberish to get an idea of how the content will look on the page and with your chosen fonts. You could even copy text from a public domain book or Wikipedia article to stand in place of content.

How to create a wireframe

Creating a wireframe is a relatively simple process. A wireframe often starts out as a simple sketch. It doesn't need to be a pretty sketch. It doesn't even need to have straight lines. You don't need drawing skills. If you can hold a pen or pencil, you can sketch a wireframe.

If you're creating a full website or a mobile app, you will need to create multiple wireframes. For now, we'll focus on creating just one. You can repeat this process for each wireframe, as needed.

1. List needed elements

The first step in creating a wireframe is to decide what should be on the page. You will probably need elements like a logo, a navigation menu, some images, a headline, and some text or other content. You can always add elements later, but try to be as thorough as possible.

2. Create sketches

Next, you'll want to sketch out at least one basic layout for the wireframe. You can do this digitally if you prefer, but it's usually faster and easier to make iterations of your wireframe if you just sketch with a pen or pencil. The purpose of this stage is to try different layouts to arrive at one that will be easiest for users to interact with. You can create as many wireframe sketches as you want at this stage.

3. Finalize the wireframe

After you've chosen a sketch as the basis, you may want to create a more polished wireframe that you can show people to get feedback. It's never a good idea to create anything without testing it with others who could provide valuable feedback and help you improve it. You can use a program like Figma to create a more polished version of the final sketch.

4. Solicit initial feedback

Once you have a wireframe or two that you really like, seek feedback from stakeholders or potential users. Stakeholders are people who have a vested interest in the final outcome. This could be your boss, business partner, client, or people who may use the final website or app. Try not to use friends or family for this stage, as their feedback is likely to be biased and they are probably not your target market.

5. Iterate the design

Once you have feedback, you'll probably need to make some changes to your wireframe. Once you've made the changes, seek feedback again. This could be with the same people as before, or a different group depending on your needs. Continue iterating and getting feedback until you are happy with the design and the general consensus of feedback is positive.

Wireframes are essential to the website design process

It may be tempting to skip the wireframing process because you think it will take too much time, but wireframing will actually save you time in the long run. Because wireframing allows you to spot problems and change them early in the process, it can prevent huge problems that would later take much more time to fix. Once you start wireframing websites and apps, it's unlikely you'll ever want to stop.

Once you've completed your wireframe, you can use a website builder like the one provided by Mailchimp to create your website. The editor is simple and easy to use while offering flexibility and a solid variety of options that can help bring your wireframe to life in very little time. Mailchimp also offers additional services to make the most of your website, including a comprehensive customer relationship management package, and a powerful and affordable email list service. Get started with Mailchimp's website builder today.