Do better than Sketch, Photoshop or any other design tool

8 min readNov 4, 2014

Foreword: If you came here and expected yet another article bashing Sketch or Photoshop or any other tool I have to disappoint you — I don’t care about the tools at all. Each has it’s strengths and weaknesses the same time. They don’t do any better or worse than each other because it is just a matter of personal taste and experience, nothing more.

I am not talking about “design tools” but about “designs stacks”. Stacks are something pretty well known to developers. Each developer has his own stack including the IDE (Development Environment, comparable to the “Design tool”), the build system, the version control system, the Ticket/Bugtracker system, the collaboration system and so much more. Being a developer by myself I have to say that is really great to be a developer nowadays because you have so many choices.

Now, as a designer, your choices are a bit more limited. Most designers focus on the actual design tool they’re using every day. Well, this is quite understandable because that’s how things always been working in the design industry. However, the world’s turning around alot faster than years ago and designers are challeneged a lot more than quite a few years ago yet their stacks didn’t really improve over time like it did for developers.

Let’s see what we have nowadays. We have our beloved design tool (put any name here you want it really doesn’t matter at all) and a place where to put our work into. In better cases you either already work with Git or any version control system like LayerVault or you’re still on a network drive. Furthermore we have a collaboration system for internal communication and for communicating with the client. In the worst (read: common) cases that’s your actual mail inbox.

Let me quickly examine the various tools in our designer’s stack we do have nowadays:

The design tool

Our beloved app we’re using 99% of the day. At least in our magical world because in reality you spend most time fixing design issues, collaborating with co-workers and clients(read: Mail) and trying to handle all your work. A designer put into his silent room and working silently on a new awesome design philosophy the whole day on his own in his faboulous design tool is like developers hacking something together by themselves and expecting the result to be working out of the box. This is just no reality anymore.

You need to communicate, you need to find common opinions and ways to handle things, you need to find a common design philosophy, you need to keep up with latest mainstream trends and finally you need to build something your users (or clients) really want. And after all that hard work you need to fix your design and adjust it, you need to have someone creating something usable out of your design and you need to stay on track with it.

This is the real workflow designers are facing nowadays. The design tool doesn’t really matter at all. A developer would say that the language of choice doesn’t really matter as long as it is Turing-Complete you can build anything. It is the same for design tools. As long as they provide the basics like pathes, filling and stroking and typographie you can build anything. Your performance just depends on your personal skillsets and experience with a certain tool and not with the overall quality of the tool at all.

And yes, certainly, great designs can be build in Photoshop even though it was never intended for screen design it does it really well if you know how to handle well. Sketch surely improves for screen design and makes certain things quicker (read: not easier) though the time saving will be lost anyway considering all the time wasted in the overall design workflow.

The storage

The storage is the place all your designs are living within. Earlier days it has been a simple network drive. Nowadays, more and more teams tend to use kinda version control systems like Github or LayerVault. What such a system basically does is that it’ll automatically versionize your files and let you restore to any point of time. Something developers are used to since 30+ years has just recently made it into the design industry. However, in the opposite to coding, handling version control of design files is so much more complicated and no existing system will help you out of this. Let’s start with a simple case — Github allows you to visually compare two PSD-Files next to each other to see what has been changed. However, considering the complexity of modern designs, comparing static shots doesn’t help much at all. Leaving beside that pushing a new version of your 1+GB PSD file on each save takes a serious amount of time, comparing and restoring to any point of time is more complex at second look than it actually sounds.

Surely there’re specialized vendors like LayerVault that is supposed to support design files (read: visual and often interactive images, no text files) though they’re not doing any better at all. In the opposite to Github, LayerVault for example supports viewing Sketch-Files so you can visually compare them. However you’re still having the same issue with more complex designs.

And if that wouldn’t be an issue enough here comes the biggest pain point. Developers are known to work modular means they’re trying to break their sources down to more source-files that work independantly from each other. What this gives is that multiple developers can work on different files easily in the opposite to earlier days (read: years) where you had 10+k files and more making it a huge pain point to change anything within it.

Designers are not as comfortable as that. They can not simple break up their documents into smaller pieces even though that’d make collaboration and change tracking so much easier.

All design tools do have the same issue — they won’t let you easily split your work into much smaller pieces allowing you to work more independently with others creating much quicker results.

Photoshop? Even though you can embedded other files it still is a big mess considering sharing swatches, styles and composite layers. Taking aside that Photoshop doesn’t know a concept of Pages or anything close.

Sketch? Well yes, as a single designer you can quickly create a file with 1000's of pages and artboards (oh sorry, yes I know it’ll start to lag when there’s too much stuff) but how you gonna share and collaborate with others on it? Upload a huge 20+MB file and wait until someone else has finished his work?

The deal should be to be able to break a design into smaller pieces (read: pages, layers, symbols, swatches, typography and more) letting each part to be edited independently while still being able to share all your design assets with others. Practically, something developers are doing since 10+ years.

The collaboration

Collaboration gets more and more important. You’re collaborating all the time. Maybe you’re uploading your designs to Dribble to get opinions from others, maybe you’re mailing with your clients to improve their designs, maybe you’re surfing the web for the latest trends and try to find the swatches for the latest flat-ui colors or components for the google material design or .. maybe your’re simply sitting together with your co-workers to figure the best design.

There’re various tools to improve collaboration like project management tools (Google hit’s 56+ mio hits for project management tools) or your favorite version control system (take Github for example). However, all those tools are either made for project (read: resource) managers or for developers. As a designer you’re pretty much lost. Because all those tools are not able to visually communicate tasks and issues — pictures say more than thousand words and that still holds true especially nowadays.

A customer doesn’t like color XY from the focused input XY at Page XY? Have fun figuring which one and even more found “fixing” it and gaining valuable feedback for exactly that issue.

The interactivity

Since now I’ve only been talking about simple, static designs for websites, apps and more. But there’re so much more into it. What about defining interactivity (read: more than defining a hover-color), animations and generally states of an app or website?

Well what you do is you add (yet-) another tool into your design stack like InVision or any other. Then you export your static design assets, upload them and add “some” kind of interactivity like hoping from one page to another one. Or maybe you’re much cooler and already use framerjs integrated with your Sketch/PSD-Files to add interactivity. If so, you’re pretty cool because besides all the other stuff you’re doing, you’ve just started coding, congratulations!

There’re so many prototype tools out there (most of them by the way focus on mobile apps only — doesn’t help much for real website apps) but they don’t share a common format or they’re having limited design capabilities like only using pre-defined components or they’re lacking version control or they’re lacking collaboration. Anyhow they don’t solve your issue, they just sum up to your design stack requiring to pay yet another monthly subscription, learn yet another tool and try to integrate yet another tool into your existing collaboration and version-control workflow.

Solution?

Well, I think there’s no perfect solution to all of those issues but at least some could be resolved. Here at Quasado we’ve started to create a complete design stack that is ought to resolve most of the issues mentioned here.

We’ve started out by building our own design tool as the base platform for everything else. It is called Gravit, runs everyhwere including Mac, Windows, Browser, Chrome Books and Mobile and best of all — it is free because we think a design tool is just that — a tool and nothing that adds a real value to your workflow so we provide it for free. If you don’t believe me — hop over to http://gravit.io and try it by yourself.

Our next step — the thing we’re currently working on— is a way to build a complete design stack on top of Gravit. For example, we’ve started to split a design into modular parts.

That is, you basically create a project and add design assets to it. There’s no single-design-file anymore. Add independant pages, symbols, styles, fonts and other assets yet easily share every design asset throughout all of your components. Collaborate on single files with co-workers or clients and version control each design asset.

Let us know what you think. Share your opinion with us on this hot-topic.

If you’re interested on our progress on an improved design, you can subscribe to our Newsletter (we’re never sending one, maybe twice a year).

Interact with us via Twitter or Facebook and let us know about your thoughts on topic — we’re accepting hate mails, appreciations, new and fresh ideas and people that do have a different opinion.