Wireframe and Prototyping — Part 1
You are going to present your presentation to your lecturer. So what do you do on the previous night? I am pretty sure you will try to make a small script like what to say and what not to say or when to say etc. Then you will try to practice that script by recording a video of your own or to your family members. This is obvious because you don't want to mess things up at the right time.
Let's talk more technically. So you have collected all the requirements and data, then you have designed and developed your product. Now you send it to your client and you expected something good but your client isn’t satisfied with the final product, so you need to rework the whole process. Seems messy right?
Background
We know to develop a system isn't that much easy. Because there are several processes in between the idea stage and the end-user interaction stage.
Most of the companies like Google, Facebook or YouTube all of these things are the example of good and much interactable systems. But as we are in the technology we know that data is the key to get anything done. But if I say that I will give you the data you need but later if I ask you about where do you place that data. Like should there be 8 columns or 9 columns? or should we place just one image or how many menu items do we need? All of these questions are answered in the system wireframe segment.
Wireframe
A wireframe is a building blueprint which is also the visual representation of your system and the goal of a wireframe is to create the basic skeleton for each screen in your design. That way you can review the overall layout of the design with your clients before things like imagery, branding, shading, fonts or coloring. A wireframe will save you and your client a huge headache and a lot of time. And we all know time is money!!!
Look, there are experts or designated people who do this job by sitting up with developers, designers, and the decision-makers. But the thumb rule is if you want to achieve success with a system you need to have a good wireframe of your system. The main concentration should be what data you want the user to see on your home page or about page or any other page, not what the data is.
Three key features of a wireframe are,
- Setting up the hierarchy of information
- Simplifies communication between you and your client and
- Blueprint or outline of your system
Different types of wireframe
There are basically two types of wireframing. One is low fidelity and another one is high fidelity. We might be familiar with these words. But one important thing to remember while wireframing is, don't use any color or any image, just go with a very broad way of putting up the data, which I already mentioned above.
When you pick up a pencil or pen and paper and start drawing your system that is called low fidelity wireframe. We do this kind of wireframe usually because most of us used to write or sketch things up before any further work. So when you complete this wireframe like everything is sorted out, everyone is agreed with it, then you start high fidelity wireframing.
In high fidelity, we just use some tools or software to get our paperwork into a much more visualized one. The most used tool is Balsamiq but there are other tools that are also used widely like Adobe Photoshop or Illustrator, InVision, Sketch (Paid), some prefer Figma because it's free and easy to use. So there are many options to choose from, just choose the right one for you. But one thing you can do is, you can obviously have a try with Balsamiq because it is a rock-solid thing in terms of wireframing. The following screenshot will give a simple idea about how things look like in high fidelity wireframe with Balsamiq.
Some of the wireframe tools,
Apart from these tools, there are more available but these are the widely accepted ones.
Overview
All of these states that I have talked with will give e a wider idea about wireframe but if you want to just have the basic then you can give a try on the beneath diagram.
The moral of the story is to think about how the end-user will interact with your system rather than putting colors, images or other infographics. This diagram is just my own perception. You may have yours or others have their own. But you should follow at least some rules, although nowadays low fidelity wireframe isn't that much happening. Most people start directly with high fidelity wireframe.
After all of these words, you have to keep in mind that if you want a good system with good user interactions then you must do wireframing at first. Thus the client is happy and you are happy too.
Thanks for reading. As this is my first part of wireframe and prototyping, I will try to come up with a new series very soon. Till then keep supporting and claps will be amazing.
Happy Coding!!
And STAY HOME, STAY SAFE!!!!
