What is Sketch and why your digital designers should be using it

A graphic showing the Sketch Logo

I am a marketing communications consultant (Thread & Fable) who works with companies like SMILE on digital projects. In this article I run through why marketers should pay attention to what systems their tech team are using and why it can make a difference to the project process and ultimately the cost.

What is Sketch and why your digital designers should be using it?

As a consultant, I may talk the talk of what I’d like from digital design elements or a user experience, but when it comes to the practicalities, that’s where I usually look to digital designers to know their stuff. Ensuring you’re talking the talk and having some understanding of what the process is behind your digital design, can result in your projects being more streamlined, more effective, and ensuring you get more value for money. Sketch is a great place to start.

Sketch not only does great things for designers, it also makes life for us in marketing easier too…

It readjusts whatever is being worked on, no matter the size: The technical term for this is ‘non-destructive UI focused vector concept’ but this makes my eyes go dry, so let’s try and explain it! For me, what’s useful to note is that whatever size layout your designer is working on, unlike in programmes like Photoshop, working in sketch allows designers to be smarter in the setup of their files. The result are responsive designs that don’t need to be reworked for each device, for you to check out and approve. It’s really hard to get a feel for the quality of a design when it’s partially pixelated or shared with you under the caveat ‘please sign this off, but it won’t look quite like this at the end’… argh, it’s a tough one getting that request!

Text in design: When it comes to signing off work, another thing I see a lot are designs filled with ‘lorem ipsum’ text — wouldn’t life be so much easier if designs had real content. Say hello to Sketch. In days gone by, adding or changing text within a digital design, could cause a lot of extra work, with some tools demanding each element be resized. With some clever setup, Sketch can automatically adjust sizes of elements, so text fields will adjust to fit the space and any margins around it are automatically adjusted too — this allows tweaks to be made without kicking out the rest of the design, saving your designer (and you), time.

Design tricks are simpler: Easy for me to say as a non-designer, but because Sketch allows designers to create intelligent design systems that can adapt to requirements, the process of designing digital properties is slicker and more consistent. In tech-speak, this is down to everything being CSS based, meaning they can adapt things easily and customise to the clients. Winner.

Plug-ins: So far, I’ve referenced Sketch’s standard tools, but it doesn’t stop there. When it comes to plug-ins, this is where Sketch really comes into its own, according to SMILE’s Creative Director Matt Lees:

“Designing for screens has evolved hugely over recent years. The list of devices that web properties need to adapt for has grown extensively. Web technologies have moved on, opening a number of doors to us as digital designers. As a result, our process has had to evolve. Over the years we’ve used a whole bunch of different tools for design, including Photoshop, Figma and Atomic. All had their pros, but none ticked every box. Then we landed on Sketch.

“Sketch has a solid feature set out of the box, but it gets even more powerful when you take into account the suite of plugin extensions available. We’ve used numerous plugins to extend our workflow and connect with third party programmes such as Sympli (a tool for client feedback and developer hand off). One of the single most powerful plugins we’ve come across so far is Anima.”

According to Matt, Anima boasts a few powerful features, but two stand out:

1. Stacks: SMILE has worked hard to speed up the design and prototyping process to ensure websites work seamlessly across devices. This feature helps because it means designers can create reusable symbols, including rules for spacing within the stack. What this means is that they can quickly create desktop views of mobile designs and vice versa, confident that they will all follow spacing, padding and margin rules set up front.

2. Prototype: SMILE’s design process covers three phases — wireframes, low-fidelity mock-ups and high-fidelity prototypes. With the out of the box features that Sketch has, the first two phases can be completed with ease, but Anima’s prototyping tools help give SMILE the extra power needed for high-fidelity prototyping. In a nutshell, this allows them to create clickable items, links between pages, animations, hover states and active states. This means, as a client you can interact with designs in all their glory — navigate through a proposed design, click through an image gallery, see a background video and experience loading and hover animations — it’s a lot easier getting buy-in from colleagues when you can expose them to a prototype this way, and all before a single line of code has been written.

SMILE’s development team have been using Bulma, an open-source CSS framework. They’ve built a series of base elements that can be easily amended to align with each project’s style guides, speeding up the early part of the development process. SMILE have been able to use Sketch to develop a custom in-house design file that aligns with the Bulma rules. In essence, this means clients can get handed a file that will allow them to continue to iterate on designs, or to quickly prototype an additional page or section of a site without SMILE, ensuring it remains visually consistent.

So, whilst you may not need to delve into every detail of your digital design experience as a client, it’s worth knowing some of the processes that can help shorten the development phase and critically, give you the best handle on progress and a real time view of how your new website or digital product will look.