What Is a Wireframe? + How to Create One

Key takeaways

A wireframe is a low-detail, structural blueprint of a digital interface that shows layout, content hierarchy, and functionality without visual design.

• A successful wireframe offers a representation of a product in the UX concept & design stages.

• Creating a wireframe can be a helpful practice for graphic designers, UX/UI designers, and web designers.

• You can learn more about making wireframes and UX design by exploring careers in user experience.

A wireframe helps finalize a user-experience (UX) concept before a team begins coding a website or app. After reading more about UX and related careers, consider enrolling in the Google UX Design Professional Certificate. You’ll learn in-demand skills, get AI training from Google experts, and can learn at your own pace.

A wireframe is a digital sketch, mock-up, or prototype showing each element's position within a user interface, including text, buttons, images, videos, and menus. It 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 their low- and mid-fidelity counterparts and most closely resemble the sites or apps they represent. A high-fidelity wireframe may include visual details such as typography, colors, and images. 

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.

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 call-to-action (CTA) buttons, and horizontal lines for text and headlines. It should also account for the dimensions of different devices and screens. You don’t need 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 below, 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. 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 [1].

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.

Who uses wireframes?

Wireframing is a process that people in a variety of roles can use to bring ideas to life. 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. 

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

• 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.

• 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. 

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.

Get started in wireframe UX design on Coursera

Taking online courses can be a great way to learn wireframing techniques, UX design, and coding skills for building digital experiences users love. If you’re not looking to begin a course right now, check out these free resources:

• Watch our video on YouTube: UX Design for Beginners: Design Products People Love

• Subscribe to our newsletter: Career chat

• Read about a Coursera UX Learner: From Informatics to Interface Design: Meet Salma

Drive your future career forward with a Coursera Plus subscription. When you enroll in either the monthly or annual option, you’ll gain access to over 10,000 courses—just check the course page to make sure your selection is available.

订阅 Coursera Plus，培养就业技能

开始为期 7 天的免费试用

• 
• 
• 
• 

开始为期 7 天的免费试用

Frequently Asked Questions (FAQs)