Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

I've always done web mockups in Photoshop, recently I switched to Illustrator because I thought it could speed up my work flow (And it did!) As I design more and more for responsive web sites though, I feel like even Illustrator isn't ideal and there are some quirks that make it somewhat of a more cumbersome process.

I'm wondering if anyone can suggest some tools that they have used in regards to mocking up responsive web sites? I've heard of Balsamiq and I've actually heard InDesign has some new features in the Creative Cloud that are worth revisiting when it comes to responsive mockups.

If you've had some experience in responsive web design could you suggest a work flow or the pros and cons of some tools that are out there.

Thanks

share|improve this question
4  
I'd suggest doing mockups in HTML for the most efficient responsive workflow. I've played with a few options (Including the Adobe solution) but in the end, the specifics of responsive design are heavily dependent on the actual markup being used. –  DA01 Jul 14 '13 at 22:37
1  
Possibly of use: graphicdesign.stackexchange.com/questions/16107/… –  Lauren Ipsum Jul 14 '13 at 23:03

4 Answers 4

up vote 8 down vote accepted

There seems to be a serious need for more responsive design tools as of late. Many of the new initiatives are web based and some look promising but I've yet to give them a thorough workout:

share|improve this answer

Check out Adobe's Edge Reflow. It is part of the Creative Cloud and is designed for working with responsive websites.

share|improve this answer
    
I've played with it and it's of very limited usefulness (IMHO). –  DA01 Jul 15 '13 at 19:38
    
@DA01 How about the rest of Creative Cloud? From what I've seen, as a web designer, it looks like almost everything consists of just glossed up widgets to generate CSS3 effects without coding them yourself. –  Eric Jul 15 '13 at 20:50
    
Personally I stick to my own framework and code it out. It is more for designers who want to keep their hands clean of code. It may work as a good "responsive Photoshop" for those who want to design things out like that. –  John Jul 15 '13 at 21:16
    
@user1803405 I can't speak to the entire creative cloud. But, in general, I found Edge Reflow a bit like Dreamweaver. Yes, it'll make HTML, but it's not necessarily the HTML the site is being developed in, and that can lead to more problems than solutions. (Again, IMHO) –  DA01 Jul 15 '13 at 22:40

There's nothing in particular about RWD that demands new tools.

Responsive (RWD) is largely about breakpoints*, which is to say you have multiple layouts to cover various viewport sizes and aspect ratios. At the mockup stage, you're going to create each version of the page/site. With a responsive site, that means you just have more mockups to create (maybe).

Balsamiq is for wireframes and can't replace a detailed mockup tool. Illustrator, Photoshop, Sketch, or Inkscape can still handle your layout needs, responsive or otherwise.

As for the idea of doing mockups in HTML: Good luck. It works with a simple content or info site. When the info hierarchy (and possible UX solutions) gets complicated, you'll find yourself exploring less options. For the same reason, I don't start any mockup without first sketching rough solution; even a layout app can hold you back, creatively speaking.

* more on breakpoints here and here.

share|improve this answer

I work with mockup builder and I find it wonderful.

share|improve this answer

protected by Matt Nov 12 '13 at 14:11

Thank you for your interest in this question. Because it has attracted low-quality answers, posting an answer now requires 10 reputation on this site.

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.