Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Design

Wireframing tools for Responsive designs

Hey,

I know this is probably going to open up a whole can of worms but what would anyone recommend as tools for very rapid wireframing with a responsive design in mind.

Thanks :)

7 Answers

James Barnett
James Barnett
39,199 Points

Really there's no way to wireframe responsively, there's just wireframes are at different sizes.

These are all popular, shiny, web-based wireframing apps:

@James Cheers feller, thanks for the answer :)

Another tool (I haven't used it but have heard from a designer that it's quite useful).

http://www.balsamiq.com/

John Burkhard
John Burkhard
16,314 Points

Actually Adobe Reflow will allow you to easily wireframe with responsiveness in mind. It will also give you the CSS you need to make it happen.

http://html.adobe.com/edge/reflow/

James Barnett
James Barnett
39,199 Points

It looks like Reflow closer to click-able prototype tool than a wireframing tool.

It reminds me of Jetstrap, which does a similar thing using a drag-and-drop interface and the Bootstrap framework.

Here's a good intro to reflow for anyone whose interested

John Burkhard
John Burkhard
16,314 Points

If you use Reflow for about 15 minutes you'll see how adept it can be for wireframing.

The added bonus is that you can take it even further to a workable live prototype and then export the CSS as needed.

Not to mention it saves a ton of time.

Good video explaining and showing what Reflow is:

http://tv.adobe.com/watch/adobe-edge-reflow/introduction-to-reflow/

Sharpie and printer paper :)