thoughts

Your Guide to Wireframing

  • NetBramha Studios
  • July 15, 2014
  • 3 minutes read
nb-blog-details-banner

When you have an idea in mind, you take it out. Wireframing is just a way of taking it all out, basically a blueprint of what the entire project is about. It is used to design the thought flow and function without worrying about the visual aesthetics. It is at this stage that you define the structure and the direction, tackle with content problems and prepare a skeleton of the project.

More about wireframing:

The Importance of Wireframing
It explains the importance of wireframing in the entire process of building a product. If you are wondering why wireframing should be Step 1 of any process, this is precisely for you.

The Importance of Wireframing and Tools to create them
An overview of wireframing and its importance in lowering the cost of a project, how is it different from visual design and a brief of common tools being used.

Website Wireframes
The know-how of wireframing, its different types and the tools.

Content Wireframing
An article that focuses on content wireframing. Not interfaces, nor design. Just content. Because as they put it, ‘Content is king’.

Tools
As long as it is your own product, you need not worry about the presentation. But when you have to present it to a client, pen paper may not be enough. A client needs to understand the overall structure and format. Fortunately, there are lots of wireframing tools available that can be used to mockup the structure. Unfortunately, there are ‘lots’. Each tool has its own pros and cons. The obvious way is to work on it yourself and figure out if it matches your requirements. Or read about it online to see what others have to say about it.

Following links give a comparative study of the common wireframing tools being used. Have a look.

The Ultimate Wireframing Toolguide
It not just talks about the different wireframing tools but also explains the difference between wireframing, prototyping and simulating.

Designer’s Toolkit
So how do you choose which tool is the best? This article gives the knowledge and the criteria on the basis of which these tools can be evaluated.

Best Prototyping Tools
An in-depth review of common prototyping tools. The good points as well as the bad.

Wireframing Tools
A brief description of 15 Desktop and Online Wireframing tools.

Understanding wireframes
Making sense out of wireframes is important if you are on the client side. To be able to understand what the designer is trying to communicate, it is necessary that you understand the language of wireframes. All those boxes and the grey gradients have a specific meaning. Make sure you don’t miss the details.

Learn more about the wireframe standards here:

How to Read a Wireframe
A fantastic illustration of commonly used elements in a wireframe and the meaning of them.

Improving Wireframe Presentation
To be able to communicate wireframes to clients is as important as creating them. See the tactics that help in honing your presentation skills.

Sketches, Wireframes and CSS
Defining the complete process of designing a user interface from wireframing to the implementation of a product.

A Look At My Wireframing Process
The entire wireframing workflow explained by Grace Smith. From Pen & Paper to Grids to Feedback, you need to understand the steps involved while doing prototyping.

Blogs
The best way to learn wireframing (or anything for that matter) is by being part of a community where you can share your stuff and see what others are doing.

Wireframe/Prototyping Weekly
A good repository of articles, videos, books and other important resources for wireframing.

[email protected]
Have a look at what others are doing in the field of wireframing. This is full of inspiration if you are not sure of how it should be approached.

[email protected]
Another blog where people share their work.

Iskeletor Wireframes
See the wireframing projects done by companies, big and small.

Wireframe Showcase
This is a blog where you can see the actual product as well as the wireframe together. It gives a good picture of how a wireframe is translated to a refined product.

Wireframes Magazine
Tons of articles about wireframing tips, tools, kits and templates.

Books

Guide to Wireframing
This is an awesome book that talks about wireframing in theory and practice. A must read for all beginners.

Don’t Make Me Think
The book is all about putting yourself in the shoes of the user. In the words of Jeffrey Zeldman, ‘If you design, write, program, own or manage web sites, you must read this book.’

Information Architecture for World Wide Web
A book that guides you through the entire process of conceptualizing and organizing information for websites.

Videos

How to Wireframe
This is a video tutorial for creating wireframes. There are few tips mentioned too that helps you enhance your wireframing skills.

Tips

SEO Wireframing
This talks about wireframing optimized for the Search Engine Optimization (SEO). Often, the clients ask for an SEO oriented design. In this article, the author explains the entire workflow on how to plan an effective SEO wireframing strategy.

The Art of Wireframing
Quick tips of what all is required in a wireframing project.

Great work Better Coffee

Start a project