Goodbye Photoshop, hello Sketch

(Or "Why we stopped using an image editor to design websites.")

I’m not really sure when things started to break down. I suppose we were never truly happy. Our eyes had begun to wander and our heads were turned by younger models like Adobe XD, Invision Studio and Figma to name but a few.

Why hadn’t we broken up sooner? One reason was familiarity because after so many years with Photoshop, we had become stuck in our ways. Another reason was the relative immaturity of the other platforms and a nervousness to spend precious time on a new relationship that might not work out.

That being said, we knew that something had to change, so we did the unthinkable and cheated on Photoshop for a 30-day trial period with Sketch to see how things went.

It was immediately obvious just how much we had been missing out on. Upon launching Sketch for the first time and experiencing a wonderfully unlimited, high fidelity and lightening fast environment (compared to Photoshop), we knew we’d made the right choice. With more and more of the web moving to SVG for things such as icons and graphics, this was the perfect setting to create our assets as glorious crisp vectors ready to hand off to our developers. Then, with the advent of Sketch Symbol Libraries, we could create reusable components with a master source file that could be shared with other projects and people. Getting feedback from clients was no longer a convoluted process of jpegs and emails, we could now simply click, share and comment.

We were well and truly in “The Honeymoon Period” but the marriage was only just getting started. Let us tell you about just a few of the things we love.

Symbols in Sketch can be created once and then used everywhere. They enable us to build design systems that evolve with consistency. All symbols are a Single Source of Truth, a master if you will, and when changed once, an edit is then updated everywhere that it has been used automatically. Whilst this can be a time consuming process at the beginning of a project, it creates an incredible amount of efficiency further down the line when more components and templates need to be designed. Sketch Symbol Libraries can be shared with other projects locally or can even be stored on a cloud service like Dropbox for other team members to access and work on remotely if needed.

Symbols can also be nested and multiple instances created which enables the designer to choose different states, for example an icon being active or hovered over will have a different state to one that is unused. This is all done without editing the individual symbol so is a non-destructive form of editing and any changes made to the original will still affect all other instances.

Website speed is an important ranking factor for search engines and arguably even more important for user experience and one of the factors that will slow a site down, is the use of images which is where SVG comes in. SVG (Scalable Vector Graphics) is a language that allows developers to manipulate graphics such as icons and even flat illustrations directly within the code. The benefit of this for the user is not having to download images for all of these factors which speed up the website. Also, now that most devices have retina displays, SVG graphics are not made up of pixels and can scale to any size without any loss of quality.

The benefit that our clients love the most about our move to Sketch is the way in which we now submit visuals to gather feedback, iterate designs and achieve sign off. Using Photoshop meant individual files for each page template, saving them out as flat jpegs, emailing them to the client and then awaiting feedback. You can use artboards but on a large site with a lot of templates we’ve ended up with file sizes in excess of a Gigabyte! Sketch cloud enables us to simply share the visuals which can be made interactive, such as hover and click effects on buttons or page transitions for mobile app designs. They give the client access to click and see the design as a whole, and give their feedback via a commenting system on a page by page basis. This streamlines the process no end and makes a once cumbersome part of a project much more efficient, accurate and collaborative.

Sketch has many great features out-of-the-box but one of the reasons we chose to run with this over other platforms, was the amount of plugins available that extend its functionality even further. Two we think are worth mentioning are Craft by InVision and Anima. There are too many features to cover all of them here so we’ll just focus on a few that we like the most.

When designing interfaces, that when developed rely on data to populate them, used to mean that designers had to use dummy data to make the visuals appear realistic. Crafts Data feature pulls data from multiple sources such as images from Unsplash or even content from live websites. This transforms the laborious and time-consuming task of mocking up visual into a simple and quick one.

Anima has several neat features such as the ability to use a timeline to add animations and interactivity to what would otherwise be a static visual. Utilising this feature means the client can see a ‘working’ version of the design and sign off on elements like button states before it moves to development - again making this part of the project much more transparent and collaborative.

Like a lot of agencies these days, we use Slack for an internal communication tool and are often taking screenshots to share with the team for feedback and to discuss ideas about particular elements. Whilst this isn’t a particularly difficult process, Sketch makes it even easier by having the ability to select any part of a design and simply drag and drop it straight into a channel.

So there we go, we took a chance on changing our digital design workflow and the tools that we had relied on for years (decades even!) and we’re not going to look back. If anyone reading this is on the fence about whether to try something new, then we would wholeheartedly recommend giving it a go. It might not work but when it does, it changes your whole perspective on team collaboration and efficiency.

Looking for a more collaborative partnership with your agency? Get in touch and we can discuss our process and how we can work with you and your company for more transparency, authenticity and ownership over your digital presence.