Web design app review

Like many web designers I’ve been getting increasingly frustrated with traditional design tools and workflows, creating a static mock in Photoshop and handing it over to a developer just doesn’t cut it anymore given the demands of responsive layouts, rich interactive web applications, animation and high DPI screens.

After chatting to peers and doing some online research I came up with this short list of potential apps that are designed for the modern web. Opinions below are the result of spending about a day in each app while exploring potential article page design directions for a project I’m working on.

Adobe Edge Reflow

What is it?
A html/css design layout engine focussed on responsive layouts
The good
Part of Creative Cloud so you may already have access to it
‘Edge Inspect’ works great so you can see changes reflected on your mobile screen as you design on your desktop
There’s supposed to be an import layout from photoshop feature which sounds amazing but I couldn’t get the two apps to recognise each other, weird.
The bad
Clunky learning curve for break points, no support for animation, limited support for roll over states etc.
Feels like a beta, see above re. the photoshop integration
Recommendation
I think this could easily have a place in the design workflow, it wont replace photoshop but as an interim tool or one for particular types of projects it has potential. In combination with Edge animate you could produce interesting animated prototypes fairly quickly, but Edge Animate doesn’t seem optimised for developing user interfaces.

Macaw

What is it?
A html/css design layout engine focussed on responsive layouts
The good
It’s pretty and has a lot of potential
Creates close to go live code
True wysiwyg, the design engine is a browser so text etc looks like it will look (on some browsers anyway)
Reasonable one off price
The bad
Sooooo buggy as to be unusable
Lack of interaction/animation tools
Recommendation
I really wanted to love this but it’s not ready for prime time in my experience, I had multiple crashes that made completing my project impossible. Check back again when they release v2.

Sketch

What is it?
A vector based design tool focussed on creating multi resolution graphics and UI
The good
Great features like pixel view, reusable elements you can update on the fly and great exportability, individual image elements and css
Reasonable one off price
True wysiwyg, text etc looks like it will look in code (on some browsers anyway)
The bad
It’s still a static design tool, albeit one that’s much more focussed on how we design UIs today
Recommendation
I can see it replacing photoshop for product design quite easily, I’m keen to use it more, but it doesn’t solve the interaction issue. In situations where you’re working with a UX designer I can see this being a great collaboration tool to maintain the same files from wireframe to high fidelity comp.

Typecast 

What is it?
A web app focussed on creating responsive typographic led layouts
The good
Fast, intuitive interface
Baseline view & encourages good typographic practices generally
Export css
View multiple break points simulataneously to see how design changes flow over screen sizes
True wysiwyg, the design engine is a browser so text etc looks like it will look (on some browsers anyway)
The bad
Bit of a one trick pony, poor support for imagery, interaction etc. but it does what it says on the tin, well.
Recommendation
Great for testing font choices and creating a solid typographic system that respects baselines etc. but the monthly subscription is maybe a little steep as I can’t personally see a need for this on a weekly basis given the variety of work I do. May well be perfect for others.

Webflow

What is it?
A web app focussed on creating responsive sites
The good
Solid intuitive interface
Great feature set
Support for animation and interaction
The bad
Monthly plans only
It’s a web app so there may be security issues for sensitive design projects in large organisations
A few bugs but they’re actively being squashed
Recommendation
This is definitely the closest to what I was looking for, really enjoyed using it and the animation/interaction support is heading in the right direction for fast/rich prototyping. Only the price is making me second guess committing when I already have Adobe CC.