I’m as old school as it gets when it comes to Adobe Photoshop since I’ve been using it constantly since version 1.0 was released. If I think back there hasn’t been a project or even a day a day in my career when I didn’t have it open and when it wasn’t the center of my design process. Then a funny thing happened a few months ago and everything changed – I was convinced to try Sketch from Bohemian Coding. I had been aware of the app for a while, had downloaded the demo, tinkered around with it and never really gave it much thought again. But I started to hear more and more designer talking about Sketch. I saw Apple start to release design templates in Photoshop and Sketch formats. And finally a friend sat me down and showed me how the application worked and from then on I was hooked because Sketch does an amazing job of solving a lot of my design workflow problems on top being a much more modern and lightweight app.
Easy to learn
I wish I knew more applications but the truth is that I just don’t have the time or the energy to devote to a 10 or 20 hour Lynda.com course to learn them. As a result I was really hesitant about how much work it would be to learn Sketch and I was shocked that it took me only 30 minutes to learn pretty much the whole application. It was so fast because if you have used Photoshop and an Apple application like Keynote then you will be right at home with the interface and application concepts in no time. I watched with these free YouTube tutorials from LevelUpTuts to get all the basics down and was off and running from there.
Much smaller file sizes
It sounds so simple but when you are working on a big project file sizes matter. It matters for how much hard drive space you have available and it matters in how long it takes to open the files when you have a precious few minutes to try and work out an idea. The project I did with Sketch gave me the ability to do a side by side comparison of the file sizes between Photoshop and Sketch. I found that the Photoshop files for the project averaged between 120 – 170 MB per files while the Sketch files with double the amount of content in them would only be 40MB. A large part of this is because everything in Sketch is vector based so the files are smaller, editing is faster and the files are faster to open.
Artboards, artboards artboards
One of my biggest frustrations with Photoshop has grown as the complexity of digital projects have grown. If you need to create an app with multiple screen states, if you need to design a responsive website or design an app across multiple platforms then you know what I am talking about. Photoshop forces you to solve these problems by either setting up a list of layer comps inside of your file or in the case of designing across devices you have to break each device out into its own file. The result is a nightmare to try and keep up to date, consistent and to be able to see if the design is working equally well across all of those designs.
Sketch does a brilliant job of solving these problems with the ability to create multiple pages that each have multiple artboards. This allows you to put different aspects of a project on different pages and then have as many artboards of as many sizes as you want on those pages. This is such as simple thing but it is something I love every time I use it because it makes designing SO MUCH easier since edits are faster, my designs are more consistent and the quality of my designs are better since I can see the entire project at once.
Styles and symbols made simple
The concept of text styles, layer styles or shareable symbols aren’t anything new and has been around in various Adobe applications for a long time. My problem is that character style has always felt like an afterthought in Photoshop and shareable libraries only made it into the application within the past year and still lack a lot of the functionality I want. Both of those features are done much better in Sketch and are really at the heart of the application and are both features that are incredibly powerful and necessary when designing any complex project. When I design a digital project like a mobile app the specs I use for the headline type or button size will change with the demands of each new screen I design but since I want the app to have a consistent feel I need those changes to be reflected across the entire project. This is simple with Sketch once you define a style or symbol you can make any changes you want and they will instantly be reflected across the entire document. This way I can see if the changes make sense or if I need to find a way to make the previous spec work in my new design.
This is also another place where the artboards are so critical since I can have the entire project in once place and not split across multiple files where in Adobe libraries I would have to make the change manually by selecting each asset and the library setting to update it.
Another critical part of designing for mobile is the ability to easily see your designs on the devices you are designing for. This has been a well-documented struggle of mine Sketch has device mirroring built right into the application. it is a simple but not perfect process to use their Mirror app, which currently only works on iOS, to be able to see your designs on any iOS device. The best features are that you can swipe between your artboards on your device so you can see everything you are working on. But even better is that if you are working on a project that will have an iPhone and an iPad app you can preview both on two different devices from one Sketch file – which I think is awesome. But you can also switch between standard and Retina resolutions to be able to see how the look of your app will visually degrade at lower resolutions on older phones. For me, this is just the frosting on the cake as this has always been another one of my major pain points.
Free to start. Cheap to buy.
Something all designer will also respect is the fact that Sketch is cheap. You can try it out for free for 7 days to see if you like and it is just $99 for a full license.
Quick and powerful templates and UI kits
One of the other things that I have grown to love about Sketch is the community and the ability to get templates and UI Kits that make quickly laying out a design incredibly easy. If you want to design an app for Apple Watch then you can get a UI Kit from Apple’s developer site (click here to get theirs) or from developer like DesignCode.io (click here for their template) that have all the standard Apple Watch visual components and you have can you app laid out in no time. The same goes for if you want to do an app in Google’s Material design as both Google (click here to get theirs) and a number of other developers have UI Kits that make app design for Material Design incredibly easy. these have been a huge time saver for me as I can easily pick up and customize these GUI components for new projects and platforms. I keep a collection of my favorite on my Pinterest board which you can find here.
Don’t delete Photoshop just yet…
This isn’t a complete love letter and there are a few other less than wonderful things you should know.
The first thing is that I said that Sketch has replaced Photoshop for my UI / UX design workflow but I didn’t say it has been a replacement for my entire design workflow so don’t go uninstalling Photoshop any time. Sketch is not able to handle image manipulations pretty much at all and I still do all that type of work in Photoshop and then bring it into Sketch to do my UI and UX work.
The other thing is that Sketch is very much a work in progress. It is a little buggy at times, it has its quirks and that is a result of the fact that a much smaller company is working on it but they do put out regular updates which make the application better.
No matter the little bugs Sketch is a long overdue entrant into the digital design arena that I think really understands, respects and reacts to the needs of a modern designer. I love it and use it all the time and f you don’t already have it in your toolbox do yourself a favor and add it soon.