All You Need To Know About Wireframes

Design wireframes

A mobile UI wireframe or a website serve as a blueprint which is a visual interface highlighting the webpage’s structure and the relationship within the pages and applications in case of mobile Ui wireframes. Wireframes is all about the gathering requirements which form the basic step before any design work starts. These are designed to focus only on layout without any visual element distractions. Wireframes can be created using a variety of software applications, for example: Powerpoint, photoshop, Microsoft – Excel, Word, Visio… and Illustrator. Important Elements of Mobile UI Wireframes should include all the important elements of a Web page. Below listed elements might be included while designing wireframes.



Important Elements :

Wireframes should include all the important elements of a Web page.

These include:


Company logo

Content area sections

Search function

User login areas if appropriate 

Functional Wireframes :

It’s the type of wireframes which is used in building web applications and mobile Ui wireframes. These wireframes share information about each piece of content, field, button and widget along with the structure of each page. It is also responsible for what page is rendered by an action. It provides a map of the entire page in the Web site, its function and features. Such wireframes might even cover the message which can be rendered by a behaviour. A web application is designed to provide tools or solution to the user so a  wireframe is designed keeping the type of users in mind.

Wireframe Content

Below are the description and information content of each wireframe

Title: Appears at the top of every wireframe. The title describes the purpose of the wireframe. Each is numbered with a nomenclature as 1.0 or 1.1

How to get here: Describes how the user got to this section

Concept or Purpose or Objective: Describes what the objective or purpose is for this section.

Data or content: Describes all the data on the section including any buttons or icons.

If/Then: Describes an user behavior and the result that might be rendered due to that behavior

Navigation Links/Buttons: Describes any navigation links on the page.

Error conditions: Describes any errors that may result from a user behavior and what message wireframe they will receive.

Uses of Wireframes:

Wireframes provide highly effective support at low-cost for iterative design

Wireframes are very easy to create and easy to change

Wireframes are much easier to change than a coded web application.

Wireframes are best defense against poorly conceived, ineffective designs

They have wide applications in Mobile UI and they are referred to as mobile UI wireframes.

Developers use wireframes to get a more tangible grasp of the site’s functionality while the graphic designers use wireframes to push the user interface (UI) process


Shilpa Adhlakha

© Copyright 2015-2019 Oodles studio . All rights reserved.