(A tiny step towards) Automating Web Design
I’ve spent an inordinate amount of time fiddling with the theme and look of this blog, and so I decided to see what happens if I try to automate my experimentation.
To that end, I cooked up some simple Javascript to randomly pick style choices from a given range and apply them to a page. The style choices for now are simple: text width and alignment, typefaces for headers and body text, type scale and color pallette.
You can play with the page here (you might have to allow the browser to run the embedded script). Every reload will give you a completely new, randomly generated look.
Yes, there are a few horrible-looking duds, but a surprising fraction of the generated styles don’t look half bad, a few even look very good.
One can imagine stretching this in many interesting directions. For example, you could perform sentiment/mood analysis on the body text, and match it with a typeface that has similar characteristics. Of course, there are also the million other CSS variables that I didn’t change.
I’ve argued previously that a lot of what today’s creative professionals do is variation within a theme, and that can be easily replaced with an algorithmic system that incorporates enough randomness to make the output look organic. This is another small example along those lines.
Here are some screenshots, starting with the vanilla unstyled page. I used the page from the CSS Zen Garden.
