Designing With Sketch 3 – A New And Better Workflow For UI Design

Back in August of 2014, I wrote an article Web Design Without Adobe Photoshop where I finally decided to put the graphics giant, Photoshop, to the side and try some different tools for working with UI and Web design. I didn’t do this to be different, I really and honestly needed a more efficient way to design responsive layouts.

Since the time of that first article, Photoshop has made some big improvements, but I have stuck with Sketch 3 (Bohemian Coding) and haven’t looked back.

What is Sketch?

Sketch is a design application that is available only for Mac, but is dedicated to UI design. Sketch is purpose-built for interface and web design, and relies heavily on vector graphics. It has limited image editing capabilities but is good enough for basics.

Some claim that Sketch could be a replacement for applications like Adobe Illustrator for icon or vector graphic design. I can tell you that in my experience this is definitely not the case. However, as a replacement for Photoshop in web and UI design, absolutely. For a meager $99, Sketch also weighs in light in the expense department compared to Photoshop (Creative Cloud subscription or Purchased).

Why Would You Want To Use Sketch?

If you are an interface designer or web designer, you will definitely want to consider giving this application a try. Here is a short list of some of my favorite features:

• Encapsulated Projects – All your designs, artboards, pages, symbols, and styles in one project. No more multiple file craziness.
• Symbols – You might think of symbols as master items, things that can be reused throughout the project, and when changed in one spot they change in all spots. They can be as simple as an object, or as complex as a navigation and masthead layout. Photoshop has something similar to this in smart objects and linked .psb files, but in my opinion, this is still clumsy in comparison. Making global changes, or corrections is a breeze.
• Global Styles – Text styles, and symbols make keeping object styles and typography consistent.
• Infinite Art Boards – In a Sketch project, you have Pages, and within pages you have Artboards. If you use Illustrator, Artboards should be a familiar feature. Artboards are great because you can create multiple views/screen size designs side by side, very simply. Mocking up new or modified versions of a design is easy as pie.
• Light Weight – A sketch file for an entire website design might get to about 53-70 MB in size on average, compared to the massive file sizes PSDs can get to, not to mention you will often have multiple PSDs.
• Extremely Powerful Asset Exports – Sketch’s export feature is amazing. Recently Adobe has tried to mimic this with its extract function (I find it a bit more clumsy than Sketch’s slice export). Essentially any object or image can be made a slice for export and in one sweep you can export in multiple sizes, and formats… bam. Powerful.

In my opinion, Sketch is the application of choice for interface design. I have seen a marked improvement in productivity and reduced process time since switching.

Disadvantages of Sketch

There are a few disadvantages to this program, but then again nothing is perfect. Here are some objective issues and some personal ones:

• Mac only – What a shame. However all is not lost thanks to a nifty plugin called Avocode that allows developers to inspect and extract assets from Photoshop or Sketch files (see figures to the right) without having the applications, and it’s cross-platform.
• Typography – I am a bit of a Typophile, and I will admit that Sketch’s typographic controls are limited, but given what it is used for, some of the finer tuned controls would be lost in interface design anyways. Once you figure out how to manage styles, and work with the type engine, some of that initial frustration will go away. A small niggle.
• EPS import – Typically it is very good, even copying and pasting Illustrator objects directly, but occasionally there are issues, and you may have to fine-tune your vectors from other programs first. My issues with this are very rare and at the end of the day not a big deal.
• Vector Editing/Creation – It might be that I am extremely biased towards Illustrator for creating vector objects, but I don’t like using Sketch for anything beyond making shapes that would occur in web or UI designs (rectangles, rounded rectangles, ovals, etc.). Others may find using Sketch suitable for icon, or vector graphics creation, but I find it frustrating.

In Conclusion

I have been using Sketch now, almost exclusively since August 2014, and actually cringe a bit when forced to design in Photoshop now. The workflow has been trouble-free with our front-end developers as well (this was my biggest worry).

Have you used Sketch 3, or replaced Photoshop in your User Interface Design workflow?