Unit 1: Intro to Design
Unit 2: Figma Fundamentals
Unit 3: The Creative Process
Unit 4: Color Theory
Unit 5: Introduction to Illustrator
Unit 6: Typography
Unit 7: Layout
Unit 8: Typesetting
Unit 9: User Interface Design
Unit 10: Design Systems
1 of 2

Wireframing

Please watch lecture for visual examples.

What is wireframing?

Wireframing is an integral part of all digital design processes—both in product design and general web design practices. A wireframe can be thought of as the blueprint for your design.

What does a wireframe consist of?

  • Wireframes are created in greyscale and typically do not contain final assets, rather they utilize placeholder boxes or objects to represent where final assets will live and what scale and aspect ratio these final assets will take.
  • Wireframes should contain an accurate grid structure and solid foundational layout.
  • Wireframes should accurately depict space and aspect ratios of sections and elements.

Why do we create wireframes?

Wireframes act as a key tool in presenting your initial concepts for a website or application to various stakeholders—from colleagues and managers, to developers and business stakeholders.

Wireframes must accurately represent the final form your designs will take, as you will share them as an interim step before advancing to high-fidelity UI design. It is at the wireframing stage that most structural conversations occur about where elements are placed or positions, how various elements or interactions occur, and how your target users will interact with the final designs.

It is only after your wireframes have been reviewed and approved that high-fidelity design will begin. Ultimately, this saves you a lot of time in the design process, since most decisions about functionality will have been agreed upon at this stage.

Understanding fidelity

In design, we use the term ‘fidelity’ to express how fully-fleshed out a design is in it’s current form. We typically discuss fidelity in three forms:

Low-fidelity

Low-fidelity, or lo-fi, is a minimal representation of your design. Lo-fi is typically a form of thumbnailing or wireframing created in either outlines or greyscale and will have basic and minimal representation of your concept and elements on the frame.

You may uses boxes and bars for all elements, including text. You may not have final content, fonts or icons chosen yet at all.

The reason to create something in lo-fi is to get a general sense for space, grid structure, overall layout, and placement of elements on a frame. You may choose to create low-fi wireframes when you are crunched for time and need to get quick buy-in on your initial ideas or concept.

Mid-fidelity

Also known as mid-fi, this is the fidelity most useful wireframes should be created in. Mid-fi should showcase highly specific and accurate spacing and placement of elements.

While you should still be using greyscale and placeholder boxes for assets, this is when the introduction of actual content, font choices, and icons can be very important. Mid-fi should be nearly pixel-perfect—meaning you have carefully considered everything you have placed on your frame and do not anticipate much changing as you move to high-fidelity besides the introduction of UI, color, and final assets.

When sharing your mid-fi wireframes, you want your design to be as close to the final form it’s going to take as possible, so the feedback you receive is comprehensive and accounts for the expected final.

Sharing mid-fi wireframes with developers is highly encouraged and typically expected in most professional product teams. It is at this fidelity that the majority of technical capabilities, dependencies, and edge cases will be discussed. It is also common to put mid-fi wireframes forward in front of actual users during usability testing to determine viability—which you will learn more about in the UX unit.

High-fidelity

High-fidelity is what you probably envision when you think of a “design”. Hi-fi is fully fleshed out, in full color, houses all correct and final assets, and has been “skinned” with the appropriate User Interface design guidelines—whether created from scratch or sourced from a design system library.

While it is very tempting to jump straight to hi-fi, high-fidelity should not be created until your mid-fi wireframes have been reviewed, proved viable, and approved.

It is important to note that the use of these three terms may vary depending on where you find yourself working, as some teams may choose to define these terms different. Following the above as a guide in your own process is a great start, and will be similar to many other designers’ processes, but be sure to ask your colleagues and managers how they prefer to work with fidelity.

Scroll to Top