Designing the Recurse Newsletter: Still Computing

Image for post
Image for post
Issue #1: Hello World. Viewable at https://www.recurse.com/still-computing/issue-1

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.

Collaborating on the newsletter design was my first time doing a freelance project, so in this blog post, I’d like to both describe how the design came about and what I learned about managing my time on a contract project.

Generating a Contract

Recurse asked me what my rate is, a number I was unfamiliar with determining. In particular, for any project, there are many factors to consider when determining your rate:

  • What type of work is being asked for? (e.g., software development, design, strategy, brand?)

To determine my rate, I turned to the Hundos community, an invite-only Slack group of designers mostly based in NYC. They have a lot of great resources and spreadsheets of rates for freelancers based on experience, city, type of work, etc that I referred to. Unfortunately I can’t share that information publicly but you can send me a message directly and I’m happy to talk about how I determined my rate.

I wasn’t sure whether to commit to a fixed flat rate for the project or an hourly rate, but I decided hourly would be better given that the project was still being defined and it was hard to determine, as a result, exactly how much work would be required. Recurse agreed to pay my hourly rate, so the next step was putting together a contract.

For the contract, I used and.co, which has a step-by-step process where you can add basic but very important legal things to a contract. It was developed in collaboration with the Freelancers Union and adds clauses such as a harassment clause, late / cancellation fee, etc, all things I wouldn’t have thought about otherwise.

Image for post
Image for post
And.Co contract process: Step 1 — basic info & rate
Image for post
Image for post
Step 2: Default Contract Settings that can be edited

And.co is free and was great for my purposes. So once the contract was signed, which And.Co handles nicely via email, I could start with the project.

Proposing Directions

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”

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:

Image for post
Image for post

Then I brainstormed ideas around what “Still Computing” might mean:

  • loading screen

At the same time, I put together a Pinterest mood board of art around computing that I like:

Image for post
Image for post
Still Computing Pinterest Mood Board: https://www.pinterest.com/scientiff/still-computing/

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:

Image for post
Image for post
Option 1: Progress bar
Image for post
Image for post
Option 2: Pattern background with computing icons
Image for post
Image for post
Option 3: Network showing people and their creations, focusing less on the underlying tech

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

Image for post
Image for post
Icon Set

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:

Image for post
Image for post

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:

Image for post
Image for post
Recurse Website nav colored links

This led to a proposal of three color themes:

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

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!

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:

Image for post
Image for post
Newsletter Examples

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:

Image for post
Image for post
Image for post
Image for post

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:

Image for post
Image for post
Design Spec

That’s pretty much it! Amazingly the Recurse team implemented the HTML & CSS in a single day before launch.

Process Tips

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.

For fun and promotional purposes, I also created this GIF of the icon set.

Image for post
Image for post
Icon Gif

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

Sign up!

Image for post
Image for post

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! (:

Written by

designing tools for making.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store