Recently, Photoshop introduced its version of multiple artboards. If you're mocking up various responsive breakpoints you'll absolutely love it. The main benefit of this approach is that you can access and view all your screens side by side, so it's much easier to make changes and compare things. At first I was concerned it would crush my Mac's performance, however I've since designed iOS apps with roughly 30 screens and did not experience any significant performance issues. A single Sketch file houses all the pages and artboards within one document. With Photoshop, my project and file structure looked something like this: While Sketch varies from Photoshop in that it stores all of its pages within one document, they both handle layering, grouping and organisation in a similar way Just toggled over to my Elements page and copy and pasted. I didn't have to open up a separate file or hunt around for an iOS map mockup. Recently, I was mocking up a map view for a booking app I was working on. The advantage here is that Sketch first presents you with an iOS UI kit for quickly mocking up iPhone apps and dragging, say, the native iOS keyboard into your mockup. You could either create a new project like you're used to in Photoshop, or select the 'iOS UI Design' template Sketch provides under File > New From Template. Let's say you're starting a new iOS app project. Artboard presetsĪnother feature that showcases Sketch's emphasis on the web and UI is its preset templates and artboard presets.

As someone who always works with responsive grids, I'm constantly in these settings before starting a new project. In Sketch, predefined fields enable you to customise your grid's total width, gutters, columns and rows. Sketch's tools and values lie in what translates easily to CSS and browsers in general.įor example: making and customising the layout settings (i.e. No more fighting through the clutter that doesn't necessarily translate to the web. Compared to Photoshop, Sketch's menus look stripped down. Sketch's focus is specifically those that design websites, interfaces and icons. One issue, though, is that it lacks focus as an app for web and user interface design. It also does a ton of other stuff well, too. A focus on focusĭon't get me wrong: Photoshop gets the website and UI mockup job done and does it well. Also, here's a handy list of Sketch Shortcuts to get yourself familiar with:. It's quite easy to do right from your Mac's System Preferences. If you're not familiar with this process, get ready to fall in love. To help my transition from Photoshop, I brought over some frequently used keyboard shortcuts by creating custom keyboard shortcuts in OS X. Many of the tools will be semi-familiar from Photoshop, but they are now located in different places. However, the visual guidance of the tools along the toolbar helped me to better understand Sketch's capabilities and how it handles various tasks. The advice I received from numerous friends and Twitter folk was to learn the shortcuts as quickly as possible. While Photoshop has a toolbar in view at all times, some of Sketch’s tools are a bit tucked away at first

Skala preview sketch