Wireframes and prototyping

Wireframes are usually referred to as a visual guideline that explains our digital product structure, such as its hierarchy and its key elements. Usually, wireframes are mostly used when we are creating a web or mobile application; the UI designer will take them as a reference for creating prototypes and visual design.

During the process of creating wireframes, we also start connecting the dots, or in our case the screens, by creating the product flow.
By flow, we mean what will happen on each screen when our user interacts with it, what their next step will be, and where the user will land after any action they take on that specific screen.

Most of the time, we start creating wireframes by sketching them on paper. So, during that phase, we will also try to figure out the flow of each screen so that we have a better understanding of the steps and actions that can be taken when using it.

Design flow describes the processes and graphical assets needed to make a working product.

There are different tools available today, which allow you to convert your paper wireframes into digital ones, such as SketchApp and Balsamiq, or even more advanced design tools such as Adobe Illustrator.

It is obviously clear that we need to start the wireframing process at the beginning stage of design, where our product didn't have a proper structure and the design ideas were only on paper.

Also, another benefit of wireframes is that they can give the client an overview of what their product will eventually look like. This way, we are also removing an issue that could happen later with a client arguing about our design elements and why they were created or placed that way. The following screenshot is an example that presents wireframes screens, how they are connected together, and their flow; usually this process is known as screen-flows:

Wireframes stand mostly on low-fidelity groups of prototyping, which generally have a limited function and limited interaction compared to high-fidelity ones where prototypes take place. After wireframes and interactive wireframes, a higher requirement stands for prototype. The prototype stands on high-fidelity groups because they are more interactive and fit better on the final user interface.

We create wireframes mostly to get a clear idea of structure and the visual hierarchy and also to experience interacting with them to get a better understanding of both areas, that is, how the product looks and feels when using it. The prototype is usually referred to as a simulation of the product and is commonly created using clickable wireframes.

For creating wireframes and prototypes, we can use different kinds of tool, such as Adobe Experience Design, InVision, Balsamiq, UXPin, Sketch, or Figma.

Here, it's important for you to understand only the general meaning of wireframes and prototypes because we will go into them in detail later in Chapter 8, Wireframes and Prototyping, which will focus only on creating wireframes and prototypes.

Never move to the next step until you finish all the wireframes, product screens, and their flow. You need to have a clear idea of how many screens you have inside your product, how they are connected with each other, and how the user can navigate through them.