For a few months I’ve heard lots of opinions that Sketch is a great tool that can break Adobe’s monopoly and replace Photoshop. At first, I’ve treated it stiffly /I wasn’t quite convinced – you know, new tool, it takes a lot of time to learn it, maybe it’s trendy now but it will stop in a few months. But, to be honest, is there anything I can lose trying it? I believe it’s always best to form your own opinion instead of relying on the views of others. So, I’ve started my first Sketch project! And I have to say: it was worth it! If you hesitate – don’t! Here’s why:
Get the app!
I’ve used the Sketch trial that provides 30 days of free access to all the tools. First of all – it’s so easy to launch the app with only 26,5 MB to download and a few clicks to install it. It’s a big advantage over 1.5 GB that Photoshop takes from our disk, not to mention the time of downloading such a file and creating Adobe Account.
Let the story begin
Ok, so here we are – a completely new tool. I’ve never seen even a single tutorial on Sketch, so it can be a challenge to create a high quality design. To check if Sketch tools can provide exactly the same level of UI Design as Photoshop does, I’ve decided to recreate one of my Photoshop projects with the new app. It was a mobile design, with a few gradients, shadows, avatars, custom shapes and icons. Not a basic template.
Document resolution? Not a thing!
First of all, you don’t have to worry about document settings – all elements created with Sketch are vector objects, so they can be easily implemented to any needed resolutions without losing a quality. You can’t accidentally rasterize the icon, images won’t be blurred, isn’t it great?
Easy to use artboards
Similarly to Photoshop, in Sketch you can work with artboards, but they’re so much easier to use! Just choose “Insert” from top menu, click Artboard (or A shortcut) and then draw a new artboard. You can also use one of the predefined artboard sets like “Responsive Web Design” which automatically creates three artboards for web, tablet and mobile screens. My experiences with Photoshop artboards are rather not good – moving between them usually works slowly and they’re hard to move – or quite the opposite: I select them and drag when it’s not needed – all of it made me stop using the feature. UX of Sketch’s arboards is different – according to it’s intended purpose it’s a great tool that, instead of disturbing, helps designer to have an insight into entire project and work on a few screens at once
Manage the document
Of course you work with layers but additionally, you can also create pages for your document. Want to keep an iOS and an Android version of the app in the one document, but not just next to one another? Not a problem – create separate pages for both design versions. And when it comes to operating systems – Sketch provides a few initial UI Kits like “iOS UI Design” or “Material Design” that help to start project and create design within the UI guidelines.
Number of tools, comparing to Photoshop, is strongly reduced. You can choose from essential of UI design instruments – Vector (to draw a new custom element with Bezier paths), Pen (to create shapes more freely), Shapes (with basic ovals, rectangles and polygons), Text and Image. That’s all, and to be honest, it’s great! Who needs more for creating UI design? Designer isn’t distracted by Clone Stamp, History Brush, Eraser or other tools that will never be used for creating user interfaces. For sure they’re great when you edit photos, but it’s the secondary thing when making the web design.
Custom shapes and masks
If you work with Photoshop and need a custom shape like speech bubble, you have to create and paste a vector from Illustrator or try to draw a custom path in Photoshop. The first one is ok, but editing such an object forces you to open Illustrator again. The second is very non intuitive and inconvenient to use. Creating custom shapes in Sketch is quick and easy. II figured out how to do it without any problem, although, as you remember, I’ve opened the app for the first time. You can easily merge a few shapes into one with a click in the top menu, or just use the Vector tool to draw bezier path. Want to edit a shape? Select it and click “Edit” at the top – now you can move the anchor points. So easy, so quick, no additional software needed.
Mask tool is also a great feature (again at the top menu). Select shape and image and just click the mask icon – voilà! It’s done! Double click on the new element and you can easily edit the image position. So clear, so fast!
Edit the element
All essential edition options are placed in the right panel. You can precisely set a position and dimensions of the element, change its filling and border, apply shadows or blur. All of these features are easily editable, no need to open separate window to set the new gradient or change opacity of the shadow. Less clicks – more fun to use!
I’m charmed. User Experience of Sketch is so enjoyable – all options are available in just two or three clicks, no pop-up windows, no redundant tools – everything is so smooth and simple. In two hours I’ve created project just as good (or perhaps even better) as my PSD original. Of course, it was the time I’ve spend just to re-create the design, no UX thinking or creating a few UI variations included, but still – two hours for making advanced UI with a new tool – it’s a pretty good result!
Sketch is a great software for UI Design, but it has some limits if you need to modify images. The app has only basic colour adjustment tools like hue, saturation, brightness and contrast, so if you like playing with levels or filters you still need the help of Photoshop. One more major limit is that Sketch requires having Mac OS – a lot of designers use this operating system but there is still a great number that is faithful to Windows. While there is no official way of launching Sketch for Windows, it, of course, can be coped with – check out Martjin’s article and find out how to hack Sketch and use it with your Windows.
So far, I had the opportunity to check only the “design” part of the app, I’m not sure what about slicing and implementation of the UI into code, but reviews that I’ve read are promising – Sketch gives us an option to generate all objects into separate files and save it x2 or x3 size if needed. Moreover, all effects that you can apply on layers are fully able to be coded – no fancy, but unrealistic shadows or layer blending styles. Is it true? Hope to check and share it with you soon! Stay tuned!