For the better part of the last 20 years, Adobe's Photoshop and Illustrator have been the defacto standard used for a web and UI design tool - a fact that seems more attributable to a dearth of viable alternatives than to any true affinity for the products themselves. 

But here at Dialexa that all began to change about a year ago when a little company called Bohemian Coding released the third version of its web and UI design tool called Sketch. 

From the moment I first tried Sketch 3 (after much goading from a co-worker) I've been a fan - and I'm not alone. Over the past six months, our entire design team has transitioned from Photoshop to Sketch as our primary UI design tool.

Just what is it that makes Sketch such a game changer? Seeing is believing, so rather than explaining why I think it's so great, I'm just going to tell you how it's changed our design workflow for the better. 

Multi-Page View


Before Sketch, our team translated paper prototypes into wireframes using either Apple's Keynote or a tool like Omnigraffle. While it accomplished the task, this approach was time intensive and required us to move back and forth between pages when creating variations in the state of an object (e.g. a button with a mouseover effect). Sketch solves this time-waster by allowing us easily see, compare, and duplicate pages on a large, easy-to-arrange palette. 

It's Retina-Friendly


Sketch represents the perfect marriage of bitmap manipulation and vector artwork precision. Because it was built specifically for UI and web design, it emphasizes pixels and makes exporting assets for high-density screens very simple. This means that if you want to export an icon or logo, you can do so with confidence, as Sketch will do the math for you. No matter what device is being used, your image will look as sharp. This allows you to work on your designs at 100% size (real pixels) rather than at 2x or 3x - and that means much smaller project files than a typical Photoshop .psd file. 

It Supports Symbols & Text Styles


Much in the same way that external CSS files apply formatting across an entire website, symbols and text styles let you create common objects that can be used throughout every page in a project. If you make a change to one instance of an object, the change is applied to all instances of it. We’ve also found that text styles are a great way to define typographic hierarchy in a way that easily translates into HTML and CSS.

It's a Multitasker


Sketch gives us a single tool that we can use for both wireframes and applied design. The ability to transition a project from low fidelity to high fidelity mocks without re-doing the layout, has saved us countless man-hours on its own.

If you liked this article, listen to Dialexa’s Head of Design Research, Sarah Reid, and Design Architect, James Utley, on Custom Made talk using lean design research to get to the ‘the why’ of your product: 

Listen to all episodes of Custom Made for insights and perspectives from industry disruptors and technology leaders.

To learn more about how Dialexa converts ideas into functionality, including our approach to the new product development process for software, click the image below.

Get Farther Faster with a free copy of our Guide to New Product Development Process for Software


Be the first to know.

Sign up for updates.

Click to Comment