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?

What are wireframes

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.

Sample BA Document Templates

FREE DOWNLOAD

Send download link to:

I confirm that I have read and agree to the Privacy Policy.

Subscribe to get exclusive content and recommendations every month. You can unsubscribe anytime.

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

What are wireframes in design?

The designs you received are called wireframes (sometimes called wires, mockups, or mocks). A wireframe is a schematic, a blueprint, useful to help you and your programmers and designers think and communicate about the structure of the software or website you’re building.

What is the use of wireframe?

wireframe is commonly used to lay out content and functionality on a page which takes into account user needs and user journeys. Wireframes are used early in the development process to establish the basic structure of a page before visual design and content is added.

What are wireframes and mockups?

mockup is a static wireframe that includes more stylistic and visual UI details to present a realistic model of what the final page or application will look like. A good way to think of it is that a wireframe is a blueprint and a mockup is a visual model.

What should wireframes include?

wireframe is a two-dimensional illustration of a page’s interface that specifically focuses on space allocation and prioritization of content, functionalities available, and intended behaviors. For these reasons, wireframes typically do not include any styling, color, or graphics.

What are the different types of wireframes?

There are three main types of wireframes: low-fidelity wireframes, mid-fidelity wireframes, and high-fidelity wireframes.

Is Wireframing UX or UI?

Wireframing is a practice used by UX designers which allows them to define and plan the information hierarchy of their design for a website, app, or product. … Without the distractions of colors, typeface choices or text, wireframing lets you plan the layout and interaction of your interface.

error20
fb-share-icon638
Tweet 20
fb-share-icon70
Pallavi

Author: Pallavi

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

30 thoughts on “What are wireframes?”

  1. I am a website designer. Recently, I am designing a website template about gate.io. The boss’s requirements are very strange, which makes me very difficult. I have consulted many websites, and later I discovered your blog, which is the style I hope to need. thank you very much. Would you allow me to use your blog style as a reference? thank you!

  2. I’ve been surfing online greater than 3 hours nowadays, yet I never found any fascinating article like yours. It is pretty value enough for me. Personally, if all site owners and bloggers made excellent content as you probably did, the net will be a lot more useful than ever before.

  3. Hey There. I found your blog the usage of msn. This is a very smartly written article. I will be sure to bookmark it and return to read extra of your useful info. Thank you for the post. I抣l certainly return.

  4. Pretty nice post. I just stumbled upon your weblog and wished to say that I have really enjoyed surfing around your blog posts. In any case I will be subscribing to your rss feed and I hope you write again soon!

  5. I am curious to find out what blog system you’re using? I’m having some minor security problems with my latest website and I would like to find something more secure. Do you have any solutions?

Leave a Reply

Your email address will not be published. Required fields are marked *

error

Enjoy this blog? Please spread the word :)