Sketch vs. Photoshop. Confessions of a UI Designer.

The objective of this article is to introduce you to a new graphic design tool that has appeared recently: Sketch. First of all, I want to make it clear that I don't am not shareholder in the start-up behind Sketch.

cover-sketch-photoshop

In 2017, why do UI designers (still) use the Creative Cloud?

I have been using the Creative Suite since version 5.0 of Photoshop. I have been able to follow the evolution of this software and for some time I have had a strange feeling: Photoshop no longer fully met my expectations as a UX/UI designer. I had heard of Sketch but thought it wouldn't “do the job” as well as my faithful friend Photoshop. But that was before ! The changeover took place within the framework of a mission where I was working as a “team” with a UX designer. We were facing a major problem: we had to iterate very quickly on a large number of screens.

Use of a common UX/UI designer tool

At first the UX designer produced the wireframes on his prototyping tool, then came my UI intervention with Photoshop. Except that before being able to "create" the "wireframe" I spent (too much) time recreating the elements in Photoshop. The observation was simple and clear: the use of two tools slowed down our delivery. The underlying solution: the use of a common tool, but a question still persisted: which one?

Two solutions were offered to us: to use Photoshop or Sketch. Our choice naturally fell on the second for a simple reason: the rise in skills of part of the pair (in this case me the UI designer) on Sketch would be faster (and more natural) than the rise in skill of UX designer on Photoshop. This choice paid off because our delivered reached a higher velocity. Since between Sketch and me, a love story is being born... 

The 10 reasons why Sketch became my companion

1/ Sketch opts for Less is more in terms of interface

sketch-3-4-material-design-icon

My first impression baffled me. Accustomed to Photoshop's rich interface, I found Sketch a bit “cheap“. Do not let yourself be diverted by the purity of the functionality, you will get used to it very (very) quickly. As UI designers, we are used to software interfaces with a lot of tool palettes. Lhe interface is uncluttered and that is where its strength lies. We have just the “vital minimum” to design our interfaces.

I see two advantages to this:

  • The firstA: more space for designers. No more tool palettes that come over your countertops.
  • The second : smade it easier to learn: few tools, so very quick to get started. 

2/ A common UX/UI tool

sketch_collab

In my opinion, the main interest of Sketch is that it offers the possibility of being used in the workflow UX/UI. UX designer and UI designer (finally) have a common tool that allows everyone to continue working on their issues. The UX works on the design: for example, it produces a V01. The UI starts from this version to create a V02. And so on according to the number of iterations. But who says collaborative work also says organization.

Together, we have implemented a precise nomenclature to optimize file sharing. A wording tip: date_filename_versionXX. Each new iteration corresponds to a new version. Practical and formidable efficiency!

4/ Sketch uses the mac language natively

Native, did you say native? I spare you too technical considerations: remember that Sketch is native to MacOS. Thus, it is of an impressive speed of execution.

Another advantage is that it embeds free iOS functions such as versioning, auto-saving, and (hyper) precise font rendering. All operations are non-destructive: combinations and transformations of vector shapes are reversible. Convenient !

5/ The wealth of plugins and an active community

1-OdxoqLP-NvjW_7EhDof-Hg

The community behind Sketch is very large and very active. For example, the addition of symbols that appeared in V03 came about thanks to user feedback.

And at UX Republic, we appreciate it when software vendors are user-centric, not product-centric. Sketch was first an MVP (Minimum Viable Product). Its team, listening to its users, develops future updates. An approach that we practice in UX and which has many advantages: the software evolves according to the needs and uses of users.

https://www.sketchapp.com/extensions/plugins/

6/ Exporting assets

Zeppelin

The production of assets becomes easy and fast thanks to the Zeplin plugin. This tool is shared between you and the developers. TAll your assets will be generated and usable by the dev team.

7/ Sketch + Zeplin and Slack

Zeplin can plug into Slack. Thus, the whole team can follow asset exports in real time. I'll explain the principle to you: once a screen is finalized, I export it to Zeplin. A notification appears in the Channel #design of the development team. Thus, the risks of errors related to versioning are almost nil. The gain: more time and fewer errors.

8/ A tool at an attractive price

A $99 license, yes you read that right! It's more than attractive as a price compared to an Adobe license.

9/ Full vector & css

One of Sketch's strengths is also its 100% vector approach: practical, simple and fast. Similarly, sketch is designed to create UI: everything you design can be done in HTML/CSS. A code generator functionality is also available.

10/ Sketch mirror

mirror-png8

Like its rival, Sketch has developed an iPhone viewer: sketch-mirror. It is an indispensable tool for mobile design.

One last argument

Finally, I particularly appreciate the symbols. Maybe because they remind me of them movie clips in Flash or Smart Objects for Photoshop. Once again, they are simpler, more practical, lighter than an Adobe Suite product.

layers@2x

To finish convincing you

Despite his young age, Sketch has everything a great (or almost). Its regular evolutions suggest a more advanced collaborative mode where UI & UX could work at the same time on the same file. If you enjoyed this article, I invite you to consult this article which is a very good complement to this one. and which corroborates this trend that we observe in our various missions at UX Republic. And you what do you think ? Let's discuss about@ux-republic
https://www.invisionapp.com/blog/sketch-vs-photoshop/
Jérôme Fiorese, UX-Activist @jerome