Recently, I was fortunate to be asked to contribute to HOW Magazine’s interactive column. I…
Adobe Photoshop has been the Web designer’s go-to tool for 20+ years, but design and development technology has changed dramatically, and we needed a better solution. Our team now uses Sketch created for Mac by Bohemian Coding and we’re not looking back.
Photoshop worked well for us in the past when site development included the process of slicing up images to construct a page. Photoshop continues to serve its purpose as photo-editing software, but for interface design the features that Adobe is implementing feel bolted at best, disjointed at worst, and don’t integrate well with a modern workflow. In short, Photoshop is suffering from jack-of-all-trades syndrome.
Enter Sketch. Simple-to-use, vector-based software designed specifically for today’s interface design projects. Sketch is extremely powerful in its ability to make design time more efficient, to give us more control of the end product and more flexibility to translate designs for varying screen sizes — from Apple Watches to large retina display monitors. And because it’s vector-based, Sketch makes the file sizes more manageable and integrates better with modern Web standards.
What We Love About Sketch
- Symbols: Buttons, navigation, icons – anything that may repeat throughout the site – can be created as a symbol, elements that you can quickly pull into your design. Sketch’s symbols streamline the responsive design process with fluid resizing, allowing elements to scale to a specific screen size. With one update, all instances of the element update. Of course, there are overrides that allow you to control specific instances too. Love that control!
- Precision: With Sketch, we are able to define the exact position (X and Y coordinates) and the size of elements on a page, and dial in precisely where we want things to live. With Photoshop, you have to drag elements around and nudge into place, hoping that it will appear where you want it when all coded up. Sketch allows us to tell the CSS developer exactly where the elements should be – so there’s no ambiguity or guesswork.
- Artboards: The artboards have presets for different screen sizes so you can easily build a file with every screen size you need. We usually start with creating the design for a mobile device and then scale up or down by including or eliminating elements.
- Real-time Previews: The Sketch Mirror app allows us to preview designs on phones and tablets – so we are constantly previewing the changes we are making on our mobile devices, making sure they are rendering exactly how we intended.
- Exporting: Sketch makes it easy, at any stage of the project, to export and share any element. You can literally select anything – any group, any layer – and make it exportable to any file type at any resolution.
- Plug-In Library: Sketch is simple out of the box but has an amazing development community that extends Sketch’s functionality and enhances workflow with plug-ins. When there’s some feature we wish Sketch had, we look in the Plug-In Library and typically find it there.
With our recent adoption of tools like Sketch (and UXPin), we have markedly improved our end-to-end design process. With Sketch, we’re able to do more faster, with significantly greater accuracy, and with more checkpoints along the way with our clients.
Tell us what you like / don’t like about Sketch in the comments — and if we’ve piqued your curiosity, you can also find out Why We Started Using UXPin.