Using Random Values in Web Design
This week I helped launch Ilana Kaplan’s website. Ilana was previously working with a couple static pages so we moved her over to a Wordpress instance for easier updating. While I was setting it up I also went ahead and worked on a redesign.
In much of my generative work I use random values and uneven distributions of those values to create unexpected design decisions that still feel controlled by a human influence (more on parsing that sentence later). I wanted to look at doing something similar with a few elements of Ilana’s site.
I ended up choosing to assign the randomization process in PHP. Using a Wordpress caching plugin meant that the randomization process would only be seen once, but since Ilana was going to update the site pretty frequently the page would be re-cached often enough to give people a sense of randomness.
Let’s start with a super basic random function. I had this idea to pull a series of letters from old type books I own and grab them at random to create a “logotype” of sort.
So here we’re going to pick a random number, and based on the number display a different version of the letter. (In my case I used SVGs but just to keep the code bloat down lets look at an example using images.)
In Ilana’s site I made five versions of each letter (one for each initial). Just with the code above I’ve created a system where there are a possible 125 variations. Here’s a brief sample of what those look like:
So when I went to design school, I had a professor named Gordon Salchow. I don’t know if he invented the term, but I’m 99.9% sure I’m giving him the credit for it. The theory about spice colors in this: in any color palette, not all of the colors should be used the same amount of time. Just like in cooking, you use spices in small amounts to add flavor to food. Similarly in visual design, you can use colors in small amounts to add a layer of visual flavor. Sometimes you do this to draw attention to something, sometimes you do it just because design without spice if boring.
I knew Ilana’s site was going to be a grid of colors. And I knew what colors I wanted to use—warm pinks, oranges, and yellows mixed with a spice of purple or blue. An even distribution of those colors would look very patchwork, whereas I was looking for something more even with a burst of color here or there.
There are a lot of ways to do distributions—I recommend looking at The Nature of Code series to see just a few of the options. But in my case I went with a pretty basic method.
If you remember way back to math class (sorry!) you remember all those lessons on probabilities. We’re applying probabilities to our color selections to create weighted chances for colors. In the case of this site, there’s a 12 in 20 chance we choose pink, an 6 in 20 chance of orange, and a 1 in 20 chance for either purple or blue.
It’s important to note this isn’t saying every 1 in 20 times use purple or blue. The nature of randoms is that sometimes you end up with a purple followed by another purple. It’s that unexpectedness that makes randoms so interesting as a design feature.
Here’s a few of the outputs this generates. Even in a field of sixteen squares there’s a huge range of possibilities.
The two examples of random shown above certainly aren’t the only types of random possible, and there’s a whole world of creative theory about randoms.
There’s even a theory out there that using randoms is cheating. And by randoms said group means arbitrary randoms. Using the Math.random() function or similar is seen as a crutch. But they don’t frown upon using randoms when they come from somewhere. For example, you could pull a timestamp and use that to calculate from. Or in Ilana’s case, you could take the first letter from a clip title and map that from one to twenty-six. Then use that to create the number of possibilities of the color to be a certain square. There’s lots of ways to slice a random.