Design Tooling is Still Figuring Itself Out

It probably always will be, to be fair.

At the moment, there are all kinds of things that design software is struggling to address. The term “screen design” is common, referring to the fact that many of us are designing very specifically for screens, not print or any other application and screens have challenges unique to them. We have different workflows these days than in the past. We have different collaboration needs. We have different technological and economic needs.

Let’s take a peak at all this weirdness.

Design tooling is still figuring out Responsive Design

It’s almost taken for granted these days that any given new web project (or redesign) will be responsive design. Responsive design is the answer for screens of different sizes and different capabilities. So we can’t just design a 1280px wide version and call it a day.

Software like Sketch has made multiple artboards of arbitrary sizes a first class citizen to help with this.

This doesn’t completely solve the idea that we’re designing for screens that can be of wildly different sizes, dimensions, and densities, but it certainly helps communicate a lot more than just one size does.

But how do you create all the different artboards you want to create? Copy and paste, resize stuff, and drag stuff around? You could, but design tooling is starting to figure itself out here a little. Here’s a Sketch plugin called Constraints that is trying to make this easier:

Figma has this idea of constraints built right in:

Webflow is a unique design tool in that you aren’t quite dragging things around as totally arbitrarily as you would in something like Sketch or Illustrator. Instead, you’re manipulating things that are actually 1-to-1 representations of real web layout properties like margin, padding, and even things like flexbox and grid. They’ve made working with the Webflow editor naturally responsive, and you can see it immediately as you work.

Design tooling is still figuring out Collaboration

Imagine you do your designing with Photoshop. You have `.psd` files that are your designs. How do you deliver them? Email? Maybe, but that’s a little messy for teams. Perhaps you have a shared Dropbox folder?

Adobe knows design teams need this. They have “Creative Cloud”, which does everything from managing the actual software you have access to, to getting you access to design assets like fonts and stock photography, to helping you share files:

Sure, but that doesn’t do anything besides giving everyone access to those files. There is even merge conflict danger, if multiple people are working on the same file.

The files themselves are only part of the story of collaboration. What about version history? What about notes and feedback? What about approval?

Invision is a big player in design tooling, and I would guess mostly because of the collaborative features. You don’t create your designs in InVision, for the most part, you just upload them there and then do more with them, like talk about them:

What if there wasn’t really “files” at all to deal with? When your design software is a web app, the design documents aren’t really documents you need to deal with yourself, they just kinda exist within the app. Figma is like this:

Plus, Figma offers teams, meaning collaboration amongst a team is just a matter of logging in and having shared access to everything.

Taking collaboration even further, Figma has realtime designing features. As in, Google-docs (or CodePen Collab Mode) style editing-at-the-same-time action:

As a testament to design tooling still figuring itself out, I don’t think Figma pushes this feature very heavily anymore, marketing-wise. I think they have found that despite it being a showy feature, actual design teams don’t really like it. Who knew.

This is an interesting read by Meng To comparing Figma and Sketch.

Design tooling is still figuring out Assets and Versions

Design can be more than screen mockups. A design team might need access to an icon set, a branding system, a color palette, a set of flat graphics…

Take a look at Lingo, which is an app explicitly for this. Collaboration is a key feature, but its team collaboration is based on assets.

I can imagine a tool like that not only making the sharing of assets easier but keeping the version of assets everyone is using up to date. As in, preventing people from keeping a “folder full of icons” on their local machine and having it go stale.

And speaking of versions… I’m sure we’ve all experienced (and heard the jokes) about files named things like:

Homepage_v2_final_FINAL_no_really_THIS_ONE_is_FINAL.psd

Developers don’t really have this problem thanks to version control. Where is version control for designers? Apps like Abstract are trying to help with that.

Abstract doesn’t only help with collaboration, but version management as well.

Everything is saved. Nothing is lost. Version control you can trust.

Design tooling is still figuring out Design Systems

As I recently said:

We’re not building pages, we’re building systems. Style guides. Design systems. Pattern libraries. These things are becoming a standard part of the process for web projects. They will probably become the main deliverable.

We’ve seen design software slowly start to accommodate this kind of thinking over the years. Even things as simple as type styles took their sweet time making their way from places like InDesign (where they couldn’t be lived without) over to Illustrator and Photoshop. They are so clearly needed that newer design tools always seem to have them.

Yet, if type is specifically what you are doing, there are tooling options specifically for that. Tools like Typecast are for that:

Or TypeNugget, which we’ve covered here:

One web app design tool, UX Pin, is focusing heavily on being a design tool for design systems.

We’ve covered that before, and you can see more about what they mean here:

Design tooling is still figuring out Interactivity

As much advancement as we’re seeing with design tooling, we’re also seeing that it’s very hard for single tools to do it all. Interaction design is a great example of this.

Hover states! Swiping and gestures! Page transitions! Animations! Tap feedback!

As good as Sketch is at certain things, there is next to nothing there for handling interactivity. One one hand, it’s a shame. Screen design is loaded with interactivity. It’s definitely on designers minds and a must for their job. On the other hand, I might worry about bloat and lack of focus if all design tools tried to pack in interactivity tools.

Check out Framer, who are tackling interaction design head-on:

Framer is a visual design tool, with all the familiar styling tools (including some interesting constraint-based responsive stuff), but approach the interactive stuff literally through coding within the tool:

Design tooling is still figuring out Platforms

I feel just a smidge guilty every time I talk about Sketch, because I know it’s macOS only. That excludes a huge chunk of people who work on websites. They don’t even plan on it. Familiar players like Adobe generally make their products cross-platform, but even that is limited compared to the web-based tools, which work on any platform. I’d say web based tools like Figma and UX Pin have a strong advantage with the inherent collaboration and sharing abilities along with the cross-platform ability.

But desktop machines, regardless of platform, aren’t the only story here. Certainly Apple had designers in mind with the iPad Pro:

What kind of design software is available on that? Affinity Designer seems to be working on it:

It's quiet in the office today and I'm feeling mischievous… Who fancies a bit of #affinitydesigner #ipad #shakycam teaser? 🐱 pic.twitter.com/ZfbSIJY5Vn

— Matt Priestley (@mattp4478) July 12, 2017

And tools like Graphic:

Design tooling is still figuring out Trends

You can fill a box with noise in Sketch:

I’m not entirely sure why, but I imagine it might influence designers to use noise in a design. There is no one-click option to fill an area with tiny beetles, but I imagine if there was we’d see more divs filled with tiny beetles.

Adobe Experience Design has a “background blur” feature, no doubt inspired by recent Apple designs.

Heck, I can distort and object by “Polar Coordinates” in Photoshop.

Design tools influence design, and design influences design tooling. Whatever the default opacity settings are will influence design. Whatever the default gradient colors are. Whatever the default easing values are.

Design tooling is still figuring out Data

I imagine you’ve heard some full throated arguments both for and against lorem ipsum text. “It doesn’t reflect real design!”, you might hear. Whatever you think, it sure is interesting to see design tooling try to take on designing with real data.

Adobe Experience Design has some interesting features along these lines. Take their Repeat Grid tool, which is an interesting prototyping tool in it’s own right, and can also help fill in real text and images:

Webflow helps with designing with data quite a bit too. They’ve said:

Designing with real data gives us a deeper understanding of how a page will function. In part because it surfaces all the “problems” designers strive to avoid in their mockups, such as long headlines, low-quality images, etc.

Designing with real content gives both writers and designers better insight into what they need to do.

They have an in-built CMS to store structured data, then design tools to help get that data onto designs:

Design tooling is still figuring out Pricing Models

I bet many of you remember when Adobe software was an (expensive) one-off cost. Now the transformation is complete and we’re looking at anywhere from 10 to 50 dollars monthly to use the software, which I suppose makes it more accessible to some and less accessible to some.

Web apps are almost always a monthly cost. Figma is $12/month/user for teams. Business wise, for the creators of software, that seems to be the smart move. My own experience echoes that. But I can see how that can be a turn off for a native software product. Sketch is a flat $99, which I admit feels nice.

This will never shake out, surely, and it’s not just one-off cost vs. monthly. There are free trials, freemium models, in-app purchases, and add-on models that all could and are being experimented with across the tooling landscape.

Wrapping Up

There is so much more to this, and I’m hardly the person to cover it.

For instance, I didn’t talk too much about designing in the browser, but there is certainly tooling there. Aside from those few typography-focused apps, we didn’t focus on the proliferation of tiny single-feature apps out there. Coolors is an example of that that I quite like. Not to mention the loads of design resource sites. We also didn’t talk about wild crossover projects like React-Sketchapp.

Let’s end with an interesting related article. Colm Tuite recently wrote “Design tools are running out of track. Here’s how we can fix them.” Here’s one of his points that I think is salient:

Why can’t designers just design the actual product?! Ultimately, all mockups are disposable, yet designers spend months tweaking them to perfection. That time would be much better spent tweaking the actual product.