Connect
To Top

Why I’ve changed my UX design process from Adobe Photoshop to Sketch 3

I’ve used Adobe Photoshop since version 1.0 but recently I’ve been using it less and less in favor of the many advantages of Sketch 3.

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.

hero-screenshot

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.

 

tools-elements

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.

 

mirror

iOS Mirror

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.

 

MacBook-Pro-front

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.

Final thought

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.

 

You must be logged in to post a comment Login

More in Design & user experience

Creative Director, Designer, Brand Builder, Speaker, Podcaster, Crazy One. As a designer, I have 20+ years experience creating the strategy, concepts, and designs for award-winning integrated global advertising campaigns, building multiple global Fortune 500 brands and creating innovative digital experiences. As a leader, I have 15+ years transforming agency and client-side teams using a mix of creativity, business strategy, process and political skill to create innovative, world-class work and cultures that change industries and companies. My clients have included American Airlines, W Hotels, Disney, Citi, ExxonMobil, Acura, Old Navy, Nationwide Insurance, Verizon, Subaru and many others. My work has received over 150 international awards, my app designs have been named as one of the World’s 100 Greatest Apps, Apple has featured my work in 9 keynotes, 4 TV commercials and more.

Follow Me On Instagram

 Another preview of our @tristaneaton commission. Full photos coming soon #tristaneaton #tristaneatonart #tristaneatonmural #streetart #streetartist #streetartofficial  The @obeygiant globe is a limited edition replica of the one which hung from the Eiffel Tower last year and was made by the worlds oldest globe maker. #galerieitinerrance #streetartparis #streetart #streetartist #shepardfairey #obeygiant #obey @galerie_itinerrance  My kind of street art from the Gothic Quarter in Barcelona #streetart #streetartist #streetartofficial #barcelona #streetartbarcelona #hola #skull  Our abdominal snow Pug loves the weather and the 16" of snow at our house north of NYC which feels more like north of the wall today. #pug #pugs #pugsofinstagram #nyc #westchester #snow #northofthewall  For those who asked about where to find the @invaderwashere is at @picassomuseum - remember it's an old piece before he got his style down so maybe look down at the last doorway on the south end of the museum. #streetart #streetartist #streetartofficial #streetartbarcelona #spaceinvader #invader #invaderwalls
 More in love with our @obeygiant from @galerie_itinerrance more every day. #streerart #shepardfairey #shepardfaireyart #shepardfaireyobey #streetartist #globe #earthcrisis  Feels a bit like Xmas today as our Earth Chrisis @obeygiant pieces and more showed up from @galerie_itinerrance in Paris. #obeygiant #obey #shepardfairey #streetartist #streetart #streetartparis #galerieitinerrance  Briefcase 2.0 thanks to @louisvuitton Avenue champ de Elysees #apolloalldaybag #louisvuitton #louisvuittonmonogram #monogrameclipse #lv #design #creativedirector  Thanks to @quiccs for the new addition to the collection - a black Forbidden TEQ63. It's the perfect middle size between my two @huckgee TEQ Skullheads. #quiccs #urbanvinyl #huckgee #huckgeeskullhead #dunny #skullhead  Barcelona street art public service announcements #streetart #streetartist #streetartofficial #streetartbarcelona
 Brunch with @thechiclibrary before I hit the road again #chic #tomford @blackscale #blackscale @tomford #brunch #fashion  I always love the unwritten rule in Barcelona where you can create street art on doors and shutters but not the actual buildings. #streetartbarcelona #barcelona #streetartofficial #streetart #streetartist  Another preview of our commission from @tristaneaton and based on the 'crazy' in letterpress type and archery target you should know this is my side of the piece. #tristaneaton #tristaneatonart #tristaneatonmural #streetart #streetartist #streetartofficial  No caption does this justice because @tristaneaton is an absolutely brilliant artist. @thechiclibrary and I each gave him a list of what we love and inspires us which he used to create this massive 8' x 4' painting that he is finishing today. It can't get here fast enough. #streetartofficial #streetart #streetartist #tristaneaton #tristaneatonart #tristaneatonmural #commission #modernart #mural  Now that's a nice tag. No school like the old school. #streetartbarcelona #streetartofficial #streetartist #streetart #typography #type #caligraphy

Copyright © 2015 Stephen Gates