I’ve always liked to describe Sketch as the love child of Photoshop and Illustrator. Imagine stripping back Photoshop to the basic UI tools you need, making it vector-based and having additional features that make your life a lot easier as a UI Designer. Subtle differences such as being able to change the corner radius of a shape after it’s been created, quick application of gaussian blur to layers for iOS apps and great exporting capabilities are a few examples that make the tool more practical than Photoshop. Photoshop was originally designed for photo editing and this becomes evident when comparing to a tool like Sketch.
Just as a disclosure: this software would be ideal for UI Designers who believe in sustainable and flat design that follows native patterns. If you find yourself using textures and extensive layering and effects in your designs, then this isn’t the tool for you.
Sketch has been adopted by many major players in the industry, such as Apple, Facebook, and Google to name a few, and this shows the extent by which the tool has taken the industry by storm.
Here at JUST EAT we made the transition to Sketch not only for the functionality detailed below, but because it was so easily integrated into our product cycle. The small price – a mere £80 one off payment – meant that we could extend the tool out to our native engineers who are beginning to use Sketch files as UI reference, instead of requiring a dull design spec with hex codes, font sizes, padding values and so on. Brace yourselves, this may be the end of redlining.There are a number of additional features in Sketch, which are made specifically with UI design in mind. You can set font styles to text (similar to InDesign), which means that changing the body style across all screens can be done with one click. Say you get feedback that the font weight for body is too heavy, this can now be a much simpler task than having to trawl through and set the new style to each layer.
Additionally all screen designs can be within one Sketch file thanks to artboards (as seen in Illustrator) and can be exported all at once. Photoshop has recently added this feature, which shows that they consider Sketch as a credible competitor.
Sketch is also great because they open up the tool to many third party developers, which means if you think “wouldn’t it be nice if I could do this in Sketch?” it’s probably already available online. My favourite plugin helps me quickly export assets for Android with a simple click of a button, instead of manually creating a single asset in five different sizes.
Some more tips for designers:
- Zoom in and out by small percentages by holding down cmd and scroll your mouse.
- When you click on an item it selects the top level group layer. In order to click on the item layer you need to hold down cmd.
- Masking with a fade tutorial
- Most get overly excited by symbols and create master elements such as the header and tab nav but it actually causes more issues. It’s best to use this for icons instead.
- Preview designs live on a phone instantly with the Mirror app
- Save time designing by using these free UI kits
- When you paste an item in Sketch you tend to lose it – hold down alt and it will show red guides that helps you locate the item.
Some tips for developers:
- Select an element by holding down cmd + click to reveal right panel with values of the dimensions, font styling, colours, opacity, angle, corner radius, and so on.
- Hold alt to see the distance between elements for correct padding and margins
- Export iOS assets by defining the outputs in the right panel (we use PDF as opposed to the traditional 1x 2x 3x)
- Export Android assets using this plugin
If you haven’t already done so, go ahead and download the free trial!