August 3, 2011

#design  #ux  #wireframes 

Getting Started with Wireframes

I love making wireframes, they make my job a whole lot easier, definitely one of the most important elements in my ux toolbox.

What is a wireframe?

On simple terms, a wireframe takes a webpage layout back to the basics, it’s a simple rendering of where the elements and text are placed on a page. By creating a wireframe you make sure you get colors and visuals out of the way and you focus on what really matters: content and user experience. 

I won’t get into too much detail on how to make wireframes, you can find lots and lots of information on the matter by just googling around. I highly recommend Fuzzymath’s recent series of posts on the matter, very informative.

What are they good for?

Thinking about elements and layout first is very important, wireframes help you do exactly that. There is no right or wrong way to do a wireframe, just get a piece of paper or fire up your favorite design app and start sketching away. Once you see elements and content on a piece of paper or on your monitor you will start realizing what works and doesn’t and start moving elements around, adding in more, or completely eliminating useless parts. This is the beauty of a wireframe.

Beside from helping you out in your design process, wireframes will also help you to:

• Create a useable layout
• Work as a team to iterate on creating the right interface
• Convey your thoughts, ideas and proposals to your clients
• Focus on information hierarchy
• Get early feedback on your layout or user experience

Wireframes and user interaction

This is where I find wireframes to come most handy, when defining the user interaction of an app. There are certainly a few of cases I can think of where you could simply skip making a wireframe, normally when the layout is very simple or the requirements are very well documented.

On my previous post about UX design, I discussed a few ideas around creating the right UX for your users. Wireframes are a handy tool for that, they allow you to lay out the user interaction, specify user flows and in general see how a user will move around your app or website.

The great thing about this is that you, your team and stakeholders get to see and experience how everything will work - and change it as necessary at a very early stage.

Stuff to keep in mind

When creating a wireframe always consider:

• Only elements and content that are necessary on this page
• What content deserves the most amount of real estate on the page
• The hierarchy of the information (what is more important than what)
• Who will be using this page
• Where will the user go from here
• Make call to actions very clear

Wireframes get you…

• Early feedback from team, stakeholders and users
• A chance to embrace change quickly at an early stage
• A birds eye view of the project
• Piece of mind
• A very solid starting point to create the visual style

Well that’s it, hope you enjoyed reading a bit about wireframes and why I love them so much. I hope this inspires you to sketch and wireframe before you start out your next design. Trust me, wireframing only makes the process way easier.