Jodie Locklear

Responsive Wireframing with Balsamiq

Recently, I’ve been working on some responsive design case studies to add to my portfolio using Balsamiq. Before I talk about that experience, I want to put in a general plug for using Balsamiq. It’s awesome, you should definitely give it a try. It’s incredibly simple to use and it’s an excellent tool for creating rapid electronic prototypes with a “sketchy” look as well as creating detailed “non-sketchy” wireframes, if that’s your cup of tea. Add on the ability to export a click-ableĀ  PDF of your project, and you’ve got yourself some powerful stuff. Nuff said.

Now on to the responsive design. They offer tutorial support for their product and their responsive design tutorial is one of the best I’ve come across. It provides a strong foundation on which you can build your responsive designs by showing you how to create a responsive wireframe system. If you’re familiar at all with web development you’ve come across the use of grid systems. Some popular grid systems include the,, and the Being a newbie at responsive design, it seems like from a development standpoint, taking a look at, and using a grid system is very helpful when it comes to actually coding out, and building your project. Very helpful from a development standpoint, but in terms of design – I think there’s a gap between the conceptual design and development stage.

This is where I believe Balsamiq has done an excellent job bridging that conceptual gap by explaining how to create a responsive framework. They explain how to break down the build components and demonstrate how to use their product in conjunction with grid systems to create responsive layouts. It’s definitely not rocket science, but one of the most important considerations with any design project is developing a organizational framework for layout, naming conventions, templates, etc. If you’re highly visual like me, simply having someone show you how it’s done is all you need for it to click. If you’re getting started with responsive design, this tutorial is a great starting point for teaching you how to think about a responsive project. Great stuff!

This entry was published on February 20, 2013 at 2:52 pm. It’s filed under UX Transition Mission and tagged , , , , , , , , . Bookmark the permalink. Follow any comments here with the RSS feed for this post.


Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: