In the two years I’ve spent working on brand design at Murmur, I’ve approached redesigning our blog three separate times. (Three!) I’ve put countless designs in front of Aaron and Ariel, and even though they were my own, none of the designs ever felt “right”.
We had three goals throughout the previous (failed) blog redesigns:
- We wanted the blog to feel more editorial compared to traditional tech blogs
- We wanted to be visually distinct from other blogs, but not just through illustration
- We wanted to incorporate paper-related elements (inspired by Murmur’s paper characters)
What’s in a name? 🌹
Marginalia evolved from a few different ideas. I started brainstorming names for our blog around the themes of paper and writing. Most of them were unusable — pretentious, far too abstract, or just plain terrible (eg. Open Thread, The Input, ). But I found myself most drawn to this idea of “Notes in the Margin”. I knew it wasn’t quite there, but I sensed that I was on the cusp of something that felt right. I shared the idea with Ariel, and she told me that there was actually a word for that: Marginalia. She had originally pitched that as the name of interactions in Murmur — and it felt like a sign.
Marginalia is defined as “marks made in the margins of a book or other document. They may be scribbles, comments, glosses, critiques, doodles, drolleries, or illuminations.” Most examples I came across were found in illuminated manuscripts (also see, Medieval Marginalia) or notes written in the margins of books.
Marginalia is created for many reasons: As a way to make corrections, mark your place in a book, add further commentary, express feelings and thoughts, provide visual examples… or simply just because.
Brainstorming and ideating
I started exploring how to make the blog landing page feel more paper-like through typography, texture, color, imagery, and layout. I looked at editorial design from the mid- to late-1900s and was particularly inspired by IBM, Olivetti typewriter ads, and Emigre.
Some more contemporary inspirations were Kinfolk and Flaneur. I liked their bold use of large and unapologetic type.
Enough with the Garamond revivals
In my initial designs, I felt like the type was competing with the visuals and the concept. There was too much going on. I wanted the focus of the hero section to be on the type, rather than the imagery. I came across an old typewriter booklet, and just like that, I had the first iteration of what became the final design.
The Olivetti booklet, designed in the 1960s by Giovanni Pintori, used Garamond 3 Italic. (At least I think that’s what it is after an entire day of testing all the different Garamond and Garamond-adjacent fonts out there — the condensed width of the capital O made it tricky to figure out.) Either way, I ended up choosing different typefaces for our design for two reasons: it wasn’t readable for long passages of text, and I wasn’t about to straight up copy Pintori — minus, y’know, the layout (but that’s neither here nor there).
I landed on a combination of Dair by ShinType for headlines and Bely by Roxane Gataud for body text. This combination spoke best to the postmodern but pre-gradients-digital-brutalism-extended-sans feel I was after. I wanted to see what I could design with serif fonts that still looked like it was made in 2022, while clearly being an homage to its references.
"I wanted to see what I could design with serif fonts that still looked like it was made in 2022, while clearly being an homage to its references."
Our (semi-accidentally) custom logo
I initially experimented with Dair for the logo, but Ariel pointed out to me how similar it was to Magnolia. So, naturally — as anyone with a background in type design is prone to — I designed a custom logo. It was based on lettering artwork by Ross F George, who created the breakthrough Speedball ink pen. I stayed fairly true to the original design with some modifications for optical sizing. I also chose this as a reference because of the nested M, which I knew I had to include in the Marginalia design. I designed a few variations but went with a simple version that felt most true to the Murmur logo while still aligning with the visual aesthetic of George’s alphabet.
Making my life harder by adding more colors
Next, I played with the color palette. Up until I designed the logo, I had been using the Murmur color palette in layouts, but felt the blog now warranted some fresh colors that aligned with the historical references being used. I landed on a rainbow palette with more versatility and warmth. It kept some of the original Murmur colors and added in a few that Murmur doesn’t use at all (green, pink, and bright red). If Murmur’s palette was set in major, Marginalia’s was set in minor.
Making my life easier by not doing illustration
Simple, striking, and whimsical. This is what I wanted the blog imagery to convey. I also wanted to create a system that was simple enough that it wouldn’t take up too much design time (or energy #startuplife) to make imagery for new blog posts, while still being impactful. I added custom pencil doodles as a nod to the title of the blog, but also as a reference to Fat Pencil (our nickname for the pencil elements seen in Murmur’s brand). After exploring a number of iterations, I ended up with a combination of solid colored backgrounds, layered with black and white photographs of isolated objects, and pencil doodles that felt right.
Lessons learned
I worked with Murmur engineer and Webflow Wizard, Chase, to build our blog in, yes, Webflow. After going through this process, I recognize the limitations of some aspects of my design, at least while building it in a no-code environment — it requires more breakpoints than I would like, and it requires certain text limits to be met for it to look how I’d like it to. But hey, we’re a startup, and if we can’t experiment with our design now, when will we ever do it? A year from now, this blog may look very different.
What’s next?
While I want to add even more marginalia and reference more paper-like elements, for now, I want to make sure it simply works the way I want it to. Since Murmur hasn’t yet had a consistent blog presence, I haven’t had a chance to test out the sustainability of this design or illustration system I’ve created. If it works, I want to iterate on it. If it doesn’t, I’ll change it. The beauty of working at a SaaS company whose entire promise is built on making decisions, trying them out, then reflecting on them when they expire, is that nothing stays the same for long. When it’s time to try something new, Murmur is the place where it actually happens.