If you are interested in UI/UX design and development then you have definitely heard the terms “Wireframe” and “Prototype”. Both are well known in the industry. Especially to UX developers. There are even people who are willing to pay high prices for creating them for their sites both. That’s especially true for jobs that allow you to earn from home online through freelancing sites like Upwork, Freelancer, etc, and even support sites that offer services like Patron, Streaming Plug, etc. And in many job curriculum, it’s expected that a UI/UX designer to have both skills. But what are they? And why are they so important?
Wireframe
A wireframe is generally a mockup that has no high-end design or anything. It just shows how a process would work or how the components of the pages should be arranged. Now, this might seem a little bit pointless to the untrained eye. But for experienced developers things would be much easier. Having a visual representation of the client’s thoughts and how they should be arranged is more convenient and easy to understand. So by now should understand that wireframing is done before the initial UI design. Since it’s the basis on which their design would be built upon.
Prototyping
Prototyping is the complete opposite of a wireframe. Where wireframe is used as the base of the design thus it has to be done before starting the UI design. Prototyping is done after the initial UI design is done. In prototyping, it shows how the interface would react to certain events. Like how a pop-up should appear or how a button should animate on hover etc. This way you can research how the events should look like when setting them up and also look up at various variations as well and do a survey for the best variation. This way you don’t have to worry about changing the complete look of the site during development. Which can be very painful.
Their roles
By now one thing should be clear that both are created to serve roles but for the same purpose. And that is to have complete UI/UX design with clear distinction of the client’s needs before the start of the development. Where wireframe works as a skeleton of how the functionalities would work the prototype is a high-end visual representation of how it should work functionally.
Tools
But here’s the thing we are talking about what they represent and what they look like but how do you even create them. Well for that there are various tools that can help. They are specially made for such purposes. So let’s take look at some of them. Shall we?
Wireframe Tools
- Pen and paper: One of the most common and mostly used commodities to create a wireframe. You really don’t need a fancy high-end softer to create a workable wireframe. Cause it’s just a raw mock-up of how you want the site to look like when components are placed according to a certain alignment.
- draw.io: It’s an online web-based tool that is usually used for creating flow charts but also has all the necessary tools to create a perfect workable wireframe as well. And since it’s web-based you can access it from anywhere as long there’s a browser and internet access available.
Prototyping Tools
- Sketch: It’s a well-known UI/UX software for mac users. And that’s its main drawback as it can be only be used on Apple devices. And it’s not free.
- Adobe XD: It’s available for both windows and mac but it takes up a lot of ram space. But it has a free trial version for 30 days with limited features available.
- Figma: It’s a web-based tool and can be used on any platform with a browser. It doesn’t put much pressure on the machine and can be used free of cost for a limited number of projects and collaborators. But it has no offline version thus you are required to be online when using it.
There are other tools as well. These are just some of the tools that are popular and I personally use and have gotten satisfactory results.
