Responsive Wireframes with Foundation

I recently had an opportunity to work on a project that let me test out some tools for creating responsive wireframes.

Dave Ruse
#Design | Posted

I recently had an opportunity to work on a project that let me test out some tools for creating responsive wireframes.

When building a responsive site, I'm convinced that a functional wireframe is a much more valuable client deliverable than a set of PDFs with a bunch of static images. These prototypes let the client see how their site's content and functionality will respond to different device widths and allow them to interact with it. In my own use, it's also helped me as a designer tackle problems like content-prioritization, hierarchy, and functionality up front while things are relatively low-fidelity and ease to adjust.

One of the tools I tried out was the Foundation framework. Foundation is billed as a framework built specifically for rapid prototyping. It includes a lot of pre-styled elements so you can quickly visualize interactions like hover, tap, click, and scroll. Built-in tools that include interactions like a grid-system, a slideshow carousel and flexible media out of the box allow you to get prototypes of your pages up extremely fast and only need minimal styling after the fact. So, what did I learn?

Speed

I'm not married to using frameworks for every part of a project, but Foundation really helped speed things up for me. Foundation is built for speed and it really delivers. As long as you're fine with the default styles it provides, you can get pages up quickly and easily. If you're concerned about the time investment needed to create responsive wireframes, Foundation would be a good place to get your feet wet.

Flexibility

A lot of tools I tried were either too basic and require a lot of manual styling each time. As long as you're comfortable in HTML/CSS, Foundation strikes a really good balance of giving the client a great feel for how their site will respond and still remaining flexible enough for efficient changes that come from feedback.

Longevity

I found the code I used to build my wireframes fairly adaptable when moving into production. Other than stripping out some of the CSS and writing my own when needing to get specific with styles, the markup you write should be semantic, so it can be production-ready, even if only in pieces. I was actually worried this would be a problem and was pleasantly surprised to find out the opposite. That being said, it can vary depending on what CMS you're using to build your site with.

Mobile First

Another con is that Foundation isn't mobile first by default. However, there is a separate mobile first version of the framework on Github. Sadly, I didn't know this until I had already finished building out the set of wireframes. If mobile first is important to you, be sure to use this instead.

Overall, using Foundation was a good experience. It was just the right balance between fidelity and flexibility & allowed me to create prototypes quickly. If you're interested, check out their site and documentation. Have you used other tools for creating responsive wireframes? If so, let us know!

Dave Ruse