Sketch Tools

When I was starting out, I thought that Adobe applications like Photoshop and Illustrator were the only options when designing user interface for web development. This assumption probably stems from my time as a Studio Artist at The Martin Agency where those programs plus QuarkXpress were used almost exclusively. Well, Quark is no longer the industry standard, and my work at Rocket Pop Media (and a project for a class I’m taking) has shown me that there is, indeed, a better platform for efficient designing.

The biggest challenge for me was optimizing my workflow so that every minute spent is productive. Toggling back and forth between Illustrator and Photoshop to produce wireframes worthy enough for client review was not an efficient use of my time. I had to make edits to images in Photoshop, then import them into Illustrator to take advantage of its crisp, pixel-less vector graphics.

 Frustrated with the process, I began to look for any other UI application that might exist. That’s when I stumbled upon Sketch. I’ve only been using it for a few weeks, but I can already see an improvement in my time management.

Here are five noob observations of why I think Sketch is better for IU design instead of bouncing between Photoshop and Illustrator.

  1. The clean and simple interface makes it very easy to organize layers and elements within your project. You can list layers under their corresponding artboard and group them as you see fit. Styles can then be applied to the entire group of the individual layers within it. In the past, I have designed websites using Photoshop and Illustrator that I couldn’t recreate perfectly when marking it up in my text editor. Tools available in Sketch only allow you to design in a way that’s HTML and CSS friendly. Sketch has eliminated this issue.
  2. Shared styles allow you to save a specific style that can be applied globally to any layer that’s synced to it. For example, create a text paragraph and assign a text style to it with a specified font and color. Save that text style, then copy/paste the text box into the several different artboards within your project. Whenever you adjust the text style every instance of that text box will accept the new style. In Photoshop and Illustrator you’d have to adjust each text box individually. Shared styles save an incredible amount of time.
  3. Artboards are not exclusive to Sketch, but the development team has definitely made the process in using them much easier. The application allows the user to add multiple artboards of varying sizes to one project (you can do this in Illustrator too). In addition, Sketch includes a list of preset artboards of popular viewport sizes from desktop HD to an Apple iWatch. Just click and it appears in your project. This makes responsive design a snap.
  4. Sketch has a built-in layout feature that allows the user to toggle columns on and off (and grids, but I haven’t used this feature yet) which helps designers now accurately place elements on an artboard. The layout setting for columns (and grids) are fully customizable. You can adjust the total number and width of columns as well as the gutter widths. Working with the column layout feature is especially helpful when designing a site when the Bootstrap framework will be used in development.
  5. Exporting final assets has never been easier. Sketch provides a straight-forward way to export layers in various formats (.jpg, .png, .svg) that are properly sized and ready to be shared with a development team. In just a few minutes you can set up specific export guidelines for each individual layer. When clicking the export button items are packaged and saved into a pre-selected folder on the desktop.

I might be a noob to Sketch, but I can see the enormous potential is has to speed up my daily workflow in the office. Will I completely ditch Adobe Photoshop and Illustrator? Definitely not. There are features in both apps that Sketch can’t replicate. However it seems hard to beat for time-efficient user interface design.