Building & Scaling a Design Language


 Oooooh design languages

Usually design trends are head scratchers at first glance, a few weeks later they start to show up in your work, a few more weeks pass and something else new and weird comes along, that also slowly starts to appear in your work, and outside of the vague influence they’ve had, they fade into oblivion. And the cycle continues. Or maybe that’s just my experience. Regardless, all along the way little bits and pieces stick around. It may be too soon to really tell, but I think the design language is different. And it’s because it’s not a new concept. It’s recent rise to internet stardom is merely a symptom of the ever-expanding need to design for every medium and platform under the sun. And for good reason. Without a design system or common visual language, it’s extraordinarily difficult (dare I say impossible) to stay visually consistent and current when you’re creating for different screen sizes and platforms at scale. Oh, and doing so while you’re facing unforgiving deadlines.

Working on a small team, means a lot of times we have to ship quick, one-off solutions. Unpredictability and urgency is often the nature of the business. That’s not to say that these quick solutions are bad or temporary by nature, but without ever learning and changing (and getting feedback from real people) we end up accruing a whole lot of design debt along the way. And that leads to losing touch with your user base, which is never a good thing. A design system can help ease that pain.

 Y'all still with me?

Trends come and go all the time. The design language is different. (I think)
Design languages help with staying consistent and current at scale.
Design debt accrues quickly and quietly

 Actually Using The System

I’m talking about a design language specifically for use in creating a huge volume of marketing email. Gross, I know. Email isn’t very exciting to talk about, because you’re pretty limited in terms of visual design and it’s a special kind of hell for developers. BUT, since starting to use a design language system I’ve found that the whole team hates them considerably less and we’re making better stuff. I suspect it’s because there’s less having to worry about the structure and flow, and more ability to focus on the idea behind the design.

Screenshot 2016-09-08 18.03.46.png

 1 - Sketch

We have one master Sketch file that holds all visual components. A few pieces that should always maintain the same size & padding are Sketch symbols, like headers and legal copy, but most elements live on their own artboards. Reason being that the language is supposed to be flexible (i.e. adaptable) and resizing one instance of a symbol in sketch will resize all instances of that symbol, which freezes up your machine for a minute and messes up all your designs in that file.

 2 - Github

We use Github as a changelog since there are a few different people iterating on the same system. For each update, you start a pull request that’s accompanied by .png exports of the new and improved elements paired with a short explanation of what’s changed and why.

 3 - Dropbox

After the pull request request is approved, the updated sketch file is added to a shared dropbox folder where it’s available for everyone to use instantly. And, should anything happen to that file, dropbox supports versioning, so we can revert back to a previous version of the file.

Screenshot 2016-09-08 18.42.48.png

I’ll update this soon with plans on how we’re expanding the language to include other pieces of digital advertising, but until then ✌️


Now read this

universal f#%$!g shortcuts

Why the fuck are there not universal shortcuts between design software? I’m looking at you Adobe. Yeah, you too Sketch. Let me just start by asking, why, dear god why, did Sketch think it was intuitive for ‘V’ to be the pen tool AND the... Continue →