The last time I wrote about Responsive Design was about a year and a half ago, and there have been so many updates and advancements. I wanted to take this opportunity to talk about how I’ve been using responsive design lately and what I’ve learned by doing so.
In my role as a User Experience Designer at Bootsoft, I get the privilege of seeing new projects move from inception, to design, to development. A big part of designing a site or application, is planning out the architecture. After meeting with the client and hashing out the product’s needs and functions, I do some sketches and conceptual wireframes. Through the wireframes, I am able to annotate and map out on a more general level how things are going to interact. After going through some iterations with the conceptual wire frames, we begin making a clickable prototype. The clickable prototype can be very helpful for showing the client how their product is going to work. Without having to worry about any of the back-end, we are able to show them a prototype that looks, feels and functions like they expect a website or an application to work.
For these prototypes, I have been using the responsive front-end framework, Foundation (http://foundation.zurb.com). I am a big fan of this tool, because it is easy to implement, it has a bunch of great add-ons for prototyping that make mocking up a website quick and easy (like modals, image sliders, etc). It is also based on a grid, like the majority of responsive frameworks. The grid creates a layout that is controlled by percentages, so when changing the browser size, the content is flexible and logically rearranges itself.
One of the nice things about Foundation is that you can style it as much or as little as you like. Their core look and feel is actually very attractive – especially the buttons, forms and other added components. It’s clean and unobtrusive, which helps the client hone in on the core functionality of the user interface & experience instead of getting hung up on graphic elements.
We have used this framework for quite a few new projects, and so far it has been very successful both from my perspective and the clients. It is very intuitive and definitely makes my life easier when making clickable prototypes. What is nice about it is that when I need to make updates or changes, it’s incredibly easy and flexible to do so. As we move more into the Agile process, it is very important to work with technologies that are fluid and easy to work with, so for the wire framing and prototyping part of our project, Foundation has proved to be one of the best ways to keep with the rapid process.
I am really enjoying this method we’ve adopted for the discovery process, and I’m excited to keep moving forward with new and advancing technologies. It is so important to keep up-to-date with the direction of development and technology, and I am glad we’re are doing so, especially in this early part of a project. If you are trying to figure out a way to express specific functionality to a client, and flat wireframes just aren’t cutting it, I highly suggest using a rapid prototyping tool like Foundation!