Wireframe tools for website and application designer

What is a wireframe?

               A wireframe is a diagram, structure, overview, blueprint, arrangement of user interface elements. It is also known as a mockup. The purpose of wireframing is to help system designers, programmers and users to communicate about the structure of the system and understand the same overview. Users can leave comments, ask for modification, or make a mutual agreement with the system developer before proceeding the task.

               Creating the wireframe makes it easier to develop the system. Moreover, it can reduce errors and misunderstandings which may cause more time spent due to system modification.

                The wireframe may be designed by sketching on paper, or using a computer program or an online website providing both free and paid version.

There are 3 levels of wireframe as follows.

1. Low-fidelity wireframes: Sketch a rough idea on paper or a program
2. Medium-fidelity wireframes: Define specific elements on the screen 
3. High-fidelity wireframes: Put more realistic details and positioning, and define wordings nearly same with the actual use.

Wireframe tools

          Wireframe tools can be categorized into online and offline as below.

• Online: Using on websites such as Cacoo, Jumpchart, FrameBox, iPlotz, MockFlow, Google Docs
• Offline: Installing on your computer or smartphone such as Microsoft Visio, OmniGraffle, Adobe Photoshop, Adobe Firework, Pencil Project, Justinmind

From the above samples, MockFlow is an interesting online wireframe tool.

You can find MockFlow on MockFlow.com. Below is the advantage of this tool.

1. It is easy to use.
2. There are thousands of pre-built components which are modern and beautiful.
3. UI templates and packs shared by other users are available to download.
4. Users can download MockFlow program to install on their computers.
5. Outputs can be exported to many formats e.g. PNG, PDF, PowerPoint, Word, HTML

         MockFlow is available for both free and paid version with the following pricing. Anyway, there are restrictions on some functions if you use a free or “Basic” version. For example, you can use only 3 pages per 1 project, and you are not allowed to export the output in HTML format.

         MockFlow is an option for users who are interested in wireframe design. You do not need a lot of programming knowledge, just having experience in using a drawing program like Microsoft Visio, you can learn how to use it. And if you keep using MockFlow continuously, you will be able to use other wireframe tools with different functions easily.

Read more: What is UX/UI Design?