Types of wireframes: Which one to choose?

Creating wireframes is a really important step in defining the UI and UX workflow.Wireframes serve as a communication tool to convey ideas about screen layouts, like blueprints are used in architecture.There are various types of wireframes that you can create to assist in software development. Wireframes can be in the form of a simple pencil sketch on paper , created digitally, interactive prototype showing produ ct flow,or something in between all these. 

Every team has its nuances when it comes to defining wireframing process, but typically there are three different types of wireframes

  • Low Fidelity Wireframes
  • High Fidelity Wireframes
  • Thumbnail Wireframes
wireframe fidelity

Fidelity

Fidelity in current context refers to the amount of details in particular wireframe.

LOW-FIDELITY WIREFRAMES: Focus on user flow and layouts

HIGH-FIDELITY WIREFRAMES: Focus on usability and design

THUMBNAIL WIREFRAMES: Focus on ideation and high level view

Low Fidelity Wireframes

A low-fidelity wireframe is an initial stage of any interface or system, here we just do barebones drawing with minimal details. It’s typically loosely drawn sketch and only highlights the specific elements on the page.

Key Points:

  • Focuses on layout
  • Less details
  • Rough sketch 

High Fidelity Wireframes

A high-fidelity wireframe in a way is an extension to the initial version of low fidelity wireframe. This kind of wireframe is created with more details and is more polished. It’s a more realistic rendering of content. 

High Fidelity Wireframes

Key Points :

  • Focuses on realistic content
  • More polished
  • Detailed 

Thumbnail Wireframes

Thumbnail wireframe are a high level visualization of layout ideas. They provide a quick visual of the hierarchy of content without getting involved into larger and more detailed wireframe. 

Thumbnail wireframes

Key Points :

  • High level view
  • Easy to brainstorm different ideas

Low Fidelity Wireframe vs. High Fidelity Wireframes vs. Thumbnail Wireframes

Low Fidelity Wireframe vs. High Fidelity Wireframes vs. Thumbnail Wireframes

I hope you liked the post on different types of wireframe. Please comment and leave your suggestions.

Please follow and like us:
error

Leave a Reply

Your email address will not be published. Required fields are marked *