Learn about wireframes and their importance in the design process.

Wireframes

An overhead view of several designers working at a round table, collaborating in a brainstorming session. Designers are hard at work iterating ideas to find a solution.

Congratulations! This concludes our introductory lesson on wireframes. Before we wrap things up, let’s go over some key topics we discussed in this lesson:
* _Information architecture_ is the organization, prioritization, and presentation of information within products, websites, and other software applications.
* _User workflows_ are the complete paths a user takes to complete an objective. The goal is to create simple, intuitive, and time-efficient flow paths within wireframes.
* When wireframing, three _requirements_ should be followed: user needs, stakeholder goals, and technical capabilities.
* A _wireframe_ is a low-fidelity design that represents the layout of a digital interface without the use of design elements. Wireframes serve as a visual representation of how a digital product will be configured and how it meets _requirements_.
* Sketching is an exercise to quickly iterate through concepts before transitioning to a refined wireframe created with a digital design tool.
* When designing _wireframe elements_, it is best to keep element design simple, distinct, and consistent.
* It is highly recommended to sketch your wireframe ideas prior to refining them in a digital tool. Sketching facilitates speed to a solution.
* A _prototype_ builds upon the structural layout of a wireframe through the integration of simple design elements and interactivity. 
* User testing is an excellent method to garner feedback to enhance usability during product development.
* Digital tools provide the ability to transition from wireframes to functional prototypes.

Next in the line-up, we will be diving into our first wireframe project! We will apply our knowledge from this lesson to evaluate user research requirements, sketch concepts, and create wireframes with a digital design tool.

Review

A brainstorming session featuring a piece of paper with several sketch iterations, post-it notes, pens, and a cup of coffee.

Before constructing a house, an architect creates a detailed blueprint. Builders then use that detailed blueprint as a guiding reference during the construction process. Without the blueprint, builders will not have access to important details necessary to build the house. Similarly, we create detailed wireframes upfront to guide developers when programming begins. Our goal is to establish the content layout prior to high-fidelity design and software development. Establishing content layout helps prevent costly rework downstream.

Sketching is our best friend. We love sketching! Sketching is bundled into the wireframing process as well, and this exercise helps us rapidly iterate and produce solutions, all in a low-risk environment. Altogether, wireframing is an effective method towards creating solutions while being conscientious of time and resources.

In the scope of product development, wireframes are one of the first polished deliverables that can accurately portray the final product's structure. Wireframes are an excellent resource for designers, developers, and stakeholders to understand how the interface is configured and how the wireframe meets our design requirements. 

In an architectural blueprint, annotations help define what materials are used and where to use them. Similarly, we need to communicate what content items we build our wireframes with and do so in a low-fidelity format. Lucky for us, we have _wireframe elements_ at our disposal!

Why Do We Need to Wireframe?

Wireframing is a foundational skill for UI designers across all levels of experience. Now that we are equipped with the knowledge and skills associated with wireframing and understand the role of wireframing in the design process, we ask ourselves, “What’s next?”

From our knowledge of information architecture, we know that a well-constructed site map defines all the pages that need to be built. Since we have a clear overview, we know what pages we need to make wireframes for. To achieve this, we can sketch, iterate, and create wireframes for each page within the site map. 
 
After creating all of the wireframes, how do we verify that the designs meet our requirements? Until user testing is conducted, we won’t know for sure. It is through user testing that solutions are validated. However, collaborating can help garner feedback and assist with design-related concerns before user testing.

It is important to maintain communication and collaboration with stakeholders during the wireframing process to ensure all parties are on the same page with design decisions. Once wireframe designs have been approved for the entire user workflow and all departments are in agreement, we can transition the wireframes into a low-fidelity prototype using digital tools. 

A _prototype_ builds upon the structural layout through the integration of higher-fidelity design elements and interactivity. Prototypes allow hands-on interaction and validation through user testing. User testing is an excellent method to garner feedback to enhance usability during product development.

Prototyping will be covered in much greater detail in the [Prototyping with Figma](https://www.codecademy.com/courses/intro-to-ui-ux/lessons/ui-and-ux-prototyping-with-figma) lesson.

A screenshot of a prototype built in the digital design tool, Figma. The prototype shows navigation paths to the login and registration pages from the homepage.

What’s Next?

We have discovered that sketching can be an excellent method toward establishing content layout in a fast, efficient, and iterative manner. Sketching can be achieved through pen and paper and is primarily a good starting point when iterating concepts. After sketching, digital tools are used to create higher-fidelity wireframes.

Digital design tools such as [Figma](https://www.figma.com), [Adobe XD](https://www.adobe.com/products/xd.html), [Sketch](https://www.sketch.com), and [Balsamiq](https://balsamiq.com) are commonly used to create wireframes. Digital tools also allow us to transition from wireframe to prototype because initial work and design ideation has been established on a digital platform.

Design tools are constantly evolving and adding new features that streamline the process for developers, such as generating CSS code associated with specific design elements.

When creating wireframes, we suggest using whatever approach works best for you. We encourage designers to sketch concepts before creating refined wireframes. This approach is preferred by many designers, however, it is not mandatory.

A screenshot of the workspace used to create wireframes and prototypes in the digital design tool, Figma.

Wireframing Tools

Wireframe example of a homepage featuring: logo, login button, navigation, image, header, email input, password input, sign up button.

As a reminder, we know that through effective user research, we can have a better understanding of: 
* User goals and tasks for the application
* User pain points, behaviors, and desires
* Current workflows used to complete these tasks

Before we create a wireframe, understanding the problem is critical to finding the appropriate solution.

Now let's dive in!

The wireframing process can begin with sketching concepts using pen and paper. Sketching allows us to focus on creating a functional, intuitive, and efficient concept while limiting the use of decorative features (i.e., color palettes, images, typography, etc.). 

The location of page elements should provide a solution to our design requirements. It is recommended to prioritize valuable information in an “easy-to-reach” place based on content hierarchy. In the art shown in the workspace, we have provided some example wireframes of varying levels of fidelity that feature several distinct page elements.

In each of these examples, we used a _navigation bar_, or navbar for short. A _navigation bar_ houses an interface’s most important navigational elements. Navbars are often located at the top of the page to offer easy access when a page loads. The navbar in these examples is home to the following elements:
* Logo: Located in the top left corner, a viewer's gaze naturally starts here and drifts down and to the right, similar to reading a book. Logos can also double as a homepage link when selected.
* Button, login: Located left of the menu icon, this button navigates returning users to the login page.
* Navigation menu: Located in the top right corner, navigation menus allow users to find information that isn’t prioritized on the homepage.

Below the navigation bar is often the following elements:
* Image: A well-placed image at the top of the page, known as a hero image, can help set the tone for the information below.
* Header: A header is used to inform what the purpose of the page is; encouraging new users to sign up.
* Input, email: We ask new users to provide an email they want to be associated with the account.
* Input, password: We ask users to provide a password that will be linked to the account.
* Button, sign up: New users confirm the creation of their account by selecting the sign-up button.

It is important to annotate when wireframing. Annotations clearly define wireframe element functionality and describe how the wireframe meets requirements.

Focusing too much on details such as straight lines, spacing, and alignment may slow down the process. Let the creativity flow and experiment with many wireframe iterations. More precise and effective solutions to our requirements will emerge through iteration. Gathering and incorporating feedback between iterations is also an effective method for refining wireframe designs.

Next up, we learn how digital design tools assist in the wireframing process.

How Do We Make a Wireframe?

Wait a second... information architecture?! Didn't I click on the wireframes lesson?

Yup, you sure did! Welcome to our Wireframes Lesson! Here we will discover what wireframes are, why wireframes are important, and how to make our own wireframes. Before we get started, we have one very important concept to discuss that will lay the groundwork for what's to come: _Information architecture_.

_Information architecture_ is the organization, prioritization, and presentation of information within products, websites, and other software applications. Effective information architecture is important because it allows users to complete tasks with the least effort required. We can visually represent this information using a _site map_.

A _site map_ is a high-level view representing content hierarchy within a digital interface. Site maps define all pages that need to be built. We have included a site map that features an assortment of tiered blocks interconnected with lines. The blocks represent pages, and the lines represent hierarchical relationships between specific pages. The homepage in this example is at the top of the site map and encompasses the catalog, resources, and community pages. Challenges, articles, videos, and projects are sub-pages under the resources page. Navigational paths throughout the pages are called _user workflows_.

_User workflows_ illustrate the path a user takes to complete a task. In this site map, a path from homepage -> resources -> projects is considered a user workflow.

Site maps can consist of many pages, and each page within a digital interface will need to be designed. So how do we go about designing these pages?

We start with _wireframes_!

A site map being built by a construction crew. The homepage in this example is at the top of the site map and encompasses the catalog, resources, and community pages. Challenges, articles, videos, and projects are sub-pages under the resources page. Forums, chat, and stories are sub-pages under the community page.

Information Architecture

A wireframe is constructed with simple, low-fidelity _wireframe elements_ that can help communicate ideas during the wireframing process. Low-fidelity wireframe elements act as placeholders for high-fidelity content that will eventually occupy that space. For example, when wireframing, we can represent the placement of a logo by writing “logo” instead of populating that space with an actual logo. This is what makes wireframing an effective and efficient method toward establishing content layout rather than content design. 

Wireframe elements can be represented in many different ways. Common representations include, but are not limited to:
* Logos: A rectangle labeled as “logo.”
* Navigation: A rectangle containing navigation links (i.e., “home,” “about us,” “services,” “contact,” etc.) or navigation placeholders (i.e., “nav 1,” “nav 2,” “nav 3,” etc.). 
* Search fields: A rectangle labeled “search,” sometimes featuring a magnifying glass.
* Text: A rectangle labeled “text field.” Placeholder text (i.e., Lorem ipsum) or horizontal lines spanning the height and width of the approximated text container is another text representation.
* Buttons: A rectangle or pill-shaped container labeled as “button.”
* Images: A box labeled “image” with diagonal lines between opposing corners.
* Videos: A box labeled “video” with diagonal lines between opposing corners and a circle centered in the box containing a video play arrow.

In addition to using simple, distinct, and consistent wireframe elements, labeling helps communicate what is represented within the interface. A properly annotated wireframe provides detailed information on how something works so that stakeholders can understand the concept being presented. 

Now that we know the wireframe elements in our toolkit, let's discover how to make a wireframe of our very own!

Common representation of low-fidelity wireframe elements: navigation, link, scrollbar, notification, button, search field, drop-down menu, image, check box, text field, radio button, video, pagination.

Wireframe Elements

For one moment, let’s imagine the most elegant website ever created. The website has a font that's oh-so-perfect, has intuitive and accessible navigation, and has a world-class interface design. Pair that with dream-like animations, and we’ve got ourselves a visual ensemble that the likes have never seen. This website is a masterpiece! 

After imagining such a well-constructed and well-designed user interface, we ask ourselves, “How was that website built?” There is a lot of behind-the-scenes brainstorming, planning, and drafting required to design a website like the one we imagined. As users, we see the finished product, but as designers, we get to create the product!

One of the first steps toward designing a digital interface is to create _wireframes_.

A _wireframe_ is a low-fidelity representation of a digital interface. What determines whether a design is low or high-fidelity comes down to the amount of detail and the medium it was created in. For example, low-fidelity designs might appear more like pen and paper sketching. In contrast, we can create high-fidelity designs with digital tools to achieve a higher state of quality and detail. Wireframes are low-fidelity because there are no interactive features and they are created using low-fidelity elements. These low-fidelity elements serve as placeholders for high-fidelity design elements which include, but are not limited to: logos, navigation, search fields, text, buttons, images, and videos. Decorative interface elements such as color palettes, images, and typography will be introduced later in the design process. For now, let’s focus on building an intuitive layout that meets our three main _requirements_: 
1. User needs
2. Stakeholder goals
3. Technical capabilities

It is important to note that wireframes are distinct from sketches. Sketching is used to create quick concepts and to iterate ideas using pen and paper. Wireframes are made with digital tools and are low-fidelity representations of digital interfaces. 

Wireframing occurs in the early design stage and is a cross-functional, iterative process, usually involving many stakeholders across an organization. The process starts from a _problem_ or _pain point_ to ensure that product development meets a real user need and that the whole team is aligned around the same goals. Wireframing is the bridge between user research and proof of concept. With the help of user research, we can create purposeful wireframe concepts that can transition into functional prototypes. To get a refresher on the design process, please refer to the [Key Methodologies of UI and UX Design Lesson](https://www.codecademy.com/courses/intro-to-ui-ux/lessons/ui-and-ux-key-methodologies).

Now that we know what a wireframe is, let's dive into why wireframing is important in the scope of product development.

Side-by-side comparison of the Codecademy homepage depicted as a wireframe versus the actual Codecademy homepage.