What are wireframes?

Topics Covered in this Article:

1.       What are wireframes?

2.     When wireframes to be created?

3.       Some of the advantages of wireframes?

4.       How to create wireframes?

5.       Why wireframes are required?

1.        What are wireframes?

In simple words we can say wireframe is a diagram, Team use this diagram to understand how the developed product should be.  It helps to internal and external stake holders to understand the same.

 If we have good skills, then we can create mockups and proto types also for better understanding and it provides clear picture to the team.

2.       When wire-frames to be created?

The wireframes or mockups or prototypes should be created before the software development is started. It helps to minimize rework and save the resource time.

If we are following waterfall methodology then wireframes should be created before development stage.

It does not matter how we are preparing the wireframes but ensure it is important that the wireframe designer (UI/UX designer), understands the information that has to be displayed on the screen.

The designer or UI developer has to really understand how the user will interact with the system. If they understand clearly what is the requirement then only they can prepare the wireframes.

So it is very important that requirements should be gathered properly before creating wireframes.

As we discussed in previous articles requirements can be gathered with using multiple elicitation techniques and same will be documented in relevant artifacts.

As requirements will be updated as User Stories or use cases, same will help to        design the wireframes.

3.      Advantages of Wire-frames.

a.      By using wire-frames we can prevent the rework.

b.      It saves resources time.

c.       Wire-frames are easy to use and understand.

d.      It avoids the confusion and misunderstanding within the team members.

e.      Wire-frames are used by the team to have a share understanding of the same information.

f.        Wire-frames are used to help design the user interface.

g.      Coding (Technical) skills not required. 

4.      How to create wire-frames?

There are tools available to create wire-frames. Some of the tools are free and open source; we can use the same to create wire-frames.

And even with using paper and pencil also we can design the wire-frames; or by using white board and pen also we can create the wire-frames, the ultimate goal to create wire-frame is make developers to understand what and how the screen should be.

But using software also has advantages such as data storage, data retrieval and wire-frame reusability. If we use software then we can use this wire-frames in future also when ever required.

To properly create the wire-frames, we need to understand what the buttons to be available in screen are and what the functionality is. And we need to understand what fields to be available on the screen.

By using some open source tools we can create the wire-frames even if you do not have the coding skills.

5.      Why wire-frames are required?

There are so many ways to document the requirements and make development team to understand, but wireframes will help to understand the requirement clearly. Wireframes are easy to draw and easy to understand.

FAQ’s

20

638

20

70

Pallavi

Business Analyst , Functional Consultant, Provide Training on Business Analysis and SDLC Methodologies.