Branding and Design 101 for Food Bloggers Part 2: the BlogHer Food Presentation

Last Thursday I posted part 1 of the BlogHer Food Session Branding and Design 101 for Food Bloggers that Sabrina of The Tomato Tart and I lead. It’s discussed why you should consider branding your blog, how to figure out what your brand is, case studies on popular and successfully branded blogs, as well on making your own wordmark logo for your blog. For this post, I’ll discuss big picture ideas on how to design your blog, including how to develop a mood board and a color palette for your blog.

What’s a mood board? Well it’s an inspiration board full of images, text, and sometimes objects to help give your brand direction. Designers use mood boards to help understand the themes and concepts of a project. You don’t necessarily need to be a designer to create a mood board. In fact a lot of artistic creative types create mood board.

Christina Aguilera, in fact, uses mood boards to plan her album. I have a friend who is a young adult author, currently writing a fantasy book where the main character flips back and forth between the “real world” and the “fantastical world.” She uses mood boards to set herself in the right mood when she is writing scenes for each world, whether it’s a board full of bored students, family dinners and suburban neighborhoods, or mystical forest, sparkling clouds and towering and gorgeous castles. These items don’t necessarily have to actually exist in her book, but they set the appropriate mood for her so that she knows the perspective to write from for each chapter and each specific scene.

In fact, you may already be making mood boards and not realizing it. If you are using visual bookmarking sites like vi.sualize.us, weheartit.com or pinterest.com you are making mood boards. The concept is simple. You see an image you like on the web, you grab it and add it to your “virtual board” and categorize it however you like. You then label the boards in whatever way you want, with titles like “yummy food” or “gorgeous household items I want.” Mood boards are pretty much the same thing, you just pick images that resonate with you as a person and as a brand. As I stated before in part 1, your brand is an extension of you.

Here’s an example of what I mean when I say your brand is an extension of you. One of the defining moments in realizing what my own brand happened to be, was when I was at a discount housewares store (I believe it was TJ Maxx’s new houseware store HomeGoods). I picked up a bunch of small plates full of polka dots. I’ve seen polka dots dishes used in a lot of other baking blogs, so I figure I might as well pick some up. My partner AJ came by and saw them in my cart and asked me why I was buying them. “You’re not really a polka dot kind of guy. Why are you buying those plates?” That’s when I realize that I wasn’t really staying true to who I was, or my brand. I’m NOT a polka dot sort of guy. So those plates went back on the shelf. Your brand is who you are. Keep that in mind when making a mood board and building your brand.

When you make your own mood board, you want to find items that are inspirational and/or aspirational. When I say inspirational, I mean you want to find items that inspire you. I playing with spices and hard to find ingredients in my baking. So it might make sense for me to use choose a gorgeous photo of various exotic spices or rare ingredients on my mood board. That’s an example of something inspirational, as it inspires me to get into the kitchen and start playing with ingredients. I also adore over-the-top desserts, architecturally plated multiple layered desserts that you find at fancy restaurants. These aren’t something that I make normally, in fact, they aren’t the sort of things that mere mortals make, they are something that only the top tier professional pastry chefs make. A picture of that sort of gasp-inducing dessert would be aspirational. Perhaps one day I will achieve that level of amazing in my own food. I aspire to make something as beautiful as that. Your mood board should be full of both types of images.

You can find images for your mood board all over the web. From places like foodgawker.com and tastespotting.com to design blogs like designsponge.com and apartmenttherapy.com to places like notcot.com that’s a site of just cool things people have found across the web. Don’t limit yourself to just food or food related items. If you see a cool album cover, a gorgeous poster or a quote that resonates with you, put it on your mood board. Since I’m a design geek, I often times hit welovetypography.com for type inspiration and thedieline.com and lovelypackage.com for inspirational design packages as well.

Don’t forget to get off the computer as well! Window shopping at stores like Anthropologie, Urban Outfitters, Bloomingdale’s, Sur La Table, William Sonoma, Whole Foods or small boutique stores or restaurant off the beaten path, can be just as awesome. Depending on where you live, walking down the street and seeing the signs and posters on the windows of shops can be equally inspiring. Once you start looking around you, you’ll find inspiration everywhere. I’ve taken pictures of peeling painted walls, rusted iron doors and tree bark for my various mood boards before. With the ubiquity of smart phones, there’s no excuse not to take a quick snapshot of an object, poster or environment for later use it on a mood board.

And don’t forget your own photo collection. Like the hundreds of fonts already installed on your computer, you probably have thousands, tens of thousands (or maybe more) photos that you can use but often times don’t. Go sifting through them and pick out the ones that resonate with you or that mean something to you. Sometimes you’ll find the most inspiring images buried in the lost corners of your computer that you have forgotten.

Once you’ve built your mood board, take colors from that mood board and create a color palette. If you don’t know how to do that, there are a number of websites that can help you find inspiration for creating a color palette.

Kuler.adobe.com is one of my favorites. It allows you to browse color palettes that other people have created and named. I typed in the words “dinner party” in the search engine of Kuler and up popped up a number of palettes, all named by the people who created them (if you get into creating color palettes, you can also sign up for a free membership and submit your own palettes for others). The one in the example above specifically is called “Brown and Cool Dinner Party” and it seemed pretty pleasing. Kuler not only will expand the palette so you can get a good look at it by filling the entire browser window but it also gives you all the specs of the color palette (including the RGB, Web HEX Code, CMYK breakdown, and even the LAB color code if you are a total geek) as well as allows you to move the sliders around to manipulate the colors. Best of all, because it’s built by Adobe, you can save the palette and use it in your adobe programs like Photoshop and Illustrator. Kuler is a great jumping off point for building a color palette.

Colourlovers.com is another color palette building website and is one of Sabrina’s favorite ones. Similar to kuler.adobe.com it allows you search for different color palettes that others have submitted. There are some fun and unique features on Colourlovers, including a built in pattern builder, where you pick the color palette, and then apply it to a pattern to create a seamless background image for you to use. Nifty if you are a web designer. Colourlover also has a very robust community that talk about color trends, and it’s a great resource to find out what the hottest colors happen to be in fashion or home or craft. Yes, colors have trends, just as food and fashion has trends (in case you were wondering, Honeysuckle pink is the color of 2011). Definitely worth checking out.

Finally colorexplorer.com allows you to actually submit a photo that you have, and it builds a color palette directly from it. You can specify the numbers of colors you want, and it analyses the picture and generates a palette complete with RGB and Web HEX codes. If you sign up for membership (which is free) you can save the palettes you have created. It’s a fast way to build a palette just using images from your mood board.

If you remember from my past post, Sabrina and I decided to build our own website, called ChitChat & Chew. So to be true to our brand, we built our own mood board for it. You can see on the top left, there’s a picture of some slow roasted strawberries that I made, and on the bottom right there’s a picture of some vegan tacos that Sabrina made. In between are some packaging images, some typography and some food that we love. All of them fit our personality and, of course, our brand for ChitChat & Chew.

So, from the mood board, we were able to build a color palette. Paper Bag White, Silver Wine Label Gray, Buttery Chardonnay Yellow, Strawberry Red, Chocolate Cake brown and Cilantro Green. All the colors we picked for our blog laddered up to the mood board we created.

So now we have  the elements to our new blog, Chit Chat & Chew (notice how we’ve added color to both the brand adjectives, and the wordmark). We’re ready to design our new blog!

However, you’ll just have to wait for Part 3 to see how we use those elements and create our new blog. Sabrina will be posting about this final part of this presentation over at The Tomato Tart, discussing how we brought these elements forward and built an initial website look. Then she and I examine websites we liked and admired and rebuild our site to better reflect our brand with those sites as inspiration. She’ll be posting the final part of our presentation over on her site this Friday.

Thanks for reading, and if you have any questions, again don’t hesitate to ask them in the comments below or email me or Sabrina. A special thanks goes out to BlogHer for letting us present at the conference in Atlanta. We had a blast! Thanks BlogHer!