From a design perspective, Photoshop has been (and still is) the go-to tool for UI work. But since we’re always looking to use the right tool (or tools) for a job, we’ve been exploring Sketch as a complement to Photoshop. In this post, we’re going to explain why we’re using Sketch more frequently, its benefits and what it ultimately means for our customers.
So What is Sketch?
Sketch is design software for Mac. It’s “focused solely on creating a streamlined place to work on UI/UX design” (Cult of Mac). It allows us to design faster and, we feel, produce artwork of superior quality. Said differently, Sketch is purpose-built for UI/UX design while Photoshop is the world’s most powerful photo editing tool that’s been forced to handle UI/UX work. (That’s not to say Photoshop isn’t great! We love Photoshop and, as mentioned, are using it in tandem with Sketch regularly.)
What Do We Love About Sketch?
Let’s make a list…
- Sketch’s vector-based workflow makes for quick edits and its flexibility allows for easy adaption to multiple devices and resolutions.
- Since Sketch is purpose-built for UI/UX design work, there are no extensions needed. This makes for super-fast exporting.
- Technically, Sketch works out of the box, but its plugin-friendly architecture allows for all sorts of customization. (This is one of our favorite features.)
- In Sketch, all of the properties for elements are actually possible in CSS—and that makes for happy developers! In Photoshop, you have to expect specs by hand, but with Sketch, you can simply right-click on an object to copy the CSS.
- With Sketch, you’re not dealing with 25-plus years of legacy code. That sounds trivial, but it’s a big deal.
- From start to finish, Sketch handles everything UI/UX: from wireframes to final design. That means no more app to app to app to app translating.
- Where as you have to hack in your own grids in Photoshop, they’re built in and customizable in Sketch. That’s important for respecting design standards.
- Sketch forces you to design with numbers. Conversely, Photoshop lets you ignore numbers. Why does this matter? Designing with numbers shows you the dimensions of and makes you more conscious of everything you are actually doing.
- Sketch allows for multiple pages and artboards. This is helpful when designing for multiple devices at once, ensuring consistency.
- Editing is quicker in Sketch. Instead of having to redraw shapes to make fundamental changes, Sketch’s Shape Inspector lets you make changes in real time. Boolean and combined shape editing are non-destructive as well and can be undone later.
- No more saving as! No more lost previous versions! Since Sketch is built exclusively for Mac, Apple’s Auto Save automatically saves your work continuously and lets you view previous versions. (We cannot convey just how useful this is.)
- Photoshop allows you to assign a style to objects but it does not track all objects assigned that style. In Sketch, when you create a new style and apply it to one or more objects, they become linked and whatever changes you make to the styling are reflected on all elements linked to that style. Text styles also work like object styles.
What this Means for Arcweb Customers
It’s easy to read the list above as a UI/UX geekout, but we are seeing tangible results when we use Sketch in a project. Timelines are shortening, and perhaps most importantly, we’re designing better stuff. Translated into customer-speak: Sketch is helping Arcweb design and build better products quicker. What’s not to love about that?
Building a digital product?
Keep an eye out for a follow-up post as we’ll recap a Sketch-driven project from start to finish.
