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 960.gs, 1200px.com, and the rwdgrid.com. 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!