Wireframing - Process After Process Flow Diagram & User Case

Today I would like to write about things will happen after we completed the 'process flow' and 'user case'.

As a definition, 'process flow diagram' is diagrams that show how the process of the app from the start user open the app until the user successfully made a purchase. It shows in boxes but we detail out the flow and the detail inside the boxes. On the other hand, user case is where the flow of information from multiple stakeholders. By having those diagrams make it clearer what we should do with the apps.

And as part of the business make it clear that is what our client wants in black and white. We use a tool draw.io to make the process flow diagram and use case.

WIREFRAMING

After those steps, we will enter the wireframing process. As the name suggests, it's like a wire and frame. It has many flavors of doing wireframing. We use an app called Sketch to do wireframing. It's quite a high-fidelity tool for doing wireframing. Yes, it's but, for the purpose of wireframing, we will less focus on colors and the final graphics.

What we will focus are:

- What kind of information we want to display
- How is the flow of the apps in holistic view
- Menu view.
- Type of data. Detail of data will be shown.
- Images
- Layout
- Structure
- and many more.

As the next step from the planning, we cement the visual element of the project so the client can see as roughly how the apps will look like and what the functionality it will have.

So that's is an introduction about wireframing. It's quite fun to do while it's quite essential and less painful because we don't have to think so much about the final design with colors and aesthetic details.

Regards,
Hijazi