7

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

Improve this question
2
  • 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
    Commented Jul 14, 2013 at 22:37
  • 1
    Possibly of use: graphicdesign.stackexchange.com/questions/16107/…
    – Lauren-Clear-Monica-Ipsum
    Commented Jul 14, 2013 at 23:03

4 Answers 4

Reset to default
9

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:

Improve this answer
4

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

Improve this answer
4
  • I've played with it and it's of very limited usefulness (IMHO).
    – DA01
    Commented Jul 15, 2013 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
    Commented Jul 15, 2013 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
    Commented Jul 15, 2013 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
    Commented Jul 15, 2013 at 22:40
3

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.

Improve this answer
-2

I work with mockup builder and I find it wonderful.

Improve this answer

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