Andrew Whittle
Independent Digital Graphic Designer

All the latest news

New projects, industry news, reviews and more.

 
 
Aug 29, 2015

Photoshop vs Sketch, which is the best UI design tool for digital designers?

For years Adobe Photoshop has been the preferred design tool for designing website visuals, however as we now need to design for a more complex set of deliverables such as desktop, tablet, mobile and wearable connected devices, is it still up to the job or is the new UI design tool Sketch the best tool for the job?

Photoshop Vs Sketch

I have been using Photoshop for about 20 years now, I remember when it did not support layers and only worked in black and white. When the web arrived it was the only tool we had to design pixel based interface designs.

When I started designing for the web in 1997, the typical process would be to design for a screen size of 640px x 480px, this was the average screen size of a PC at the time. As Designers we would design in Photoshop, get the visuals approved and then slice the Photoshop design into table based layouts in HTML. Over time Photoshop developed the Save for Web functionality, it even saved out the images and HTML code for you, however it was never clean code and sometimes you had to do a lot of HTML editing afterwards.

Soon CSS came onto the scene and we began to design using CSS, to some extent we would still slice away in Photoshop, then code up the pages from scratch. To this day that is still how we save out of Photoshop, though there are tool like Brackets, which can pull in a Photoshop file and extract assets and CSS code directly from within Photoshop.

As we moved to Responsive Website Design (RWD), Photoshop started to show signs of it's weakness in this area. You had to have multiple Photoshop files for different screen sizes and pages, resulting in a lot of Photoshop files. This became time consuming when clients would ask for updates to the visuals. You had to open each file and update, it was a nightmare.

Enter Sketch by Bohemian Coding. Finally someone had taken on Photoshop as a serious UI design application.

To be honest, when I first opened the trial I was not that impressed, the interface was extremely simple and it looked like a half-baked solution. I was used to all the features Photoshop had and it took me some to get used to it. As new projects came in I returned to Photoshop because I knew I could get visuals out on time. Over time however I could not stop thinking that there had to be a better way. So I gave Sketch another go. I had read a lot online about how it was much faster than Photoshop and that it was the best design tool for website design and UI design.

I decided to buy Sketch and try it out on a live project. Within about a day I was sold on it. That simple interface that I was not so sure on was like that for a reason. Sketch is dedicated to UI designers and comes only with the tools that can be recreated in HTML code and CSS. Photoshop on the other hand is trying to keep everyone happy from Photographer?s to print Designer's.

The first big feature that I picked up on was multiple art boards all within one document and an infinite canvas, coupled with easy to use layers and grouping of elements. This one feature alone blew Photoshop out of the water. Next on the feature list is that Sketch is fast, much faster than Photoshop. This is because Sketch takes advantage of vector-based tools. This makes sense because we do not need to reply on GIF's, Jpg's and PNG's anymore which can be huge in file size. SVG's has now become the standard for vector based illustrations etc... File sizes are tiny and they can be dynamic when it comes to styling them in code.

Another great feature was the Mirror tool. You simply download the IOS app and you can mirror what you are working on your Mac to your phone. This is great for mobile phone design and tablet layouts as you can adjust the design in live preview. Next on my list of likes are the text tools. In Photoshop it is still a pain to update text across multiple designs. In Sketch however it comes with text styles so you can update the font style and that change is rippled throughout every instance. This is nothing new, we have been able to do this in most apps for years but Photoshop is still lagging in this area.

Sketch has a growing online community who are developing plugins all the time, which extend the core features of Sketch. A great plugin is dynamic buttons. In Photoshop you have to create two layers, one for the button and one for the text. If you need to create an even button you have to manually do it. In Sketch you can do this really quickly by adding padding, just like you would in CSS. This is where you notice the difference between Sketch and Photoshop.

Sketch is aimed squarely at UI Designer's, it is fast to use, dynamic, extendable, and everything you need from a tool to design for the modern web. Photoshop is still a great design tool and recently introduced multiple art boards and preview facilities but for me it has a lot of ground to cover to catch up to Sketch.

So as it stands for me, if I am working on a new design for a client I will opt for Sketch, if I am working for a Design Agency and they require Photoshop files then Photoshop it is, even if it takes longer to design.

The only drawback of Sketch I can see is its lack of drawing tools and photo editing tools. That said lets remember what Sketch is for, UI design. I still use Photoshop for image editing and Illustrator for complex illustrations, these are then imported into Sketch. This still means that there is still no one tool that does it all well. You could say that Photoshop does it all, maybe it does but not very well and it is still lacking some of the main features that Sketch comes with by default.

comments powered by Disqus

Blog catorgories

All posts
Freelance
Marketing Advice
Tutorials

Receive my eNewsletter

If you would like to grow your business through effective design and marketing, register to receive my monthly eNewsletter. Note: Your details will not be shared with any third party companies.

Kind words from my clients

?Andrew has recently designed and developed 3 different websites for me 1 of which has already launched and is performing extremely well in terms of conversion rates.

In terms of the process from start to finish, I had an idea of features that i wanted on my site but I had no idea of the layout. Andrew gave me his own recommendation on what he thought would work well in order to make the customer journey as simple as possible and based on our current conversion rates he's got it quite spot on.

Andrew provided me with daily updates regarding the progress of the site from the design phase to the site build. In total the length of the project was just over 2 months. The website has passed all security checks and although the site is just 1 week old has surpassed all our forecasts and projections. I would highly recommend working with Andrew, his designs are aesthetically excellent and he has mastered simplifying the customer journey and has helped me get off to a flying start with my new business. ?Ocean Capital Ltd - www.paydaypixie.co.uk

?Andrew has been great and guided me through the process of development to completion...

If I have had any questions he has been prompt and completed all tasks in good time. He has a good eye for details and I have asked him to help me further with my development of training and other materials for my business.?Embryarch Ltd - www.embryarch.co.uk

?Having recently brought our website into the 21st century, I can thoroughly recommend the work of Andrew. He is professional, friendly, and a pleasure to work with.?MG Caravans - www.mgcaravans.co.uk

?The service received from Andrew is fast and efficient. Andrew always interprets the brief accurately and delivers a first class service. I have worked with Andrew for several years and would have no hesitation in recommending him.?Aura Health & Beauty - www.aurabeauty.co.uk

?We would like to thank Andrew for our new CMS website and the help, support and guidance whilst creating it. Andrew is approachable, friendly and didn?t talk in technical jargon which we didn?t understand. Andrew is always there for help and support to answer even the silliest of questions. Once again a big thank from everyone at Nutshaw Kennels.?Nutshaw Kennels - www.nutshawkennels.co.uk

?Andrew listened to what I needed and provided me with a fresh new website, identity and leaflet. He guided me through the process of getting my website online and now I rank page one on Google. I would highly recommend Andrew.?Jacqui Rostron - www.jacquirostron.com

andrewwhittle1 RT @WhittleDesign: Great day today. A new logo, brochure and two websites booked in today, bring on tomorrow for more! #graphicdesign #bran…