The Art of Wireframing: A 10-step Guide

While our last post was all about highlighting some benefits and uses of wireframes, today’s post will focus on some tips that need to be taken into consideration when dealing with the process of wireframing. While some of them may not be focused directly on designing per se, there are certain elements like gathering feedback and adhering to a set objective, which are important to say the least.

As you may already know, a mockup is more inclined to show what a site will LOOK like; whereas a wireframe would be more focused on showing what a site DOES. This is a distinction that we do lose track of at times. The 10 steps shown below is an effective check list of what needs to be taken into account with regard to your wireframing project. These steps, if put into practice from your end, can help your client understand how exactly his site will function once it comes into fruition.

1. Set an achievable objective

A wireframe aims at solving all kind of problems. In addition to this, it will save you money and time since it is easier to change a paper wireframe or a prototype than to discover errors in many lines of code.

2. Functionality counts

Wireframes are about function, not form. That’s why they come before the actual design.

3. Who is in charge?

When doing a wireframe, remember that it’s vital to have someone in charge. This person should keep it current, manage feedback and relevant changes.

4. Is everyone involved?

It is imperative that you involve all staff in the process, from marketers to designers and developers and even users.

5. Put a deadline to the wireframe

If you want to keep a project moving, choose a deadline for your deliverables and make sure you stick to it.

6. Focused on users

As mentioned in our little intro, a wireframe is all about showing what a site DOES, having said that you would also need to take into account the user experience. For instance, it is never a good idea to let a site be too detailed whereby a user is confused when it comes to navigating around. Always have the user in mind and see how you can make the whole website experience easy and convenient.

7. Consistency

Consistency in your wireframe will assist users, developers and designers. When it comes to the repetition of groups of elements; remember that this can be useful to clarify things to users.

8. Does everyone understand your wireframe?

Everyone from business men, to marketers and designers, should find the wireframe easy to follow. As a rule of thumb it is best that you ask someone not involved in the project to see whether it is easy to assimilate. Perhaps your mother?

9. Get feedback

Ideally, an initial wireframe should gather feedback, a second one should show this feedback that was considered and the last one should be refined and polished.

10. The perfect tool

Paper prototyping is an excellent way to get started. However, as the project evolves, it is best that you consider an app or wireframing software to bring your wireframe into fruition and to help you manage the many iterations and screens involved.

So there you have it, 10 easy but significant steps that you should stick to at all times when wireframing. We hope you enjoyed this particular blog post, stay tuned for posts on sitemaps during this week. We do encourage you to send us your thoughts or comments via our site. Till next time – keep those wireframes picture perfect!

Author

rohitha

Rohitha Perera is a Community Evangelist at Creately.com, a collaborative diagramming software for teams. When he’s not working on marketing strategies for web start-ups, he spends time reading, watching movies, jogging, gardening and cooking. You can follow him on Twitter:@creately @ForzaRP

Comments

  1. […] some of our recent posts walked you through the art of wireframing and its benefits, have you ever wondered why we’re going on and on about wireframes? Well the […]

Leave a Comment

*
*

This blog uses premium CommentLuv which allows you to put your keywords with your name if you have had 9 approved comments. Use your real name and then @ your keywords (maximum of 3)
Back to top