After completing your paper prototyping sessions, you should have a much better understanding of how people expect your system to work.

Perhaps participants became confused during certain tasks. Perhaps they suggested a simpler workflow. Perhaps they identified functionality that was missing altogether.

Whatever feedback you received, now is the time to use it.

The next step in the design process is to transform your paper prototype into a wireframe.

Wireframes allow you to refine the layout, organization, and navigation of your system before writing code. They bridge the gap between rough sketches and a functioning application.

What Is a Wireframe?

A wireframe is a visual model of a user interface.

It shows how information and interface elements are organized on a screen without focusing on the final visual design.

Instead of worrying about colours, logos, fonts, or graphics, wireframes emphasize questions such as:

• Where should information appear?
• How are screens connected?
• Which buttons and menus are available?
• How does a user move from one task to another?
• Which information is most important?

A wireframe helps the design team focus on structure and usability before investing time in visual design or implementation.

Why Do We Create Wireframes?

Wireframes help teams answer important design questions while changes are still easy to make.

They allow us to:

• explore different layout ideas,
• organize information clearly,
• improve navigation,
• communicate design ideas with clients and users,
• gather feedback, and
• refine the interface before development begins.

Because wireframes are much easier to modify than working software, they help reduce the cost of design changes later in the project.

Like paper prototypes, wireframes are intended to evolve through multiple rounds of feedback and refinement.

Simple Wireframes

The first type of wireframe we’ll consider in CIS3750 is a simple wireframe.

Simple wireframes focus almost entirely on layout and organization.

Images are often represented by empty boxes marked with an “X.”

Buttons, menus, headings, and form elements are labelled clearly but remain visually simple.

Most of the text is readable, allowing users to understand the purpose of each screen without becoming distracted by visual details.

At this stage, the goal is not to create an attractive interface.

The goal is to determine whether the interface is organized in a way that supports the user’s workflow.

Simple wireframes are particularly useful for collecting additional feedback after paper prototyping while still allowing major design changes to be made quickly.

More Detailed Wireframes

As the design becomes more refined, the wireframe can gradually incorporate additional visual detail.

These more detailed wireframes often include:

• realistic spacing and alignment,
• icons and images,
• typography,
• colour themes,
• branding elements, and
• more accurate representations of the finished interface.

Although these designs look much closer to the final product, they are still prototypes.

Their purpose is to evaluate and refine the design – not to produce production-ready software.

By this stage, most major decisions about the workflow and organization of the interface should already have been made.

Creating Wireframes

Many software tools can be used to create wireframes.

Professional design teams commonly use tools such as Figma and Adobe XD, although many other applications provide similar functionality.

Some developers even create interactive wireframes directly using HTML, CSS, and JavaScript.

The choice of software is far less important than the quality of the design.

A well-organized wireframe created with a simple tool is far more valuable than a visually impressive design that fails to support the user’s needs.

For this course, however, we will use Figma.

Wireframes Build on Paper Prototypes

Paper prototypes and wireframes are closely connected.

A paper prototype helps you understand what users are trying to accomplish and how they expect the system to behave.

A wireframe takes that understanding and begins organizing the interface into a structure that can eventually become a working application.

In other words, your wireframe should not be created from scratch.

It should reflect everything you learned during your paper prototyping sessions.

Looking Ahead

Wireframes provide an increasingly detailed picture of the interface you’ll eventually build.

They allow design teams to refine layouts, navigation, and user interactions before implementation begins.

In the next chapter, we’ll explore the tools and techniques used to transform these wireframes into interactive prototypes that more closely resemble the final software system.