From the beginning of my career as a UX/UI guy, Photoshop has been my go-to tool for designing pretty much everything. When you use a tool for so long, it’s tough to imagine using anything different. After all, it eventually begins to feel like an extension of you. But it’s 2014 folks. Us UX/UI folk need to wake up and realize we are using a photo-editing tool to design app and web interfaces. Does it get the job done? Yes. Is it completely suited to handle an application design with a myriad amount of screens, states, type styles, etc.? I’m sure some could argue some decent points but for all intents and purposes, Photoshop falls short when it comes to making a UI project easy to manage. So what are the alternatives? Fireworks? How about Illustrator? I’ve met designers who swear by either of those applications, but once again, its 2014, and we need a tool for 2014. Enter: Sketch 3.
If Photoshop, Illustrator, and Fireworks had a baby, they would name it Sketch 3. Created by Bohemian Coding, this app was truly designed with the web / app designer in mind. Every tool within the app was created specifically to make managing your projects much easier. Here are some highlights:
Illustrator, Fireworks, Flash, they all have ‘em, and they are mighty handy. I know I’ve been wishing for one in Photoshop for years. Sketch 3 handles symbols similarly to the afore mentioned apps. When a symbol is defined, it is easily accessed from the symbol library menu. If a change to a symbol is made, that change is reflected throughout the project. This feature is invaluable especially on a large, ever-fluctuating project.
Styled Text works like a CSS style sheet. For example, if the H1’s in your project are size 34px Helvetica with a line-height of 41, you can save that style as H1 in your Styled Text library. There is no limit to the amount of text styles you can save. Gone are the days of inconsistent body copy sizes or the classic “why are the links this color, when on this other comp they are another color?”.
If you’re designing an app, changes are it has more than one screen. Why should you have to create a new file for each screen? With pages, you can keep all of your screens within one file. It will make your life easier as well as your developer.
Illustrator has been toting this feature for some time now. Each page in your project can accommodate multiple artboards which really come in handy when a particular screen has multiple states. Say goodbye to layer comps!
How many of you use a tool like Slicy to save out your multiple asset sizes when designing for mobile resolutions? Why should you need to leave the application to save out your assets appropriately? Sketch 3’s exporting feature makes it very easy to save all of your assets at the appropriate sizes. Select the asset, choose which sizes you want it exported to, and when you’re ready, you can batch-export all of your slices with a single click.
I could go on for days about the merits of switching to this program, but I invite you to go ahead and try it for yourself. A free trial of Sketch 3 can be downloaded here. If you like what you see, buying it will only set you back $79. For an extended look at the other awesome features Sketch 3 has to offer check out the Features page. Happy comping!