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.
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.
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.
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.