What is a wireframe?

What is a wireframe in UX? A wireframe is a basic illustration of a user interface to demonstrate the placement of content and functionality of elements on that screen. It acts as a tool to help designers visualize a product.

What is the purpose of wireframing?

Wireframes help convey the information architecture, layout, functionality, and flow of a product. In essence it is the blueprint of an app, website, or other digital product.

Wireframes typically use basic objects and placeholders during the design process. This allows a designer to quickly build multiple layouts, flows and elements during the early stages of the design process. This is an important step to follow in that it allows designers to explore a wide range of ideas quickly and efficiently without committing to a full visual design. The goal of wireframing is to establish the layout and overall functionality of your product.

How to wireframe

Wireframes can be created with drawing by hand or by using a digital tool. Regardless of the choice, the basic steps are the same:

• Start by creating the ‘frame’ of the screen you want to design
• List out the functionality and content that needs to go into this screen
  • Keep in mind, this is meant to be a basic illustration so you do not need to know the exact content, just a basic idea of what that should be
• Create the content using shapes and text to represent the elements on that screen
  • Shapes: Use these to represent visual elements like images, icons, and videos.
  • Text: Use Lorem Ipsum or shapes to represent the text. You can also use actual text content if you know it.
• Notate interactions or navigation points when necessary and make connections to other screens to represent the user flow

Notes:

• Avoid using high fidelity elements when possible. You do not want to get bogged down in the proper use of color for elements. The goal is to quickly build many different of wireframes in order to explore different paths until you have found the proper one to follow.