dynamo weekly #13 — A responsive design process toolset

06.06.2014 Bild

Easier said than done: A responsive design process — tools, tools & more tools!

An overview of the tools we've been checking, to optimize our responsive, bootstrap based design & development workflow (Concept — Scribble — Wireframe — Mockup — Prototype)

Adobe Edge Reflow

Reflow comes from the big mothership Adobe. Still unsure whether that's good or bad or both. Webdesign /animation tool with focus on responsive. Intuitive way to handle breakpoints in a visual editor. Either way: at the moment, it doesn't produce usable code, they even say so themselves.

Google Webdesigner

Google Webdesigner comes from the even-bigger mothership: Google. A project backed by a giant can easily be good news. But this is tool is meant for ad (as in banner) animations. Might get the job done, but not for us (yet)


Macaw does a great job abstracting code away. Still bug-ridden and produces div-based code (no bootstrap). One to keep an eye on!


Pingrow is a bootstrap visual editor. The UI really shows you're basically tweaking CSS props. Wonder if it's not better to immediately tweak the code then.

Project Parfait

Project Parfait by Adobe: 'Extract everything you need from PSD comps'. If the starting point is PSD comps, then that's your mistake right there. ktnxbye. 


Layoutit does a great job at visually setting up the bootstrap groundwork of your code. Doesn't qualify as a wireframing or design tool.


Sketch is a visual design tool, powerful vector editor and multi-res asset manager. Exit photoshop.

also cool:
https://marvelapp.com allows you to snapshot your handmade scribbles and quickly interactively link them together for presentation purposes. Sounds good!
http://helloduo.com is a webkit based browser with 2 resizable, synchronized views. Instantly check your mobile- & tablet / desktop layout
http://incident57.com/codekit/ compiles pretty much everything (front-end web related). Speeds up dev in the early stages of design when the templates aren't in the cms yet.
http://hammerformac.com pretty much the same as above.
https://github.com/elliance/metaframe Allows you to easily annotate your html-designs (in case your client needs that extra explanation, or implementation isn't yet feasible)