Wireframing Basics - Part 1

This is the first article of Wireframing basics series, in this article series we are going to learn about basics of wireframing, design principles, importance of wireframes etc. So lets start with understanding 'Wireframes'.


A wireframe is a two-dimensional illustration of a page’s interface that represent information hierarchy, functionality & content of a page.

Wireframes presents solutions (ideas & concepts) in better way than concept note.

Wireframes include

Important elements & their positions (header, footer, navigation, content etc.)
  • Grouping of information (menu links, content)
  • Labeling of content (navigation links label, content label)
  • Place holders, content text (images, description)

5 Planes of UX

There are five planes of user experience design as per James Garrett, Strategy, Scope, Structure, Skeleton and Surface. Wireframing work comes under 4th plane, “Skeleton

Types of wireframes

Wireframes  can be divided in to 2 categories based on detailing, presentation, behavior and estimates.

Low Fidelity Wireframes

  • Basic paper sketches, digital basic structure
  • Containing information placeholders and navigation

Tools: Paper sketches, Balasmiq, MS Office

High Fidelity Wireframes

  •  Detailed screen design with clickable functionality and interaction.
  • Information presentation in details.

Tools: Axure, MS office, Just in mind etc.

About Author:

Abhishek Jain


Post a Comment

Popular Posts