Grey & Grapes
Branding and building a food blog from scratch.
I’ve long held the pipe dream of writing a cookbook that celebrates Asian-American home cooking. When I started practicing design professionally, I realized that creating a food blog was the perfect opportunity to take a step toward that dream and challenge myself to create a brand from scratch. Over the course of a few months, my partner Phil and I worked together to launch our own food blog, Grey & Grapes. I took on the design and some of the styling, whereas he took the lead on the implementation. In this post, I’ll walk through how I designed the branding and recipe page.
Branding
As authors of a co-written blog, we knew we had to be aligned on our blog’s brand identity. To get started, I ran us through a lightweight branding exercise.
Brainstorming Adjectives
For three minutes, each of us took turns jotting down adjectives we hoped would capture the spirit of our blog. Next, we ran through our lists and boxed the ones that resonated the most. Phil’s included knowledgeable, passionate, and soul food (not an adjective, but we’ll let it pass). Meanwhile, mine included whimsical, bright, and instructive.
We then sat down to combine our lists into a shared set of values and guiding principles that we’d use to guide the rest of our design:
Our recipes are clear, helpful, and practical.
Our personality is passionate, knowledgeable, and whimsical.
Our visuals are bright, eye-catching, and playful.
Choosing a name
Equipped with our brand adjectives, our next step was to select a name. Our ideal name would hint at the two voices behind the blog, have some connection to food, and be fairly distinct.
I’d recently acquired the nickname “Grapes,” which I’d become fond of and used in my Instagram handle, @just_grapes. Though we were sensitive to the site sounding too much like a wine brand, we liked the connection to food and decided to riff off of the term “Grapes.” The names we brainstormed ranged from painfully punny (Grapesful) to obvious (Phil & Grapes), but it was Phil who came up with the one that stuck: “Grey & Grapes.” We liked the repetition of the “Grey” sound, the allusion to two writers, and the reference to some of our favorite food and drink (“Grey” was a nod to Phil’s favorite tea, Earl Grey). As an added bonus, it was unique enough that we’d have no problem acquiring the domain. Just like that, we had our name.
Colors
Another one of the nice things about our new name was the way it directed our color selection. Grey was an easy choice for a secondary color, but for an accent color, we considered the colors of actual grapes: red, green, and purple. Based on the brand values we’d identified earlier, purple seemed like it could best capture the whimsical, yet knowledgeable personality we hoped to embody. To narrow in on an exact shade, I turned to Adobe’s color explorer.
There were a few that seemed promising, but when tested with example copy, didn’t feel quite right–some were too dark, others too muted. The exception, and the inspiration for our blog’s color scheme, was grey plum.
I loved the contrast between the dark, yet playful purple-pink accent color and the understated greys. Their dark hues meant they worked well in header and body text, too. After trying them out in various combinations, I chose the three colors in the center above (#323232, #646464, and #7E4A5C) as the palette for our blog.
Logo
Prior to Grey & Grapes, I’d never seriously attempted to design a logo. I had an inkling that I wanted the logo to match the “grapes” theme, but my I wasn’t sure how to get started. Thankfully, I had Patrick Lewis, my colleague and a talented visual designer, to guide me. He suggested two ways to gather inspiration: Browse Dribbble and consult Los Logos.
I started with Dribbble, running through a series of relevant search terms, such as “grapes,” “grapes logo,” “G logo,” and “GG logo.”
The results were a great source of inspiration. I appreciated the creativity that went into many of the designs and the way successful logos conveyed their brand’s personality.
Los Logos was even more impactful. I flipped through all 400 pages in a single session, paying particular attention to the handful of names that included ampersands. As I went, I sketched Grey & Grapes logos in a sketchbook. At this stage, I was aiming for quantity, not quality; the details could always be refined later.
As I sketched a logo involving a prominent ampersand, I was struck by a sudden revelation: there are two major ways of writing an ampersand. I was accustomed to the classic representation, a ligature of e and t:
However, the style more common in handwriting, the lowercase epsilon (Ɛ), often appears highly stylized–and when it does, its bottom half somewhat resembles the letter G:
What’s more, the swirling loops and dots resemble vines and grapes, making an even stronger connection to our name. Inspired, I jumped into Sketch to try turning some of the designs into vector form.
Midway through the process, I found a handful of free typefaces on Google Fonts and tried various placements and color combinations alongside our mark.
Sail, with the dramatic thick-thin contrast typical of Didot scripts, stood out as having the right balance of professionalism and whimsy. However, our mark felt thin and flimsy in comparison. I adjusted the curves in Sketch until the weights were better-balanced, resulting in the following logo and mark.
Typography
Having browsed a number of food blogs for inspiration, I had a hunch that the combination of a more unique serif for display text and a simpler sans-serif for body text would help us convey the right balance of professionalism and whimsy. I returned to Google Fonts and tried out a number of serifs with potential recipe titles.
When I found Alegreya (shown in the lower-right above), I was drawn to its quirky, calligraphic feel, as well as the strength of the bold weights.
The selection of the body typeface was even more straightforward. I started with Open Sans, but at the suggestion of my friend and typography enthusiast Nelle McDade, I checked out PT Sans. After trying it in example copy alongside Alegreya, I quickly came to prefer the subtle dose of personality it added to our designs.
Recipe Design
Competitive Research
Recipes on the internet vary widely, from multi-page memoirs about a favorite dish from childhood to a barebones list of steps with no photo or description. To gather inspiration and better understand what made recipes pleasant or unpleasant to use, I perused my go-to recipe sites, award-winning food blogs, and my small but beloved cookbook collection.
As I read the recipes, I reflected on the experience of cooking from them, then jotted down the elements I wanted to capture into user stories. After that, I separated them into “must-haves” and “nice-to-haves”:
As a home cook considering this recipe…
Must-haves
- I can see a photo of the plated dish, so I can tell what it’s supposed to look like.
- I can read a short blurb about the recipe for added context (but not an essay-length story, so I’m not scrolling for days).
- I can see how many servings the recipe will make.
- I can see how long the recipe will take.
- I know what ingredients I’ll need, ideally with weight measures.
- I can see the instructions and ingredients at the same time, without having to scroll back and forth or flip the page with floury hands.
- I can see the instructions broken up into clear, precise steps, so it’s easy to keep track of where in the recipe I am.
Nice-to-haves
- I can see categories and/or tags for this recipe.
- I can see tips & adaptations from the author.
- I can update the number of servings in the ingredients box.
- I can share the recipe on social media.
- I can find and easily navigate to similar recipes.
- I can view a video of the recipe.
- I can see photos for key steps.
Low-Fidelity
From there, I began sketching the UI on pen and paper, experimenting with different placements of the photo, description, tags, and steps.
High-Fidelity
Once I had a couple of lo-fi sketches that satisfied all of the “must-have” user stories, I was ready to move to a higher-fidelity medium. I’m a firm believer that realistic content makes for realistic designs, so I wrote up my first recipe (for Nutella Ice Cream Cake!) to plug into the designs.
Lightweight User Testing
As I designed the page, I showed my in-progress work to friends who enjoy cooking and asked them to pretend that they were considering whether to use the recipe. Based on their input, I added the ability to jump directly to the directions from the top of the recipe and view inline photos for particularly tricky steps. You can see these changes on the live blog today.
Once I was happy with the core functionality, Phil and I sat down together to tweak the visual design and ensure the layout scaled on mobile devices. In the spirit of dogfooding, I made one of Phil’s recipes, the Chinese Cucumber Salad shown below, using only the blog on an iPad as reference. Happily, it went well, and we launched the first version of Grey & Grapes!
Acknowledgements
A huge thank you goes to Patrick Lewis and Nelle McDade for their thoughtful advice and honest feedback. My appreciation also goes to Phil Chen for being a fantastic partner throughout the process of designing and building this blog. Finally, thanks as well to the many friends who provided encouragement and feedback along the way.
