Sketch 3 vs Photoshop for UI Design

Sketch 3 vs Photoshop

Note: This is part 2 of my previous article Web Design Without Adobe Photoshop. Have a read if you are interested in a bit of backstory.

Back in August of 2014, I wrote an article: Web Design Without Adobe Photoshop. I had finally decided to put the graphics giant, Photoshop, to the side and try something different…

So what’s the verdict? (Sketch 3 vs. PS)

Long story short I finally chose Sketch 3 by Bohemian coding. Sketch 3 is a snug little application which runs on only on Mac. The mandate for my decision: I needed a quicker, more efficient way of mocking up responsive designs on multipage page/template projects than Adobe Photoshop provided at that time.

So for the modest one time cost of only $99, I had in my hands a very comprehensive but easy to use UI design application.

Caveat: At the time I started using Sketch 3, Photoshop CC did not have multiple art boards or the updated Asset Exports dialogue that it has now.

So I made my choice. Was I right? If you ask some people, yes, others, no. So which one is better for UI design? Well that’s still a valid question and there are lots of arguments for both, some subjective and some objective. I will attempt break down what I believe are the fundamental strengths and weakness of each application.

Adobe Photoshop for User Interface Design

For many years Adobe Photoshop has been the reigning champion of the user interface design world (at least in terms of user acceptance and popularity). It’s amazing when it comes to working with images, and creating digital wonders. I love Photoshop, it has been my go-to application for digital painting, manipulation and web design for as far back as I can remember (Version 5.5).

However, there is a reason it is called Adobe Photoshop and not Adobe Webshop. Due to a void of better suited applications in the early days and boom of web design, Photoshop stepped up to the plate. Where there were other companies that popped up like Macromedia to challenge them – they just bought them out, and absorbed them.

Photoshop has, over the years, evolved to do so many things that it was not intended to do, like vectors, animation, and 3D for example. Add web design, HTML/CSS export, and you end up with a very large application. A Jack of All Trades, but Ace of None (well except for photo/image manipulation of course).

Things I love about Photoshop for UI design

  • Integration with other Adobe applications like Illustrator (working with vector objects is a dream)
  • Image manipulation, and retouching
  • Textures creation
  • Patterns creation
  • Blending things and making images sexy (layer masks, and blend modes etc.) Sketch 3 has these features to a degree but I generally don’t even bother trying to do anything other than the most rudimentary image manipulation in Sketch 3.
  • Intense familiarity with the interface, and Adobe products (okay not a feature but its a factor for me)
  • Cross platform
  • High acceptance for native files for implementation (PSDs, etc.) – Pretty much any agency, or developer has Photoshop or access to it.
  • Creative Cloud integration (assets, libraries, etc.) – This is a fairly recent feature, and add in Adobe Color, Stock and others, its hard to match.

Things that I don’t like about Photoshop for UI design

  • Massive files – PSDs can potentially become these huge layered beasts with Layer comps and all sorts of craziness going on.
  • Many files for different pages (yes you can get around this with art boards now but it still gets unwieldy).
  • Inefficient master item support (ie., Symbols). .PSB files don’t really work as well.
  • Asset generation – It is much better than before, but still not as slick as Sketch. This is my opinion at least.

Sketch 3 for User Interface Design

Sketch 3 is like a finely tuned racing machine, made for one thing, and one thing only… UI design. It does this, and does it well, especially where flatter design is desired (extremely hi-fidelity design, skeuomorphic, or realistic rendering is not it’s strong suit). I love Sketch 3 for its simplicity, light weight, straight to the point attitude. It’s far from perfect, Sketch 3 lacks in any kind of image manipulation, and it’s typography tools are a bit clunky, and limited. However, for Web or UI design they are satisfactory and get the job done.

Art boards are better in Sketch than in Photoshop and you can have multiple pages with infinite art boards which allows you to keep one project in one file, this feature in itself is a huge plus.

Add to this, Symbols, and you have very strong Kung fu. Symbols (something still lacking in any truly useful form in Photoshop) are like master items that if changed in one place change globally – project wide. It’s a beautiful thing if you have to change a navigation item or make a logo adjustment in a masthead that occurs in 20 art boards across 5 pages for example.

So here is what I like about Sketch 3 for UI design

  • Useful plugins for making UI design easier and faster
  • Useful prebuilt templates for Bootstrap, and other frameworks
  • Vector based
  • Very nice asset exports feature
  • Symbols (master items)
  • Ease of use
  • Light weight
  • Encapsulated projects (no need for multiple files)
  • Measuring and moving objects by the pixel is easier in Sketch (at least for me)
  • Very easy to use and I tend to be faster at easy and moderate level tasks with Sketch 3

Things I don’t like about Sketch 3 for UI design

  • Typography – limited control, and working with global text styles can take a bit of getting used to (especially if you come from other programs that use text styles)
  • Image manipulation – not asking for Photoshop levels here by any means, but it could be better
  • Vector shape creation – Creating vector shapes or manipulating them is nothing like it is in Illustrator. If you stick with the predefined shapes it’s very good.
  • Acceptance – Even with plugins like Avocode that allow you to cross platforms and send to implementers without the program needing to be installed (either Photoshop or Sketch), nothing beats Photoshop for universality.

In Conclusion

I still use Sketch 3 for UI design, and prefer to use it when I can (when I know that the client or our implementers are set up for it). That being said, I still use Photoshop, in conjunction with it – for those objects and images that need the extra touch.

Should you drop Adobe Photoshop and buy Sketch 3 and a Mac (if you don’t already have one)? No, probably not. Photoshop does a great job, and it’s got the job done for years. It may not be as lean and efficient but it works.

If you have a Mac and use Photoshop, should you try Sketch 3? Yes, it couldn’t hurt, there is a free trial and the cost is minimal even if you do decide to buy.

In any event the best of luck with all your UI design adventures, and I would love to hear any comments, or learn about experiences you may have had with either of these applications!