Anti-Racism Site Brainstorming

I love the part of designing a website where you’re exploring initial ideas.

You’ve got a general direction and it’s time to think through interesting things that might play into the visual design and the functional aspects of this thing that doesn’t yet exist.

Somewhere around Rasmus Lerdof’s quote – “I actually hate programming, but I love solving problems.” is where I land. I like to solve problems and I’ll suffer through programming to do it but I also like to create possibilities. That’s what this portion feels like. I’m just pointing towards possibilities. That’s fun. I don’t even really have to worry about the hassle of the details . . . I can mainly just say “Wouldn’t this be cool/interesting/amazing/fun?” or “Have you ever thought about?” and “Did you know that we can . . . ” Keep things positive at this point.¹

This is also the portion of site design where my habitual hoarding of interesting things I find on the Internet comes into play. My tendency to wander gives me more material to draw from. Keeping rough track of neat things I find along the way pays dividends when I need examples and inspiration.

Leanne Galletly with Middlebury’s library got us started with this font/color selection. I like having other people involved in the process like this. I have missed having Matt and Jeff around.

The following are just a couple of little examples that I’m able to churn out pretty quickly. I find that actual things tend to get a better reaction and it’s worth a bit of investment to make them. Usually I learn something in the process anyway and even if I don’t use them this round, I’ll have something for another project down the road.

Images

One of the items that came up in our discussion was that we wanted to avoid clip art and stock photos completely. That always makes me happy. One of my habitual discussions during website design is how much of the homepage is it reasonable to give up for an image? Is the image that powerful? Is it why people came to the site?

Now a couple months back, I had wandered into the Middlebury Library’s archive.org site for photos. I had seen this photo of a student protesting in 1987. I saved the photo at the time with the possible plan of running it through Illustrator and making a poster. Maybe using it as part of an art installation or something.² I went back and found a few more photos I thought we could work with.

This also had me thinking of how we’d credit that image and associate it with the particular protest. I liked that concept (despite the work involved) as it’d be a gateway to social protest at Middlebury. We could create a protest custom post type and build out a timeline and all sorts of neat stuff.

At a point in the construction of the Makerspace site, I was looking at Maker profiles and thinking about a CSS treatment for images of the people there.³ It led me to this codepen.io example which I still had open in one of my many tabs. I forked the example and put the 1987 protest image in it with two of the stronger theme colors applied.

See the Pen
Monotone-ing an Image – antiracist site demos by Tom (@twwoodward)
on CodePen.

Patterns

Another thing that I’ve wanted to do for a while is use javascript to generate patterns in some interesting way. It could be used in isolation but I could also imagine it being used in combination with images that have are cut out and overlay the pattern. We’d look for images where we could cut out elements of the protest the images over geometric backgrounds. This is a good bit more work, as we’d need to find the right kind of images and do the editing but we could generate the backgrounds automatically. This is an example using the established color scheme from another codepen that I forked.

See the Pen
Creative coding – Geometric Patchwork – anti racist color theme by Tom (@twwoodward)
on CodePen.