Would you ever build your dream house without a blueprint or floor plan? I think not.
Then why create a new (or redesign existing) website without one?
In the process of building a new house if you focus all your energy on the interior design, like the colors of the walls and the fabric for the couches, rather than the foundational structure of the home.
It won't help in planning, on the contrary, it will be counterintuitive.
Similarly, wireframing is a great way to kick-start a development project and reach a consensus as to what the project will accomplish.
What is a wireframe?
A wireframe is a simple line drawing depicting the layout of a website before any decoration is added.
The purpose is to lay out content and functionality on a page which takes into account user needs and user journeys.
They are used early in the development process to establish the basic structure of a page before visual design and content are added.
Save time = save Money!
Adding this extra step (wireframes) to the process of developing a website actually helps in reducing the total time frame of the project.
This may sound counter-intuitive, but starting with wireframes will save a huge amount of time eventually cost on the process of building a website.
There is a logical reason behind this - changes in wireframes are faster and less time consuming as compared to that on the developing website.
Avoid mistakes = save Money!
Wireframes help in mapping out the functionality in an early stage which reduces the amount of back and forth tweaking that often comes in the development phase.
For instance, if during initial feedback and usability testing we observe that it is difficult to find the desired product using current navigation on a wireframe, it may need to be redesigned or moved to make it more obvious.
Now just imagine finding out the above issue at a later stage when the development is finished. The time required to re-do the changes would be at least 20x more than required to tweak a wireframe.
To conclude including wireframes:
- Makes it easier and quicker to fix the issues or add new functionality.
- Helps you to get a better understanding of what is going to be developed.
- Give you an overview of what actions are available, and how the interface elements are put together.
- Allows you to see if something is missing in the user interface.
- Quite often, showing a wireframe to a business stakeholder brings up important aspects not considered before.
- Ensure that all stakeholders are on the same page and agree on what is going to be built.
1 comment
You explained it quite well.