What Is a Wireframe? + How to Create One

A wireframe visually represents what users will see and interact with when they land on a website, web page, or mobile app. Its purpose is to finalise a user-experience (UX) concept before 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.  

You can typically classify wireframes in terms of fidelity, which is the level of detail that determines how closely they resemble the site, page, or app they’ll ultimately become. Check out the primary distinctions below. 

• Low-fidelity wireframes are basic and rough mock-ups of a site, page, or app that show the intended position of all the elements on the screen. They typically include 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 offer a more realistic appearance than their low—and mid-fidelity counterparts and most closely resemble the sites or apps they represent. They may include visual details like typography, colours, 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 helpful 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 the following: 

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

• Graphic designers sometimes create visual concepts, including website layouts, to communicate ideas to audiences. 

• Web designers determine how a website will appear, including colours, fonts, images, and the overall layout and aesthetics that drive users’ experiences. 

• App designers determine the look and feel of a mobile application, including the visual elements, arrangement, and functionality. 

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

Wireframe benefits

Wireframes can be a valuable 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, colours, 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 finalising the features.

• A wireframe can be easy and inexpensive, reducing the trial and error and expense of building the finished product. 

Wireframe software 

Various wireframe software programs are available to visually represent your website, web page, or mobile app. The chart below provides a basic review of five wireframe software programs, including the cost, features, and scores, based on information from G2*, a site where global users review and discover software. 

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

What makes a wireframe successful? 

Whilst you can build wireframes with different levels of fidelity, using various 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 critical 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 consist of fonts, colours, or actual images. However, 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 precise. For example, you might include: “Button clicks to the checkout page in a new window.” Add 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 text lines, 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 or have found easy to navigate to get ideas for the experience you want to offer your users.

Start by describing 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. 

For 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 quick and 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 to focus less on the aesthetics of the hand-drawn sketch, as you can refine these details at a later stage of the wireframing and design process. Instead, 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. Consider cost, features, and ease of use using the table above. Read the support documentation or take tutorials on how to use the programs you’re interested in. If available, sign up for free trials before purchase to make an experience-based decision. 

4. Build your wireframe.

The next step is to build your wireframe using software and hand-drawn sketches. You may find it helpful 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 essential 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. Ask stakeholders and collaborators for input if you’re building a wireframe for professional projects. 

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 need to alter the layout altogether, turn a low- or mid-fidelity wireframe into a high-fidelity one, or go through several rounds of feedback and implementation. With a finalised wireframe, you can begin building your site or app.

Get started with Coursera

Wireframes visually represent an application or website’s layout. They allow you to explore various design scenarios and obtain feedback from others to refine the design and development process. Continue learning about wireframing techniques, UX design, and coding skills for building digital experiences users love with online courses on Coursera. Check out the options below: