{"id":32581,"date":"2022-09-22T03:33:45","date_gmt":"2022-09-22T10:33:45","guid":{"rendered":"https:\/\/www.springboard.com\/blog\/?p=32581"},"modified":"2023-09-28T00:59:52","modified_gmt":"2023-09-28T07:59:52","slug":"what-is-wireframe","status":"publish","type":"post","link":"https:\/\/www.springboard.com\/blog\/design\/what-is-wireframe\/","title":{"rendered":"What Is a Wireframe? A Beginner\u2019s Guide"},"content":{"rendered":"\n

If you\u2019re an aspiring UX or UI designer, wireframing is a key skill that you can use to develop projects. It\u2019s a method used during the early stages of product development, but what exactly is a wireframe?<\/p>\n\n\n\n

To help you get a headstart in this area of study, we\u2019ve compiled a simple guide on the fundamentals of wireframing.  We\u2019ll cover what they are, what they include, how to make them, and what a good wireframe looks like.<\/p>\n\n\n\n

What Is a Wireframe?<\/h2>\n\n\n\n
\"What<\/figure>\n\n\n\n

A wireframe is a visual representation of a UI design<\/a>, often in the form of a static image of a website page or app screen. A standard wireframe is black and white and created with simple lines, boxes, and dummy text, making it quick and easy to put together. Due to their simplicity, wireframes can be utilized during development to visualize and test different layout ideas.<\/p>\n\n\n\n

Why Are Wireframes Important?<\/h2>\n\n\n\n

Wireframes are an important tool in the early stages of the product design process as they allow UI and UX designers<\/a> to quickly draw up a simple version of their abstract ideas to test their effectiveness.<\/p>\n\n\n\n

Here\u2019s what a wireframe helps designers accomplish:<\/p>\n\n\n\n

Finalize the Structure and Layout Before Investing Time and Money in Building It<\/h3>\n\n\n\n

Before front-end developers and artists get to work on creating and implementing your UI, wireframes can help you ensure that your ideas will work as intended. Creating real-to-life-sized wireframes, for instance, helps scale buttons and text to make sure everything is visible, usable, and aesthetically pleasing.<\/p>\n\n\n\n

Create a Consistent Look and Feel<\/h3>\n\n\n\n

Consistency is one of the most essential qualities for UI, website, and mobile app design<\/a>. It helps improve the usability of the product and creates the professional look and feel that users expect. Creating wireframes<\/a> for your product will help you review and refine your design, as well as show it to your colleagues and clients.<\/p>\n\n\n\n

Ensure Ease of Use and Navigation<\/h3>\n\n\n\n

Wireframes of multiple screens and menus can also help you test the structure of your UI layout. Menus need to be navigated by users who have no prior knowledge or experience of the product, which can be difficult to achieve when you have extensive knowledge yourself. Wireframes allow you to frequently test your designs and ensure that you are staying on track.<\/p>\n\n\n\n

Keep the User Front and Center<\/h3>\n\n\n\n

Thanks to their simplicity, wireframes can be used to implement some simple user testing<\/a>. User feedback helps keep the needs of the user as the main priority during the development process. <\/p>\n\n\n\n

Easily Experiment With Different Design Ideas<\/h3>\n\n\n\n

Wireframes are especially useful for testing different design ideas without taking too much time, effort, or money. Special wireframe design tools that we\u2019ll look at later allow designers to test various ideas as efficiently as possible.<\/p>\n\n\n\n

Get Feedback From Various Stakeholders on the Overall Structure at an Early Stage<\/h3>\n\n\n\n

At various stages in the UX design process<\/a>, it will be necessary to get feedback from stakeholders, clients, and other colleagues who aren\u2019t designers. In order to do this, you can present them with wireframes that can be easily comprehended and judged by anyone, regardless of their familiarity with design.<\/p>\n\n\n\n

What Does a Wireframe Include?<\/h2>\n\n\n\n

In this section, we\u2019ll cover the typical elements included in a wireframe.<\/p>\n\n\n\n

\"what
Source: GeekforGeeks<\/a><\/figcaption><\/figure>\n\n\n\n

Page Layout and Structure<\/h3>\n\n\n\n

Planning out the layout includes planning the size and placing of buttons and images on your website or mobile app, which is integral to the usability and aesthetic of your product. Planning out multiple pages also allows you to plan how your product fits together and check that menus are structured in a logical and intuitive way.<\/p>\n\n\n\n

Headers and Footer<\/h3>\n\n\n\n

Headers and footers are the banners and buttons at the top and bottom of a screen that persists on multiple pages, typically including the home button at the top, and contact buttons at the bottom. Keeping their design consistent with other elements of your UI is important to achieve a consistent look.<\/p>\n\n\n\n

Placeholder for Different Elements (Images, Videos, Links, etc.)<\/h3>\n\n\n\n

Simple wireframes often implement the use of placeholders to denote where an element will be placed within the layout. This helps to keep the wireframing process quick and simple, rather than taking the time to create and add actual images and videos.<\/p>\n\n\n

Get To Know Other\tDesign Students<\/h4>
\"Sharon<\/a>

Sharon Yeun Kim<\/p>

UX Design Intern at Colgate-Palmolive<\/p><\/div>

<\/div>

Read Story<\/a><\/p><\/div><\/div>

\"Rachel<\/a>

Rachel Millman<\/p>

Product Designer at Bonterra<\/p><\/div>

Read Story<\/a><\/p><\/div><\/div>

\"Janessa<\/a>

Janessa Poole<\/p>

Content Designer at Reforge<\/p><\/div>

Read Story<\/a><\/p><\/div><\/div><\/div><\/div>\n\n\n\n

User Journey (Navigation Elements)<\/h3>\n\n\n\n

As wireframes show different screens or pages within your product, you can use them to tell the story of a user\u2019s journey through your product. This means creating a number of screens showing the navigation systems used to get from one point to another.<\/p>\n\n\n\n

Dummy Text<\/h3>\n\n\n\n
\"what
Source: Balsamiq<\/a><\/figcaption><\/figure>\n\n\n\n

Wireframes will often be developed before many other parts of the product have been designed or finalized, so using dummy text is both necessary and a quicker solution than using the text that will appear on the final product.<\/p>\n\n\n\n

Other Elements<\/h3>\n\n\n\n

Depending on the kind of project you\u2019re involved in, there may be other interface elements you want to include in your wireframe to help design your user flow.<\/p>\n\n\n\n

What Does a Wireframe Not Include?<\/h2>\n\n\n\n

Since a wireframe is a very basic version of your user interface, there are a lot of elements that are left out or simplified.<\/p>\n\n\n\n

Visual Design (Multiple Fonts and Colors)<\/h3>\n\n\n\n
\"Visual
Source: Justinmind<\/a><\/figcaption><\/figure>\n\n\n\n

The visual design of text and other elements, while important, is a separate stage of the development process. The purpose of wireframes is primarily to design the layout of a page, so leaving out visual elements such as fonts and colors helps you to focus on the bare bones of the layout. <\/p>\n\n\n\n

Final Copy<\/h3>\n\n\n\n
\"what
Source: Justinmind<\/a><\/figcaption><\/figure>\n\n\n\n

As mentioned above, rather than using finalized product descriptions and other types of copy that your project might use, wireframes make use of dummy text for body content. A finalized copy will likely be unavailable during the wireframing stage of development, and collaborating with other teams would slow down production.<\/p>\n\n\n\n

Interaction and Animation<\/h3>\n\n\n\n
\"what
Source: Boagworld<\/a><\/figcaption><\/figure>\n\n\n\n

Although there are different types of wireframes\u2014which we\u2019ll cover later on\u2014even the most detailed types do not include interactive elements or animation. There is no code behind a wireframe. It is simply an image, and you can even draw up wireframes by hand.<\/p>\n\n\n\n

Who Uses Wireframes?<\/h2>\n\n\n\n

Wireframing is a planning method for digital products, and it can be utilized in many roles in many industries. In UI design, wireframes are used as a very early step in visual design and focus on the layout of a screen. Developers and product managers, however, will focus more on informational hierarchy, essentially planning how the information will be structured and displayed. Here are some other roles that sometimes make use of wireframes:<\/p>\n\n\n\n