Designing the Recurse Newsletter: Still Computing

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?)
  • What type of organization are you working with? (e.g., large tech company that can afford to pay a lot, or small startup?)
  • How much experience do you have relative to other people in the industry? (i.e., what is the rate that other people charge that have a similar amount of experience to you?)

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.

And.Co contract process: Step 1 — basic info & rate
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”
  • 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
  • thinking
  • brain processing
  • prototyping
  • searching
  • anchor-point construction (skeleton)

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

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:

Option 1: Progress bar
Option 2: Pattern background with computing icons
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

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:

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:

Recurse Website nav colored links

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!

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:

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:

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:

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.
  • 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.

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!

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

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