Designing without reusable elements is like coding without partials

Or: why I don’t use Sketch… yet

If you’ve used any modern coding framework or even a platform like Wordpress, you’re probably familiar with the concept of partials (also called includes), or reusable pieces of code. These are used for things like headers and navigation menus. It would be silly to copy and paste your header code onto every page of your website, right?

An example of includes in Hammer.io

I take that back. It’s not silly. It’s maddening. Unless you can make changes once and see them everywhere they appear, you’re wasting time. Sometimes, an awful lot of time.

So why do some design tools lack an equivalent to partials?

There are several ways to build reusable elements into design software:

• Master Pages: used in tools like Keynote. These act like locked layers behind your content. Great for things like background patterns and header bars.
• Layers / Layer Groups: in Photoshop and Illustrator these can be used as de-facto Master Pages, thanks to the ability to toggle layers on and off. More powerful than Master Pages in that they can appear above content as well as below it, and you can combine as many as you like.
• Master Elements / Symbols: examples include Smart Objects in Photoshop, Symbols in Illustrator. More flexible than Master Pages, as each instance of a symbol can have its own unique location on the page. This can be useful or annoying, depending on your needs.

I currently design in Adobe Illustrator. A big reason for that is having both Layers and Symbols built in.

Here’s a simple design file in Illustrator.

Let’s say we want the big content area to be a slideshow, with the same header, photo, and the same three boxes below, but a different color and icon.

We could copy and paste everything onto a new layer (or worse, a new file!) for each state of the slideshow. Or, we can do it smart using layers:

I’ve included the Illustrator Layers panel here to show how the bg template works

The header, photo, and three boxes are all on the “Background” layer, while the color overlay, text and icon vary from one Slide layer to the next.

Layers work great for lightboxes and other overlays, too:

That’s where Sketch comes in. Without a doubt it’s a fantastic app. In many regards it is far better for web and mobile design than either Photoshop or Illustrator—from text rendering to responsive breakpoints; from the speed of the interface to the price of the app and more.

It’s a tool built especially for our needs as opposed to Adobe’s tools which were built for other purposes and adapted (often poorly).

But there’s not a chance in hell I’ll switch… yet. Sketch offers exactly zero ways to reuse interface elements from page to page. You can copy and reuse element styles, but not elements. I can’t really overemphasize what an enormous step backwards this is for interface design.

Look at it this way: every single site I’ve ever designed has had at least a header and nav, and every single site I’ve ever designed has had changes to one or both of those. Many projects have contained dozens of screens; a couple have exceeded a hundred. So every little change would translate to dozens of copy/pastes, trying to keep pages in sync. And jebus knows how many confused client comments, asking why the nav doesn’t match on the occasional page I missed.

It’s the kind of thing where once you find out there’s a better way, you can never go back.

I would never use a coding framework or CMS that didn’t support partials, and I will never use a design tool that doesn’t support reusable elements.