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 includeImportant 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
- Information presentation in details.
Tools: Axure, MS office, Just in mind etc.