Disclaimer: I am not affiliated, associated, authorised, endorsed by, or in any way officially connected with any of the companies or products mentioned in this article or any of its subsidiaries or its affiliates, though I'm more than open for this to change ;-)
As anyone who's ever worked with me will know, I have a love/hate relationship with Photoshop.
I love the way I can manipulate images to rescue a poor shot, or retouch a photo and make it really sing.
What I hate is using it as a layout tool – especially when designing interfaces, apps and websites. This isn't a new feeling for me. From back in the day, I used to make mockups using Adobe Fireworks (right from when it was published by Macromedia), and even though it was buggy as hell, it was still streets ahead of Photoshop for rapidly creating layouts.
I'm not great with writing code, so over the last few years (since Adobe discontinued Fireworks) I've been on the lookout for a new tool of choice for screen design and I stopped when I found Webflow (www.webflow.com). Here's why:
Real prototypes
When end-users are going to use your product in a browser, it's would be great if our prototypes could be viewed in a browser as well. This is where Webflow really shines – the app itself is browser-based and (for the most part) what you see in the app is what will be published for your end-user.
But there's more to this than just having some HTML and CSS rendered in a browser instead of a static JPEG. Users can navigate their way around and interact with the prototype as they would in the finished product.
Previously, I would have had to make a series of designs to match particular screen sizes, but now my prototypes can now be viewed on any device, be it laptop, tablet or mobile, with complete fidelity.
Speed
Let me suggest a scenario I'm sure many will have experienced – you're close to finishing up a beautiful design for a screen and you notice the line-spacing in the main body text is a little tight. So, you increase the spacing up just a touch, and watch as it starts to spill into the footer you've so carefully crafted below. Next you select the layers that make up your footer (as long as you've organised your PSD well!) and shift it down and try and maintain the same gap above as you had before. You'll also notice that the bottom of the footer is now off the bottom of the canvas, so you'll make the canvas longer until the footer fits again. Rinse and repeat on all the other screens you've designed.
The same scenario using Webflow requires you to increase the line-spacing and everything else will shift down accordingly. Not only on the screen you're working on, but also on all of the others which use that style.
Sharing
Exporting flat visuals is fraught with risk – we really have little control over how the viewer will look at them. They might be looking at a tablet mockup on their mobile or vice versa.
Webflow prototypes are shared with a link, which will render correctly on the viewers device, so they can feed back without having to guess. Also, the links can easily be password-protected.
Output
One of the major advantages is that Webflow prototypes are created using HTML, CSS and Javascript. Even though you don't see it much while you're designing, it's still there!
This makes the handover to a developer so much more informative. Not only can they re-use the styles you've made in your prototype, they can see exactly how your interactions are supposed to behave. Instead of having to tell the developer that a transition should last 250ms and needs a quadratic ease-out, it's all there in the code.
Developers should be able to spend their time doing hat their best at instead of having to slice and decipher massive PSDs.
Real data
Having real content always changes the nature and feel of a site, and it's great for the viewer to be able to feed back on something that's real rather than filled with lorem ipsum.
Making this happen using Photoshop is a long and laborious task of copying and pasting while Webflow allows you to import CSVs directly into the app.
Actual products
I've mainly been talking about prototyping as that's where most of my screen-based work lies. But there's no reason not to build fully functioning sites, apps and landing pages using Webflow. As it happens, this site is built using Webflow and the associated CMS.
Although it's not something I've done, but you can use Zapier to create all kinds of connections to data and content.