Forget Photoshop, learn Sketch for mobile UI design?

Reading Time: 2 minutes

sketch_vs_ps

Most people who design the UI for an application have worked with Photoshop one way or another. This is no different for most mobile app developers where all aspects of the rainbow – including wireframes, screen design and assets (think, icons- splash screens and AppStore visuals) – have to be realised.

Since a few years a new visual design tool called Sketch (Mac only!) stepped into the block and started punching around. That resulted in it becoming more and more popular amongst front end (web- and app) developers and designers. The following stats confirm that statement:

Sketch Wins

I think there’s real potential for mobile developers to use Sketch, too. Found out why after the break.

The main things that make a difference with Sketch are the ones that give it an edge when it comes to graphics editing for mobile apps:

  • It’s based on Vector based editor
    Mobile designing is all about screen estate and differentiating for different devices. Vector based graphics are crucial to keep the images tight and crisp when resizing for bigger screens
  • A live preview app called Mirror
    Let’s you check your design in an iOS app to see the effect of changes almost instant
  • One file to rule them all (the screens that is)
    Instead of working on multiple images or layers that need to be enabled/disabled for your designs Sketch uses a single file that embeds all the screens in a ordered manner. Please mind that in Sketch these screens are called Artboards (and Pages can be used as a collection, per platform for instance)
  • Reusable visual elements
    They are called Symbols in Sketch and although that name isn’t very logic at first, once you get the hang of it you can use the Symbols to use visual composed elements at multiple instances, over pages and Artboards and if you want to change them you only need to change the definition of the Symbol. Sweet!
  • Export to multiple resolutions easily
    After enjoying the fast workflow that the previously mentioned bullets enable it’s time to save the results. Sketch has easy exporting to multiple resolutions (with the proper naming for iOS etc)

Now, this all might just sound like a sales talk but I didn’t get the best know how on how to work with Sketch on your mobile app screens from their website (http://www.sketchapp.com). The tool just works out a lot better that good old Photoshop, which – after using Sketch for a while – just really feels like a purely graphics designing tool that isn’t fit for the workflow that mobile screen development deserves.

Check out this nice post on designcode.io on how the features and how to set up a proper Sketch file to get kicking with this nice tool. It will give you the insights you need to use this cool tool for your next mobile app designs.

Do you already work with Sketch or do you still prefer another tool for the graphic screen design? Let me know in the comments what your design flow is and if you use Sketch or something else.