Going straight to coding without a ‘definite’ idea of what your app should look and feel like is very risky and can lead to unnecessary rework. It’s therefore necessary to plan a roadmap or process flow. This does not mean you have to have it all planned out at the start or it has to be top quality, a sketch will serve as a good starting point.
A wireframe is a skeletal blueprint of an application that establishes the flow of the application. It is a low-fidelity sketch that shows the main features of the application.
Learning Objectives
At the end of this tutorial, you should be able to understand the following:
Importance of wireframing
Various tools for wireframe
Pros and cons for each tool
The most comfortable use case for your application
Importance of Wireframing
The pros of wireframing include the following:
It brings clarity to the project in terms of client needs and primary focus.
It makes communication with teams easier.
It facilitates a better feedback process.
It minimizes rework.
It helps to identify problems early.
Pen/Pencil and Paper
Figma
Pencil
Adobe XD
Bizagi Modeler
Pen/Pencil and Paper
Not too big on using tech tools or very sporadic? No problem. Good old-fashion pen and paper can do the trick just as well.
Pros
It is easier and faster to use.
It has little to no cost implication.
It allows for early feedback from users.
Cons
It can be hard to interpret.
It is hard to review designs when users are geographically dispersed.
Constant erasing can distort the design.
Designs still have to be transferred to a digital tool
Figma
Figma is a web-based graphics editing and user interface design app. It can be used for all kinds of graphic design work like wireframing websites, designing mobile app interfaces, prototyping designs, and much more.
Pros
It supports real-time collaboration between teams or individuals.
There are wireframe templates to start with.
It is easy to share designs.
It is cloud-based, as such, can be accessed from several devices without needing to download files.
It offers a free plan to users, with limited functionalities.
Cons
Although it has an offline version, users don’t have access to the full functionalities.
Real-time collaboration requires you to be online.
Poor version control. You have to be aware of the last edit made.
Learning Resources
Adobe XD
Adobe XD is a vector-based experience design platform for wireframing, prototyping, interactive design, and hi-fidelity web/app design for individuals or teams.
Pricing
Pros
It supports real-time collaboration between teams or individuals.
It supports animations.
It integrates with other Adobe products.
It is available on Windows and Mac OS.
Cons
Learning Resources
Pencil (Evolus Pencil)
Pencil is an open-source GUI prototyping tool that people can easily install and use to create mockups on popular desktop platforms.
Pros
It is supported on all operating systems.
It is free.
It supports the drag and drop of elements.
It has a lot of UI elements categorized by device types.
It is integrated with OpenClipart.org to let users easily find clipart by keywords.
Although outdated, it has a Firefox extension.
Bizagi Modeler
Bizagi modeler is a business process mapping software that enables organizations to create and document business processes in a central cloud repository to gain a better understanding of each step and identify process improvement opportunities to increase organizational efficiency.
Pricing
Free for personal use.
USD$/mo for professionals.
USD$/mo/user for workgroups.
For enterprise, contact the team.
Pros
It supports real-time collaboration between teams or individuals.
It is easy to use and user-friendly.
It supports Business Process Model and Notation (BPMN) notations.
It supports data visualization.
Cons
The User Interface is not that attractive.
Unlike its competitors e.g LucidChart, it is not integrated with many 3rd party services (e.g. Jira, Google Drive, Github) for better collaboration.
Learning Resources
Now that we’ve looked at just a few of the multiple tools (LucidChart, drawio, Microsoft Visio, and much more) that can be used, why don’t you go ahead and try them out and see what works for you.
Resources
If you like this article, feel free to comment and share. You can also reach out to me on Twitter | LinkedIn | Github
Ciao👋🏼