Lets have a look at Sketch

Design, Digital, Opinion, UX

Everyone is talking about ‘Sketch’ in the office…

“Sketch is amazing, Sketch is so fast, how can you still be using Illustrator, you know it’s vector based right?”

I’m always a bit wary of over-excitable people; nothing is ever that amazing. Being a Mac only application isn’t a great way to kick off our relationship but “lets have a look at Sketch”.

Time to mess about with ‘Sketch’

As I update my ‘Adobe CC’ suite, on the side I download a free trial of ‘Sketch’, followed by a set of colleague recommended plugins (Distributor, Dynamic Button, Craft and Marketch).

I generally pick up new software very quickly so this should be easy. Before I begin messing about with any of the tools, I start customising my toolbar. What does what, and therefore what belongs here, grouped with this and that. ‘Sketch’ very shrewdly reuses existing naming conventions and keyboard shortcuts, however with a lifetime of using ‘Adobe’ products I am always confused why similar software just doesn’t copy all of them over.

Time to mess with the entire tool. I begin by drawing a rectangle. By default it has a stroke, not sure I asked for that, but I guess that’s the deal?! Removing the stroke and I have my rectangle all grey and quite lonely. But before I continue further, ‘Google’ resolves the default border rectangle issue. Draw a rectangle the way you want (without a border) and then under the “Edit” menu select “Set Style to Default” and now every new rectangle drawn will be borderless.

Lets copy and paste a rectangle. It appears above the existing rectangle and my first thought is what does “Paste Over Selection” do differently from normal “Paste” which seems to paste above your selection anyway? Basically it pastes to the front of all layers above your selection where as normal paste just pastes above your selection in whichever layer hierarchy it’s in.

A clever trick is duplicating a shape by holding “alt” and drag the new shape to your desired position. Once dropped in place by clicking “Duplicate” your next shape will place itself in the exact movement away from the original shape, allowing you to position items equidistant from each other very quickly.

Sketch copy & paste function

Within an hour I’m drawing complex components, reusing symbols and designing things I design everyday on ‘Illustrator’. I’m impressed how easy it really is to use and anything not obvious from the off is very quickly worked out shortly afterwards.

I really only miss the ‘Reference Point’ identifier tool within the ‘Transform’ window, which I heard if you make a big enough fuss they may introduce in a later release.

Reference Point Identifier Tool

Marketch plugin gives ‘Sketch’ the edge

So as my day comes to an end, I feel I’ve got a good grasp of ‘Sketch’. If I had to choose between ‘Illustrator’ and ‘Sketch’ I actually don’t think I would mind, as they are both so very similar.

However, what would be the deciding factor for me, are some of these plugins I’ve downloaded. I am most keen to try out ‘Marketch’ as it produces CSS values which you can handover to the front-end developers.

The largest challenge across most design projects is not what the UX and VD designers are producing amongst themselves and for key stakeholders but what finally goes to Development. In my eyes what really matters are the tools the designers are using to bridge the gap for a more efficient and accurate development build. As development teams increasingly move abroad they are still the largest drain on a project’s budget and therefore, the biggest risk.

The days of… I like using a specific software because you’re great at it are over. As a designer the single design tool is becoming less important. What’s more vital is your place and involvement in the process.

We do not design in silos, the team makes decisions and therefore designs have to be flexible for rapid presentations, prototyping and implementation.

UX

Using ‘Illustrator’ you have to manually spec every pixel, which is very time consuming and varies dependent on the skill of the designer. ‘Sketch’ with the plugin ‘Marketch’ creates a HTML holder providing CSS values direct from the designs. This allows the user to select on specific elements and see in CSS how it has been put together as well as its spacing between other elements on the page.

 

marktech

My initial impressions are very positive…

…I only have two concerns.

The first is that it all depends on the skill of the designer (as with ‘Illustrator’) and if they make a mistake somewhere it feels like it will be a lot harder to spot having to select every element first to see its CSS values. Using a permanent document like a PDF, all the CSS values are surfaced and easy to skim through instantaneously which you could also print and take away.

Lastly the accuracy of ‘Sketch’ itself as a visual design tool. I have some examples below of the ‘Line’ tool misbehaving across ‘Sketch’ and ‘Marketch’. Consistency and standardisation of how things are drawn and should work will eliminate errors. If there are three to four ways of drawing a line this will cause confusion. I recommend sticking to 1 pixel high rectangles until this is resolved. (Click on the images below to make them larger and legible).

    MArketch3

Marketch 4

‘Sketch’ with its ever growing plugin community definitely has the potential to leave ‘Illustrator’ lagging behind. It’s not perfect by any means, but it’s a great start. Keep the updates coming.