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

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

Pinegrow

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

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

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)