Your Guide to Wireframing
What exactly is Wireframing?
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.
The Importance 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 The know-how of wireframing, its different types and the tools.
Content An article that focuses on content wireframing. Not interfaces, nor design. Just content. Because as they put it, ‘Content is king’.
Tools for wireframing
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 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.
Tools A brief description of 15 Desktop and Online Wireframing tools.
Understanding
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 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.
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.
Moobileframes@Tumblr
Another blog where people share their work.
Iskeletor
See the wireframing projects done by companies, big and small.
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.
Magazine
Tons of articles about wireframing tips, tools, kits and templates.
Books
Guide
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 it . There are few tips mentioned too that helps you enhance your wireframing skills.
Tips
SEO
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 strategy.
Quick tips of what all is required in a project.
