Published on | Prototyping: From UX to Front End — Medium Brett Hales

Sketch vs Photoshop. Why I’ve moved “mostly” to Sketch to design UI.

When you launch a startup, you wear many hats. Some of these hats you expect to wear or are expected to wear and some you need to do from necessity.

That’s essentially how I got into product design and user interface design. It was out of necessity and I’d recommend it to any startup founder because your product or service should be your creation and you should pave the future of your product by designing it yourself. You might not have the expertise to design the entire concept from the ground up ready for developers, however learning the basics will get you a seat at the table when you speak to developers about coding it up and iterating your concept. The vision of the product is just as important as the design and whom better to translate your vision into a concept than the founder.

“Having an idea is easy, executing it is difficult”

When I started Tappr, the concept I wanted to explore was around bringing NFC payments to the next level. It was afterall 2012 and NFC payments was a scary concept for consumers to comprehend with security and theft of data being the greatest concern. I really wanted to be able to combine credit and debit card payments with transportation cards and eventually digital wallets. For anyone that is in the inner circle of financial services, the concept isn’t as simple as the idea suggests and designing it became very complex. What about integrating Point-Of-Sale systems? What about connecting to a Payment Gateway? and what do we do with transaction statements and receipts?

All this and more we had to think about and design.

All these components were part of the concept and our initial designs were hideous and ill conceived — and they should have been — that’s what being in a startup is all about — iteration towards perfection. Our CTO Kerry Esson designed the first concepts using Photoshop which was the go-to-tool for crafting user interface (UI) design. He’s a great technical designer, but we worked well when I concepted the main functionality, and he polished them off ready for developers. We used Illustrator for vectors and other things, but overall Photoshop was the primary tool we used.

At the time, Photoshop was mind-bogglingly slow, took over our Mac’s and I honestly had to shut down everything on my Mac to run it. I had a 15″ MacBook Pro with increased RAM and it struggled mightily. When I discovered how to design for developers to use, it was all about layers on layers, slices, GUI designed templates and individual files for each screen. For a new version iteration, using Photoshop back in 2012 would take 2–3 days to get something together. Each screen we mocked up for our Tappr App had it’s own PSD file and each one was 10mb each. No joke, we had a Dropbox folder that was 40GB for our iOS app alone. Our web-app (dashboard) was 80GB so anytime we had a new developer start at Tappr, they’d have to download the dreaded Tappr UI Folder and wait an hour or two before being able to use the files.

Tappr iOS App. Left is the initial concept on Photoshop built for iPhone 3G. Right is the V2.o app main screen on iPhone 7. How times have changed.

Due to the fact that it was a complex app, I created PDF ‘design briefs’ for the developers to follow, but because we were developing and iterating at the same time, it didn’t take long for the PDF’s to become outdated and obsolete.

During this period, other tools like Invision and Axure were still finding their feet so we used my PDF documents along with the ‘design wall’ to communicate with developers and work through user experience concepts.

Besides these evident flaws, I was hooked on Photoshop and become somewhat of a weapon at it. After a few years, Photoshop was my bitch. I delved into the dark arts of mask-layering, layer opacity maps and so on. It was a blast and designing became an oasis in my day where I could concentrate for about an hour or two and build the product alongside the development team.

With new life comes a new dawn.

One of our developers turned ‘Swift Gun’ Ethan Jackwitz suggested I move to Sketch to help him understand the design elements and the flow of the app. This was a big deal since I’d have to design each new screen again for the ground up. Using Photoshop, it would take me a few weeks of solid designing and at the time, being a CEO, designer, capital raiser, Director of QC at the Playboy Mansion and a host of other hats, I wasn’t thrilled about doing the move. No one has time for this, not when we just designed V2.0 of the entire app.

However I thought I’d try one screen and see what I could do. I downloaded some fresh GUI designs from sketchappresources.com and began designing the same app for Sketch.

FML, where was Sketch 2 years ago.

It was simple, it was transparent and the community behind it was interactive and growing by the hour.

It took me about 2 days to get the basics out of the way and get the entire iOS app designed and ready for Ethan and the team to start doing their magic.

However, there were some concessions you had to make when using Sketch over Photoshop and Illustrator. It’s not as good for altering images and hasn’t got the overall precision that you get with Photoshop. In comparison, there were minimal concessions between Sketch and Photoshop that I could live with and the one time a week that I needed to alter an image, I could use Photoshop. I haven’t touched Illustrator in a since.

As the Sketch community started to grow, and new releases were launched, we moved entirely over to Sketch and even began testing other things we we did in other Adobe products.

“But now I have to convert 2 years of designs of PSD’s into Sketch Files”

I started designing creative documents like brochures in Sketch instead of InDesign — and for a while it kind of worked. Once I got other stakeholders to view ‘document’ like files in Sketch, that’s when it all got unravelled since InDesign is a massive step in the direction of a Word Editor, and Sketch didn’t have things like spell checker, page numbers and so on.

We are now at version 43.2 of Sketch (at the time of this post) and since I went full time with Sketch, Adobe Creative Cloud has added a new version of Photoshop called Photoshop CC, which feels like a step in the direction of Sketch.

I thought it would be interesting to do a Pro’s and Con’s analysis of Sketch vs Photoshop from not only the eyes of the designers, but developers as well.

Let’s get into it.

Sketch: New era of design software

I’ve used Sketch over the last 3 years and in early days the program had about half the functionality as Photoshop but was way simpler to use. The GUI (Graphic user interface) tools available were limited at best and need the design community to embrace it.

This UI flow showcases Tappr’s main navigation flow.

The app feels eerily like it was designed by Apple and I use similar keyboard shortcuts that I do in Keynote and Pages. Overall it feels like its primary goal was built for designers to work with developers seamlessly, and that makes it appealing for both sides.

Let’s look at my Pro’s and Con’s.

Pro’s:

Cons:

Only available on Mac’s. We run a pro-mac office at Tappr, however due to the nature of what we develop; being a custom Android ROM OS, we have two computers that run Ubuntu. There is a way to connect to my designs via Sketch Mirror on a browser, but it’s not the same as the app version.
Starting to take a toll on my RAM. This is an up and down con. When I began using Sketch, the program was fast and good for my computer since I could open it and Chrome, Slack and Dropbox as well. As I started to use more plugins, the move started to slow down Sketch. Recent updates have made this better but each time I rely on a new plugin, the program slows down again. It’s a Cat and Mouse game.
Sketch needs Plugins to survive. Sketch is great for simple user interface creation, however if you want your developers to maximise the potential, you need to start using multiple plugins, most of which require a monthly subscription per user. This starts to get expensive fast.
Thats about all I could think of. Message me if you can think of any more: Brett Hales.

Other benefits that are worth noting include Sketch Mirror, a simple way to test your designs on your actual smartphone.

Sketch Mirror in action. Skala works well for Photoshop as well.

Photoshop: Not just for photos

Since I started designing in 2012, Photoshop has been the canonical tool for designers. Most of the UI or UX design jobs currently on Indeed suggest you still need Photoshop and Illustrator skills. Many clients of digital agencies are familiar with PSD’s and know more about what to expect from a Photoshop design brief.

With Dropbox, PSD files are relatively easy to share, and now with Photoshop CC available, even more easy to share your designs and the opinion that Photoshop is just a photo-editing tool is long gone. It’s friendly to use for web designers and a known quantity in design circles.

The simple fact is that I can do more editing and manipulating in Photoshop than I can in Sketch.

While you can do more with Photoshop, does it means that it’s better for product design and iteration. Lets go through the Pro’s and Con’s.

Here are the Pro’s:

Libraries and Stock Images. The assets are synced to the rest of Adobe’s CC and can be used again in other Adobe products. Better yet, you can use tools like Adobe Stock to embed pixel perfect stock images that don’t cost an arm or leg.
Smart Objects. This is a real winner and anyone who needs to mockup iPhone or Web concepts knows this. Smart objects can be reused in several situations with a single file or multiple files. This feature saves bundles of time.
Extract assets. For web and native developers, being able to extract assets or ‘cut’ assets is a must. Additional helpful plugins like ‘Cut&Slice’ enable simple export of assets in your PSD file.
Plenty of design tools to use. For me, the wealth of GUI files and online resources eclipses Sketch currently, but that might not always be the case. Remember Teehan and Lax? That stuff was gold.

Con’s:

It’s complicated. Photoshop to anyone not used to the functionality will struggle to pick it up early. It can be complicated to use. You can do more with it, but you can also get tangled up in a knot when you aren’t familiar with it. This is one of the reasons why Canva exists today.
Updates aren’t polished before every release. Photoshop receives periodic updates rather than a new version each year, sometimes you find some bugs that cause crashes. Most of the time, you avoid doing the same sequence and you’re ok, but there are times where I had to work from a different computer that used a previous version until the bugs were fixed from the new release.
Stuff takes longer. If you work on complicated files like a one-pager website with some depth, often this will be a 100mg+ file. If you have to edit one section, sometimes it looks like it’s frozen or not responding. If you have multiple files open in Photoshop, god bless your RAM capacity because Photoshop takes up all of it.
It can be expensive. Part of the pro features is the ability for the Adobe suite to work seamlessly together in unison. In order to get the benefits, you’ll need the creative cloud subscription. An all App’s subscription if you aren’t a student costs $57.99 per month or $695.88 per year. FML that’s not cheap.

Photoshop naturally feels like an image editing platform first, and a UI design tool second. In reality designers gravitated towards Photoshop because of the flexibility and feature-rich nature of the program. As UI design in general has moved on, so has the requirement for such a program like Photoshop.

Decision Time: Sketch is the winner!

In summary, it’s a no-brainer. Sketch is a combination of all thats good about Photoshop and Illustrator in one. I’d like to see some more steps towards InDesign, but I’m happy with the way Sketch is shaping up and progressing. It’s simple to mock-up and easy to share with developers — this is what I’m looking for with my design hat on.

Tappr’s Product Evolution.

Fundamentally, all that matters is that your design gets made into real code. I’d still be happy using Photoshop, but Sketch just makes things simpler and there is value in making simple things that work.

Sure, you wont be able to do this with Sketch, But this is unbelievably impressive. (See below)

If you are a designer — make the move. If you are a startup founder and want to learn the fundamentals — use Sketch to get some basics together and start being active in your product design. Download some GUI templates from sketchappresources.com, install a few plugins and get a free trial of Sketch. I assure you it will make a difference to your startup and product refinement almost immediately.

I’ll follow this article up with an in-depth look at how we use Sketch and some hidden tricks we use on the daily basis.

Sketch vs Photoshop. Why I’ve now “mostly” moved to Sketch. was originally published in Prototyping: From UX to Front End on Medium, where people are continuing the conversation by highlighting and responding to this story.

Sketch vs Photoshop. Why I’ve now “mostly” moved to Sketch.

Cool stuff, every week

More Articles