Last month, one of my favorite organizations, The Recurse Center, reached out to me about designing their new public newsletter, Still Computing. This weekly newsletter is intended to share the excitement and joy around computing that is at the core of the Recurse experience:
Expect stories about bugs and rabbit holes, computing ethics, career advice, art made by humans about computers and vice versa, plus other things Recursers are excited to share.
- from their Signup Page
I was super excited for this opportunity and agreed right away!
In the Summer of 2018, I spent 6 months at The Recurse’s programmers retreat in NYC (more on my experience here) and have always been inspired by their mission to provide the space and support for anyone to pursue self-directed learning.
The first step was to better understand the ultimate goal of the newsletter. I had a call with Nick to determine what the newsletter was and what it isn’t, particularly as there are already newsletters / collections that are used to showcase project work at Recurse. Setting boundaries on what uniquely this newsletter would provide was critical for determining the design direction. Here are the goals we determined:
- Conveys the values & feel of RC: “Playful, technically rigorous, self- directed, collaborative, welcoming, inclusive, diverse, community-driven”
- Support an information-dense newsletter, where most of the content is in-line, but still make it skimmable
- Doesn’t feel too “start-upy”
- Colorful but not childish
I then did a quick overview of the existing RC brand, looking at both their digital communication (website, newsletters, etc.) as well as posters and t-shirts:
Then I brainstormed ideas around what “Still Computing” might mean:
- loading screen
- gears turning
- brain processing
- anchor-point construction (skeleton)
At the same time, I put together a Pinterest mood board of art around computing that I like:
I always think it’s important to present multiple options early on in a project so it’s easier to set the initial direction. I drew out three different options, each progressively further from the current brand, and asked which they preferred:
After sending these sketches to the Recurse team, they let me know that they were most excited about option 2; in the end, aspects of all three designs were used in the final newsletter.
Designing the Icon Set & Pattern Background
Since I already had sketches of icon ideas in my initial proposal, I used that to build a library of icons. Throughout the process, I referred to The Noun Project a lot as well as Google Image searches of the individual items. I designed all icons in Sketch.
Rather than try to make all icons fit within a traditional square grid, I decided to make them a consistent height with variable width to accommodate elements that are wider than they are tall like a keyboard.
Once I had the icons, I put together an initial mockup based on my sketch:
I used a monochrome green design to build off of the green used in the RC logo.
Feedback from the Recurse team at this point suggested several icons to expand the set as well as pushing the design to incorporate more color. For this, I used the colors that are on the nav on the Recurse Center website:
This led to a proposal of three color themes:
I personally liked the purple background the most given its contrast and darker hue, which lets the icons pop out more.
For the font, I used Consolas, a monospace font I like.
Now that the banner was decided on, I could work on layout!
The Recurse team wanted to put most of the content inline in the newsletter, rather than having links out to their website to read various articles. I went through examples of my own favorite information-dense newsletter to see how they organized their content:
I then proposed reusing the Desktop Window item used in the banner title to display the table of contents and featured content in a two column layout (on desktop) that turns into single column for mobile:
Finally, there was a lot of little prep things to do to get the final design ready for the Recurse team to implement, including exporting all my SVG icons, the banner background, and some basic design specs about padding / margins:
That’s pretty much it! Amazingly the Recurse team implemented the HTML & CSS in a single day before launch.
In total, I expensed 16 hours worth of work, which included several meetings. Given that’s about 2 business days of work, I felt pretty happy about it, though it was definitely longer than our original projection of 8 hours of work (!)
Here were some process tips I found helpful:
- I put everything up to the final spec in a single Dropbox Paper document. Every time I had something to review, I posed very targeted questions to help guide our discussion and focus our efforts.
- I used and.co’s to keep track of the hours I spent on the project.
- I left time in between each deliverable — I find it hard to come up with ideas on the spot and like to mull over ideas over a longer period of time.
- It was super helpful that the Recurse team automatically had only a single messenger to provide feedback. That meant I didn’t have to spend time prioritizing different people’s feedback.
For fun and promotional purposes, I also created this GIF of the icon set.
It turns out you can do this easily with ImageMagick installed with the command (where 50 is in milliseconds):
convert -delay 50 *.png mygif.gif
You can view Issue one at this link and sign up: https://www.recurse.com/still-computing/issue-1
Thanks again to the Recurse team for this opportunity — it was super fun and I’m so happy with how it turned out! (: