If you’re a UI designer, and you still haven’t hopped aboard the Sketch express, you are truly missing out on an app that has taken the design world by storm in the past few years, and deservedly so.
Read on, to find out why it has become my app of choice, improving my skills as a designer in the process, and why you should really look at implementing Sketch into your UI design arsenal.
What About Photoshop?
Hands up. Who’s still using Photoshop for UI design? Fireworks? Illustrator perhaps? The guy in the corner who said “MacPaint”, very amusing, but not in this dojo I’m afraid.
I’m going on a hunch here, and saying that Photoshop had the most hands raised? Of course it did. Adobe’s flagship product has dominated the industry for a considerable amount of time. And as most of us know, it wasn’t originally built for designing user interfaces, but solely for one reason (there’s a clue, I think somewhere in the product name).
But, over time, it became the ‘go to‘ tool for designing interfaces for websites, and applications. My hand used to be raised, like yours, as a devoted user of Photoshop for over ten years, designing for more web projects than I care to count.
But the abundance of interface clutter, with menus, panels, and countless extraneous options, became an unwanted distraction, when all you want to do is just design, for the web. And so it came to pass, I needed to look for something more relevant to the digital designer of today, and the folks over at Bohemian Coding kindly stepped up to the mark with Sketch.
Introduction to Sketch
Now I first played around with Sketch, which was up to version 2 at the time, back in November 2013. And as much as it was great to see a new kid on the block, ready to take on the behemoth that is Adobe, it was still a product lacking in many areas, and due a visit from pest control, with the amount of bugs present.
Then, Sketch 3 came around, and this changed everything, for the better.
Simplicity. That is probably the one word that I feel, best describes Sketch. It strips back the aforementioned interface clutter of those applications that I mentioned before. It’s role is specific, and concentrated, and it gets you back into designer ‘Zen’ mode, which is more than welcome on a daily basis.
In the past, working in Photoshop, on a large scale web project would mean countless large files for the various screens you were designing for. Weighing in at 100’s of MB for each of those files, and jumping between separate files on the many revisions a project may take, was a truly time-consuming task, and hard-drive busting dilemma.
But with Sketch, and it’s truly awesome ‘infinite canvas’, you can quite happily have all your various screen designs, or Artboards, as they’re labelled in Sketch, all in one single file.
So let me share some more information on how I used Sketch on my latest project, and some of the truly great features this application brings to the party.
Clean Interface
When you open up Sketch for the first time, you are presented with a pleasantly clean, uncluttered interface. You are not daunted by an array of unnecessary options, and tools. Sketch cuts out all the fluff, and lets you focus purely on design, without any distractions.
Code Friendly Designs
Everything that you create in Sketch can be easily reproduced with CSS. That includes, borders, shadows, gradients (all their CSS properties ready to roll at the click of ‘Copy CSS Attributes‘). Bevel & Emboss, and it’s ilk, have promptly been shown the door. The use of CSS logic throughout the app is truly refreshing.
If you are working alongside a developer, it’s great to know you are both on the same page, and there are no hidden surprises for them, once they begin to code up your designs.
There a few companion applications for Sketch that I have come across in recent months that can aid even further when going from design to code.
Vector All the Way
With Sketch, it’s vector all day, every day. Each, and every element you produce inside of Sketch is a vector, which for a UI designer is a given.
With a varying amount of screen sizes to design for, and swift changes that need to be made in the design process, having each element resizable, without loss of quality, is an absolute must.
And remember, if you’re working on either icon, or illustration design you can easily switch from vector to pixel view to refine if needed.