The aim of this article is to introduce you to a new graphic design tool that has recently emerged: Sketch. First and foremost, I want to clarify that I am not a shareholder in the startup behind Sketch.
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
Initially, the UX designer produced the wireframes using their prototyping tool, then I would add my UI elements in Photoshop. However, before I could move the wireframe to the design stage, I spent (too much) time recreating the elements in Photoshop. The conclusion was simple and undeniable: using two tools was slowing down our delivery. The underlying solution: using a single tool, but one question remained: which one?
We had two options: use Photoshop or Sketch. We naturally chose the latter for a simple reason: one part of the team (in this case, me, the UI designer) would learn Sketch faster (and more naturally) than the UX designer would learn Photoshop. This choice proved successful, as our delivery speed increased significantly. Since then, a love affair has blossomed between Sketch and me…
The 10 reasons why Sketch became my companion
1/ Sketch opts for Less is more in terms of interface
My first impression was disconcerting. Accustomed to the richness of Photoshop's interface, I found Sketch a bit " cheap ." Don't let the minimalist functionality put you off; you'll get used to it very (very) quickly. As UI designers, we're used to software interfaces with a multitude of toolsets. The interface is clean and uncluttered, and that's its strength. We have just the bare essentials 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
In my opinion, Sketch's main advantage is its ability to be used within the UX/UI workflow . UX designers and UI designers finally have a shared tool that allows each to continue working on their respective challenges. The UX designer focuses on the design: for example, they produce version 1 (V01). The UI designer then uses this version as a starting point to create version 2 (V02). And so on, depending on the number of iterations. But collaborative work also requires 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
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
Asset production becomes quick and easy with the Zeplin plugin. This tool is shared between you and the developers. All your assets will be generated and usable by the development team.
7/ Sketch + Zeplin and Slack
Zeplin can be integrated with Slack . This allows the entire team to track asset exports in real time. Here's how it works: once a screen is finalized, I export it to Zeplin. A notification appears in the development team's #design channel. This virtually eliminates the risk of version control errors. The benefit: more time saved and fewer mistakes.
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
Like its rival, Sketch has developed a viewer for iPhone: Sketch Mirror . It's an essential tool for mobile design.
One last argument
Finally, I particularly appreciate the symbols. Perhaps because they remind me of movie clips in Flash or smart objects in Photoshop. Again, they are simpler, more practical, and lighter than a product from the Adobe Suite.
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
