The state of interactive design tools in 2018

What's hot and not in the world of prototyping and pixels

Several years ago, I wrote about my feelings on why the continued usage of Adobe Photoshop as a web / interface design tool didn’t make sense in a rapidly evolving industry. In particular, I noted how essential it was to keep up with the times as “tomorrow it could be a whole new ballgame.”

Well, play ball: it’s tomorrow and a new season on the creative front with more tools for designers to bat around than ever before. I figured now was a good time to get up-to-date and address the current state of things…particularly my thoughts on what’s out there, what makes sense and what no longer does.

Adobe Photoshop

Let’s start with the most prominent design program in the field. Despite improvements with multi-layout capabilities, my opinion on Adobe Photoshop usage as a web / interface layout tool has not changed one bit.

While PSD layout files are still frequently handed off, it seems more people have begun to spend less time in the program than they once did and I think that will remain the trend going forward.

Not to say that Photoshop won’t continue play a prominent role in design workflows. It’s still the strongest raster graphic editing program on the market and is absolutely ideal for compositing single graphics and photos as part of a layout. It’s feature set is quite mature and auto-sensing capabilities like content-aware is something not well replicated (or at all) in other programs.

On the other hand, some would say Photoshop has become increasingly bloated compared to how it used to be. Adobe might be enjoying the success from their subscription model right now, but that has opened the floodgate for leaner, cheaper and subscription-free graphics tools from other companies that are becoming more capable every day.

Sketch

The program I currently spend the most time in, Sketch is a vector graphics editing program that has become popular for UX and interface design. While I’ve seen it described as an Adobe Illustrator alternative, I’d say it’s much closer to a modernized Adobe Fireworks.

Sketch has considerably improved since I last spoke about it and has addressed some of my previous criticisms. The interface is more polished and boasts useful features like symbols, instance overrides, libraries, group resizing / pinning, and much more. Sketch is smarter about missing fonts now, though their alert remains a bit muted.

For all it’s improvements, I feel Sketch hasn’t taken things far enough yet. You still can’t externally link assets for roundtrip editing in other programs (you have to reimport and replace). The typesetting tools could be better, and symbol resizing / pinning features should be more robust. Sketch users have to turn to third-party plugins to fill in some of these blanks, and sometimes those plugins can be buggy or not work well. In addition, Sketch is still fairly notorious for random crashes.

Sketch caught flack for migrating to an annual pay model that costs $99 a year for continued updates to the software, though the program still runs indefinitely if not renewed. I still think this model is little more than a euphemism for subscription software, but that’s become the trend in the industry and is still much more affordable than the Creative Cloud.

Speaking of which, I’ve noticed some departments have pushed for a Sketch-only workflow and try to ween off Creative Cloud subscriptions. I remind them that Sketch is not a Swiss Army knife: complex bitmap and vector graphic illustrations are still best handled by other third-party programs dedicated for it.

Fortunately, options for those tasks beyond the Adobe kingdom has never been better.

Affinity Photo / Affinity Designer

For years, viable alternatives to Photoshop and Illustrator have been bleak. Corel Draw always felt confined to small print shops and publications. To the chagrin of the open-source community, GIMP is realistically directed at tinkerers and enthusiasts rather than businesses and clients. Freehand wasn’t long for this world after Adobe’s acquisition of Macromedia…and even Macromedia had given up on the program during their final Studio 8 suite release.

Things changed when Adobe shifted to a subscription-only model, and there’s never been a better time in the market for alternatives. I think the one company with the best shot of going for Adobe’s jugular is Serif, the company responsible for the Affinity range of software. Unlike other alternatives, Affinity software is available multi-platform which gives them a bigger potential market to challenge the big “A.”

Affinity Photo is a raster editing program that sports an interface very familiar to Photoshop. I’ve found compatibility with existing PSDs to be surprisingly good, aside from a few quirks (mostly involving text). There’s even an iPad version that has near feature parity with the desktop versions – quite impressive for a mobile app. (If only iOS allowed mouse support for individual apps.)

Affinity Designer is a counterpart to Illustrator. While it has all the basic core vector tools, it still lacks maturity with missing various blending and path tools I find valuable in Illustrator. Still, Designer is arguably a bit more user friendly and remains a very capable vector program that will hopefully continue to improve over time and implement more features.

On the future roadmap for Serif is Affinity Publisher, a desktop layout program like InDesign. They’ve also commented that they’re working on a “digital asset manager,” which quite possibly could be an Adobe Lightroom competitor.

InVision

An outlier on this list, InVision is not a design program in the same manner as the others here. Instead, InVision is a rapid prototyping and collaborative tool used in conjunction with other design programs to allow designers to link artboards into a working prototype. The work is then synced to InVision for clients and teams to review and collaborate on.

InVision is worth a mention here because of aggressive moves they’ve been making in the background. They’ve been heavily investing in design systems and workflow products that attempt to bring a fractured market underneath their holistic umbrella.

Most notable of their ongoing efforts is their work on InVision Studio, a FREE standalone design prototyping tool that looks intended to compete directly with Sketch and Adobe XD. Currently under early access without a tentative release date yet, InVision Studio is planned to be a multi-platform product for Mac and Windows.

InVision Studio may have it’s work cut out for it towards adoption as designers may have already migrated to Sketch or won’t venture beyond Adobe. But InVision holds a trump card with those program’s reliance on their Craft plugin. It’s not inconceivable the company may eventually decide to neglect or yank support of Craft in favor of their own Studio software: a balsy move that would essentially force a migration.

For that reason, it’s not surprising Adobe continues to invest heavily in XD, while Sketch has been introducing native prototyping features as of late.

Adobe Muse

I previously praised the direction Adobe Muse was going in with responsive layouts. I never worked with the program as much as I had wanted to, though I’m glad I didn’t bother…Adobe has recently announced the end of development of Muse entirely.

The recent growth of prototyping tools and online website builders likely figured into Adobe decision to end support. Muse had a small and dedicated community, but never seemed to catch on with the majority in the way that Photoshop and Sketch did.

Even if their controversial decision is rational, I think Adobe is starting to gain a reputation of cutting support for software deemed as experimental fringe projects, giving users little incentive to trust them beyond their core offerings. Speaking of that…

Adobe XD

I don’t have a lot to say about Adobe XD: the easiest way to describe the product is that it’s basically the company’s answer to Sketch. Unlike Sketch however, XD is built from the ground up specifically for rapid prototyping and designing interfaces. Another strong advantage is that it’s cross-platform and available on Windows.

Out of the gate, XD’s strength is that it works as a truly independent prototyping program that doesn’t rely on third-party plugins and add-ons to achieve that level of functionality. XD’s interface is dead simple and it’s easy to figure out how to build a prototype and get off to the races. But XD might be TOO simple: features are pretty bare and still feels like the program is playing catch up with Sketch and Craft in some ways.

However, Adobe is getting very aggressive: just recently they announced a free starter plan for individual users…a move that directly competes with InVision Studio (which isn’t even out yet) and potentially seduce Sketch users on the Mac side. Furthermore, Adobe has a lot of new features on the product roadmap for XD that will hopefully bring it up to par with the competition.

It’s obvious that Adobe is all-in with XD and intends for it to be the “Photoshop” of product and interface design. But as I said, some users may not be willing to give XD the benefit of the doubt if there’s worry that Adobe axes this venture as it did with other products like Muse and the Edge Suite. The next year will be interesting, indeed.

Webflow

A while back, I attended a presentation on Webflow at a nearby marketing agency. Flipping through slides featuring scary code and a spaghetti mess of web frameworks, the representative touted the online web design program as putting the power of development in a designer’s hands without ever touching a line of code. It became amusing when web designers in the audience asked about very particular needs or feature requests, and the rep could only respond with “turning to custom code.”

So maybe Webflow isn’t quite like having a team of developers at your fingertips. But Webflow isn’t your father’s web design program, either. Embracing the web better than other design programs do, designers can work directly with web typography (like em, vw and vh), CSS properties, breakpoint-based design and Google Fonts. While Webflow is browser based, there’s no translation layer and what you see in the browser is exactly what you’ll get.

As such, the tool also has a bit of a learning curve for designers who might not be very familiar with web technologies. Because it’s an online program, designers can’t work in Webflow offline like they can with other options on this list (pray your favorite hole-in-the-wall coffee shop has stable WiFi). The price for hosting is also quite high in comparison to other options.

Webflow is also what I consider a reactive product, implementing current trends rather than enabling new experiences. With many design and coding teams doing things far beyond Webflow’s capabilities, I don’t think web developers have anything to worry about.

On the other hand, there are clients don’t want to bother with DIY site template builders like Squarespace and Wix, while their designers don’t want to waste time coding out smaller, boutique sites. In that regard, Webflow knows what it is: it fits the job well for those kinds of situations. And sometimes, that’s all you need.

Patrick Shannon

About Patrick Shannon

A creative professional, photographer and design+technology advocate based in St. Louis, I have worked with a number of businesses, agencies and clients on design, production and marketing for everyday brands. In my spare time, I enjoy woodworking and am still attempting to build a life-sized replica of Optimus Prime out of wood.