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
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.
- 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.
Key Points :
- Focuses on realistic content
- More polished
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.
Key Points :
- High level view
- Easy to brainstorm different ideas
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.