Designing Wireframes... Don't forget to check these TOOLS!

What are wireframes?

Wireframes are an important design tool used in development. It is a visualization tool for presenting proposed functions, structure and content of a Web page or Web site. A wireframe separates the graphic elements of a Web site from the functional elements in such a way that Web teams can easily explain how users will interact with the Web site.

A typical wireframe includes:

1. Key page elements and their location
2. Grouping of elements
3. Labelling, page title, navigation links
4. Place holders, content text and images

Wireframing tools make the process of creating an app or website fundamentally easier, by visually stripping the product down and allowing all involved focusing purely on functions and user interactivity.

The first very helpful tip I can suggest is: Visualize and then draw it on a plain paper. Yes, it’s traditional and simple; but it really helps. When you see the product outline on paper, it’s much simpler to make changes to it. Once all permutations and combinations have been achieved – turn the final one into a wireframe using any software tool you are comfortable with.

There is a list of 5 of the tools that I found helpful while making wireframes:

Visio:

Visio's real strength lies in technical diagrams rather than Wireframing; however, for those already accustomed with other Microsoft apps such as Word or Excel, the interface will be very familiar. It is quite clunky, Visio does offer add-on tools which allow you to create and export a usable HTML prototype.

Cacoo:

You can easily create mock-ups for website designs, and even smart phone applications. The free plan will allow you to export the final project only in .PNG format, but I think it’s enough for those freelancers who’re not working with major clients, and mostly need something to expand their ideas upon.

Pencil:

Pencil is great for a lot of things, like mind-mapping for example, or building diagrams. It is however intended to be used for building prototypes and wireframes for web designers. It’s an open source desktop application, which works on most of the platforms today.

UXPin:

Most of the tools in this list will provide mobile support in one way or another, but it’s nice to have a free phone mock-up tool like this one at hand, when you need to do some quick prototyping without having to worry about project files or load times.

Paint:

Paint is a simple 

graphics painting program that has been included with all versions of Microsoft Windows. If you have an outline and want to make any changes on it, paint is the best and non-technical tool to use.

Clients need to understand how your proposed app or website will work. But simply explaining to them verbally or textually leaves the vast majority of functions down to their imagination. Wireframing tools can be extremely helpful in squaring that circle. Thus, making the wireframes effectively and efficiently becomes more important. This can be achieved better by making use of a good tool and conveying the idea concisely and correctly. Lastly, “Don’t Just Wireframe - convey the Design Story”.

About Author:

Shweta Samudra is a consultant in Systems Plus Pvt. Ltd. Within Systems Plus, she actively contributes to the areas of Technology and Information Security. She can be contacted at: shweta.samudra@spluspl.com