What Is a Wireframe? + How to Create One

A wireframe is a visual representation of what users will see and interact with when they land on a website, web page, or mobile app. The purpose of a wireframe is to finalize a user-experience (UX) concept before actually coding a website or app. 

Think of a wireframe as a digital sketch, mock-up, or prototype showing each element's position within a user interface, including text, buttons, images, videos, and menus. A wireframe can also include information on how the site or app should function.  

Wireframes are usually classified in terms of fidelity, or how closely they resemble the site, page, or app they’ll ultimately become. Here are some distinctions: 

• Low-fidelity wireframes are the most basic and rough mock-ups of a site, page, or app, showing how all the elements will be positioned on the screen. They typically include elements like generic text and placeholders for images, headings, menus, and buttons. 

• Mid-fidelity wireframes include more detail than low-fidelity ones. Details might include more accurate spacing between elements, actual headlines, and additional design elements. 

• High-fidelity wireframes are more realistic in appearance than the low and mid-fidelity counterparts and most closely resemble the sites or apps they represent. A high-fidelity wireframe may include visual details like typography, colors, and images. 

Who uses wireframes?

Wireframing is a process that people in a variety of roles can use to bring ideas to life. Whether you’re interested in wireframes for professional or personal projects, it can be useful to investigate potential career paths and glean inspiration from how businesses use wireframes to meet real-world challenges. A few job titles you may come across in your wireframe research include: 

• UX and UI designers conduct research into how users interact with apps and websites to design engaging digital experiences. 

Read more: UI vs. UX Design: What’s the Difference?

• A graphic designer creates visual concepts, including website layouts in some cases, to communicate ideas to audiences. 

Read more: Graphic Design Jobs: 2023 Guide

• A web designer determines how a website will appear to users, including colors, fonts, images, and the overall layout and aesthetics that drive users’ experiences. 

Read more: What Does a Web Designer Do (and How Do I Become One)?

• An app designer determines the look and feel of a mobile application, including the visual elements, how they’re arranged, and the app’s functionality. 

Read more: Mobile App Development: What It Can Accomplish

In addition to the above roles, you may also discover that business owners, artists, creative designers, freelancers, educators, and hobbyists use wireframes to envision user experiences. For example, a jewelry maker creating an e-commerce website for selling jewelry and a teacher creating an app on which students access assignments can both use wireframes to brainstorm ideas. 

Wireframe benefits

Wireframes can be a useful way to launch the process of creating a website or mobile app. As you venture into wireframing, consider these benefits:  

• You can explore an early concept without making decisions about the finished product’s fonts, colors, or other design features.

• You can explore aesthetics, information architecture, and function without writing any code. 

• Collaborators and stakeholders can offer feedback on the wireframe before features are finalized.

• A wireframe can be easy and inexpensive to create and reduce the trial and error and expense of creating the finished product. 

Wireframe software 

A variety of wireframe software programs are available for creating a visual representation of your website, web page, or mobile app. We’ve reviewed five software programs in the table below and listed the cost, features and scores on G2*, a site where users review and discover software. 

*Ratings on G2 are based on users’ satisfaction with ease of use, business partnership experience, quality of support, and quality of admin. 

What makes a wireframe successful? 

While you can build wireframes with different levels of fidelity, using different software, ensuring your wireframe has the following qualities can make it easier to develop your finished product.   

1. Simplicity 

Your wireframe should focus on the most important components of your website or app concept: the page elements you’ll include, where they’ll appear, and how users will interact with them. A high-fidelity wireframe might include fonts, colors, or actual images, but you’ll still need to keep the wireframe free of clutter and information overload so collaborators can easily interpret the wireframe. 

2. Clear descriptions of usability 

Any notes you add to a wireframe should focus on describing how users will interact with page elements. These descriptions should be short and clear, for example: “Button clicks to checkout page in new window.” Include these descriptions only when usability isn’t apparent from the visuals of the wireframe. 

3. Reusable styles and symbols

Reusable styles and symbols, such as boxes for images and horizontal lines for text, can speed up the process of creating wireframes, keep wireframes consistent, and make them easier to interpret.  

Website wireframe vs. mobile app wireframe

A website wireframe and mobile app wireframe differ in several key ways, including size and layout, how users interact with the elements in the interface, and how those elements function. For example, website users can click on page elements using a mouse or tap on elements using a touch-enabled screen, while mobile app users can tap on elements to use them.    

How to create a wireframe

Ready to create your first wireframe or improve your existing wireframing workflow? Follow the steps below. 

1. Write a short description of the final product. 

If you’re researching wireframes, you may have an idea for a website, web page, or mobile app you want to bring to life. Consider looking at examples of websites or apps you enjoy using or have found easy to navigate to get ideas for the experience you want to offer your users.

Start by writing a description of what you want to create and the experience you want users to have. Writing a short description and keeping it handy can help you envision the eventual look and feel of the finished product. 

Here’s an example: 

“I’m creating a hair salon website that allows users to book appointments with stylists, review services and prices, read and post customer reviews, and peruse our gallery of hairstyles, all from the home page.” 

2. Sketch the final product by hand. 

Using your written description, begin sketching the user interface of the site or app by hand. Sketching a wireframe by hand can be a quick process and typically requires minimal effort and cost. In addition, a hand-drawn sketch can serve as a precursor to creating a digital wireframe, especially if you’ll be using wireframe software for the first time. 

Your hand-drawn sketch can include an area for navigation menus, boxes for images and CTA buttons, and horizontal lines for text and headlines. It should also account for the dimensions of different devices and screens. The key here is not to focus too much on the aesthetics of the hand-drawn sketch, as you can refine these details at a later stage of the wireframing and design process. Rather, focus on the interface’s overall layout. 

3. Select wireframe software.

When you’re ready to turn your sketch into a digital wireframe, select wireframe software that will best help you meet your goals. Using the table above, consider cost, features, and ease of use. Read the support documentation or take tutorials on how to use the programs you’re most interested in. If available, sign up for free trials before purchase so that you can make an experience-based decision. 

4. Build your wireframe.

The next step is to build your wireframe using software and your hand-drawn sketch. You may find it useful to look at wireframe examples as you build yours. Be sure to include the layout of all page elements and notes for how elements will function while excluding actual content and excessive design details. 

5. Ask others for feedback.

Getting feedback from others is an important step in creating wireframes that turn into user-friendly sites and apps. If you are building a wireframe to help you complete a personal project, enlist the help of people in your network. If you’re building a wireframe for professional projects, ask stakeholders and collaborators for input. 

Questions you might ask include:

• “How easy would this site or app be to use?” 

• “How intuitive is the layout?”

• “Are there any areas that are confusing or cluttered?”

• “What changes do you recommend?” 

6. Implement the feedback.

Once you gather feedback, the next step is to implement it in your wireframe. You may find that you need to alter the layout completely, turn a low- or mid-fidelity wireframe into a high-fidelity one, or go through several rounds of feedback and implementation. With a finalized wireframe, you can begin building your site or app.

Get started with Coursera

Taking online courses can be a great way to learn wireframing techniques, UX design, and coding skills for building digital experiences users love. Check out the options below: