By:Kole Hainz Posted On: Topic:Design

30 days with Sketch

I’ve been evaluating Sketch for the past couple weeks primarily as a (static) wireframing and visual mockup tool. It’s absolutely the darling design program of the past year or so and after a month, I can see why.

It’s been refreshing. Liberating, even. This is the tool web and mobile designers have been asking for. One program will (and should) never be a panacea, but it is definitely an improvement over its competitors.

Photoshop was the hero we needed for a time, but Sketch is the hero we deserve.

The learning curve is so small. I’ve found myself thinking back to the days of first learning Photoshop and Illustrator and how overwhelming it was — the arcane shortcuts, the inconsistencies across Adobe products and the endless well of (rarely used) features.

I was able to master Sketch in a day or so of working. I’m still discovering features and shortcuts in Photoshop. Part of this is Sketch’s limited feature set; part of this is being designed specifically for interface design.

Sketch has just enough tools for designing modern interfaces without the feature creep of its competitors

Finally, an RWD-first Tool

Photoshop has long suffered from kitchen sink syndrome. It’s a photo-manipulation tool and that’s become a de facto software design program. Layer comps are at best cumbersome and at worst stymieing.

Photoshop’s layer and layer comps quickly become unruly when designing multiple pages.

Photoshop’s Frankensteinian approach was passable for the early days of the web, but for our multi-device, responsive world, it no longer works.

Mobile-first doesn’t mean designing for small devices in a vacuum — it means concurrently thinking about the experience across viewports.

This is where Sketch is game-changer. Being able to toggle pages and simultaneously design across screen sizes is truly liberating. It’s viewport-first versus responsive web design-first.

Sketch’s pages, default artboards and grid features are ideal for modern, responsive web design.

Sketch for Visual Design

Sketch has powerful vector and illustration tools. Some of the things people have been able do with it are truly impressive.

However, day-to-day, I’m primarily focused on interaction and UX, so I have not deeply explored its path editing and visual design tools.

However, for the visual design work I do, it’s been perfect. I find myself fighting less with features (blending options, adjustment layers) and simply getting down to designing the interface.

Sketch for Wireframing

Most of my day-to-day work with Sketch has been using it as a wireframing tool.

Admittedly, I’m a recovering Fireworks fan. It had the layout tools and flexibility to rapidly create wires, the visual design tools to create some pretty sexy mockups and just enough interactivity to get the vision and proposed functionality across to clients.

Axure and Illustrator have been my tools of choice since Fireworks flickered out.

However, Axure has become long in tooth and Illustrator was never designed as a wireframing tool.

Axure’s powerful interaction tools were great for a time (and ostensibly still useful for complex software), but any designer with basic front-end chops can more-efficiently create a prototype using code and a framework like Foundation (it’s responsive and easily editable).

However, rapid prototyping in code isn’t for everyone. Nor is it for every situation.

Illustrator has a lot of the freedom (artboards, free-range canvases) of Sketch, but it lacks a lot of the features to rapidly design interfaces (no built-in layout grids, no default UI stencils, no concept of pages versus artboards).

Sketch’s default templates have a number of built-in UI symbols

Sketch offers the flexibility of Illustrator but with just enough tools from more robust prototyping and wireframing tools like Axure.

There Are Limitations

Naturally, Sketch doesn’t play well with Adobe products. At best, you can export a Sketch file as a PDF (or EPS) and import into Illustrator. But like all PDF-to-AI imports, the result is a functional-enough file, but with odd-layer grouping and broken text boxes.

Importing Sketch-produced PDFs into Illustrator doesn’t always yield the most usable results

Sketch is, sadly, only available for Mac. A Windows version looks extremely unlikely. This, more than anything is a potential deal-breaker for offices that are both Mac and PC.

There’s no interactivity. This is a mixed-blessing. Does every design tool need to expand until it supports 3D and interactivity (*cough* Photoshop)? I don’t think so.

But how something works, how something feels and contextual motion design are just as important to creating a solid UX as design strategy, layout, content and visuals. Designing solely static mocks and wires ignores the bigger UX picture.

UX Pin purportedly has promising integration for creating interactive prototypes with Sketch. More on that in another post.

A Better Workflow

Using Sketch for interface design has also made me appreciate Photoshop and Illustrator for their original purpose.

This seems like the ideal workflow: an interface design tool for interface design, a photo manipulation tool for photo manipulation and an illustration tool for illustration.

Now to fork over the $99…

Drew Hainz

Want more industry news?

comments powered by Disqus
Let's Talk