There is an ongoing debate over whether or not designers should learn how to code. I tend to side with the proponents because it allows you to solve entirely new classes of problems (and design is, after all, mostly problem solving). For those with an aversion to coding, I’d like to present an argument for learning to program that you may not have considered before.

Neckbeards optional

The debate around designers learning to program tends to focus on grokking the basics of Javascript (for wiring up UI interactions) and a server side language like Ruby (for view templates and talking to databases). These are valuable skills, but some designers view these tasks as mundane “plumbing” work best handled by dedicated developers.

We designers are, of course, visual thinkers. Sure, you can write code that will sort an array, but you can also write code to create pixels. If you’ve written CSS, you’ve already witnessed plain text transforming into pixels. Let’s take that concept to the next level.

My co-worker, James Kang, recently created one of my favorite Octocats for our GitHub Bounty site.

Noircat

I thought I could make this amazing illustration even better by adding some animated smoke to the pipe. So, if you visit the site with a modern browser, you’ll see hundreds of copies of a tiny PNG smoke particle coming out of Noircat’s pipe by way of some Javascript. Here, the code is just a means to an end — another design tool in the toolbox.

Programmatic artwork

Writing code to simulate smoke is interesting, but very specific to one situation. I’d like to talk about a technique that is capable of creating nearly endless design variations with the same code.

A little while ago, we used to show a generic placeholder if you didn’t have an avatar on your GitHub profile. Generally speaking, this was fine, but it was somewhat annoying when viewing organization member pages or discussion threads with a bunch of avatar-less users.

We decided to generate “identicons” for users without avatars. The idea of identicons has been around a while and it’s a way to visually represent a unique value. In our case, every user has a unique user ID and we generate a sort of retro graphic specific to them.

GitHub Identicons

The same few dozen lines of code can create millions of combinations of colors and patterns. If this sounds interesting, put on your propeller hat and continue on.

SHAmazing

We were recently presented with a couple of similar design problems. We were launching a site called GitHub Guides as well as an updated Explore Showcases feature on GitHub.com. For both, we wanted to have some sort of distinct visual design for each guide and each Showcase category, but we didn’t want to rely on a designer or illustrator to create ongoing custom artwork.

Using the idea behind the identicons to generate unique colors and patterns seemed to make sense. We’re going get a little technical now, but if you lean into it, I promise it’ll be fun.

The key to creating these sorts of generative designs is the SHA. There’s a family of algorithms used in cryptography to generate “hashes” of strings so they can be stored securely (e.g. your password is encrypted before storing it in a database). Pretty much all programming languages have SHA libraries you can use.

This may all sound intimidating, but the only thing we care about in this case is that no matter what text we put into the SHA function (I’m specifically using the SHA1 function which you can tinker with here), we’ll get back a 40 character hexadecimal string (the same characters you use in your CSS colors).

For example, the string Making pixels with code becomes

f3da29ce23e96dc8b38df6ab3b6aaf7995cc581a

Believe it or not, we now have everything we need to make cool patterns.

GeoPatterns: a case study

Since every GitHub Guide and Explore Showcase section has a name, we can use that to generate a SHA. One nice thing about this technique is that even if the name changes by a single character, the entire SHA changes entirely. This means that even if your strings are relatively similar, their SHAs will be very different.

I wrote a Ruby library called geo_pattern which is open source and free to use. In a nutshell, you give it a string (like the title of an article) and it generates a unique SVG image that can be tiled as a background image.

We do this by using the values at different positions in the SHA. I arbitrarily chose to look at the character at position 20 (which is f, with the first character at position 0) to decide which of 16 types of patterns to use. Why 16? Because a single hex character can be 0 through f, or 16 possible values.

f3da29ce23e96dc8b38d f 6ab3b6aaf7995cc581a

This value corresponds to a pattern called chevrons in the geo_pattern library. Again, these were all arbitrary decisions — you get to make up all of the rules when doing something like this.