Visuals: Branding and Design 101 for Food Bloggers
Welcome to the BlogHer Food '11 liveblog of the Liveblog: Branding and Design for Food Bloggers panel.
Sabrina Modelle of Tomato Tart @thetomatotart
Irvin Lin of Eat the Love @eatthelove
Irvin Lin: I am a designer and do print branding. I've been doing a lot of smaller more artisan food stuff, as well as my food blog and writing and stuff. I decided to leave the big corporate world and do what I love.
Sabrina Modelle: I focus more on the web than branding in print. I left the corporate world about 5 years ago and worked almost exclusively with non-profit. I have worked with big brands like Pepsi and little tiny mom and pop shops. I work with nonprofits, but I still get to do some fun cobranding with larger companies. Blog the tomato tart has been around for about seven months.
Lin: My blog's been around for a little over a year.
#BHFDesign is the tweet hashtag for the session
Lin: Raise your hand if you have a blog for 5 years, 3 years, 2 years, 1 year, 6 months.
Hopefully our session will be useful for all levels.
Modelle: Who wants to rebrand but is terrified?
Audience Question: Give me a good definition of branding to start.
Lin: Branding is who you are and about presenting yourself to not only the food community, but your readership. Branding is you.
Modelle: It's everything from what you look, sound like, your look, your logo...we'll get into it.
Lin: Who wants to hire a designer? Do it yourself? (30% want to hire and 70% of audience expects to do it themselves)
Does anyone have experience as a designer, photographer, artist? (5 people)
Why branding? One thing you have to ask yourself, why are you blogging? Because you want to have your blog? Is it just for your family and friends or do you want to expand beyond that? Ranked articles? Getting paid for food photography? Cookbook deal? Increasing your profile as a chef? Why am I writing and who am I writing for?
Think of yourself and your blog as a brand in itself. You can hopefully expand and achieve those goals.
Where do you see your blog in a year, 3 years, 5 years, from now?
What is your brand? How do you describe your brand? This is an exercise we do with all the corporations that come to us. Distill your brand into adjectives.
Create a list of words that describe an existing blog. The words we chose to describe 101 cookbooks: Chic, relaxed, Natural, healthy, approachable, real, authentic, friendly genuine.
Modelle: It matches the way her blog looks and matches her personality. She's very relaxed and genuine and chic. Her brand is her.
Lin: When you're doing this exercise for yourself, pick words that resonate with yourself.
Pioneer woman, adjectives describe her blog and herself. Her brand and her blog are pretty much the same thing. Energetic, vivacious, charming.
Modelle: You don't have to write super poetic prose if you're sassy and snarky. Don't think that you have to be funny to write about food if you're shy. Just be who you are and that's your brand.
Lin: If you're sassy and snarky and sarcastic in real life, that's how you should write your blog. You might not have as big of a following, but they'll be loyal and be sassy and snarky themselves.
Your brand: Make a list of 8-10 adjectives and make them descriptive and resonate with you as a person (don't use yummy, awesome, amazing)
Modelle: If you do a google search for those words (yummy, awesome), you're not going to show up. They don't mean anything. Find words that evoke a response and mean something to you.
Lin: Start whittling your words down. As we go forward, we can take out some of those words.
We decided we're going to do a new food blog for this presentation, so we picked words that described us. Sweet, bright, whimsical, bold, quirky, friendly, fun, fresh, smart
We'll be developing a website that we'd write.
Don't be afraid these words are rock solid. You want to stick w/ those words, but they don't define you. As you grow, they may change.
Lin: Steamy kitche, one of her original blogs. She did Modern Asian. she did a cookbook out of her website. After cookbook, tired of doign Asian Food. Went to fast, fresh and simple. Kept her circle logo.
Branding doesn't mean being slick. It doesn't have to be that way. Ex: Smitten Kitchen
Modelle: New blogger. It looks very simple.
Lin: her writing is very downhome. But the minute you hit this website, you know it's smitten kitchen
Creating a logo mark
Logo is an overarching term. Logo mark is the difference between the Swoosh and the word Nike. The logo mark is the symbol itself. Hire a designer.
Sam: Don't go grab an illustration. 500 other ppl can grab that illustration. That means your site is branded the same way as 500 other people. If I see the same illustration, I don't know which one you are.
If you're doing that, you're much better off is creating a word mark.
Lin: Coca-cola is a word mark. It's just type that is stylized.
A wordmark example: david lebovitz; gluten free girl and the chef, matt bites, what katie ate, orangette. It's something you can do on your own.
Finding a font
Question: How do you find a designer?
Modelle: Find blogs that you love and reach out to them and ask who designed their sites.
Lin: WOrd of mouth is really great. Ask your friends if they know designers. There are a number of websites out there that list designers and have portfolios.
Question: Can we get a general idea of cost for hiring a designer?
Lin: With a logo it can really vary. There are a number of places that give $99 logos, but those tend to be really generic. A designer will give you a broad range. Ask what their experience is. I've been designing for 15 years, so I"d probably charge a lot more than somebody who just got of school.
Question: Check out local design schools and students.
Lin: That's actually a really great point. Talk to those designers, because they're often looking for something to put in their portfolio.
Modelle: If you're working with a student, hand them something as a reference point. Like I like these five logos.
Question: What about if it's a picture you have taken?
Lin: If you have a photograph that's custom. But it's difficult to pull that local and pull it across w/ branding.
Modelle: if you're thinking of printing it out, a photo header is fine for a website, but you may need B&W for print.
Question: When working with a designer, what do you recommend asking that designer for? Just like a jpeg, or what kind of treatments?
Lin: I would ask for a vector EPS file. It's resolution independent. Also a jpeg. You can create all these files from photoshop or illustrator. With a sophisticated designer, ask for variants: horizontal, vertical, large or small, tight.
Modelle: I'd ask for a black and white and a 2-color variation
Finding a Font
Lin: don't use papyrus or comic sans, please.
There are a lot of great fonts.
Identifont presents fonts by appearance
You can figure out what the font is.
It's awesome because you can take a photo and upload it to the website
It'll capture those characters and go through the database and figure out the font. It also has an iphone app. It's kind of a cool concept.
Fonts will cost you money.
Lin: Slides will be available online.
Question: Speak a bit about webfonts.
Modelle: OTF or new web libraries? Or web fonts you can use?
Question: Ex: I downloaded and installed a font that's not standard system font. I thought it was OTF. Maybe a Typelibrary.
Sam: I think it's awesome.
Question: You can then match your headers font to your branded font.
Lin: Any designer will tell you it's good to be consistent.
Modelle: Good to do that on your headers. If you have a display font for your brand, you wouldn't want to do that for your (body) text for your blog.
Lin: With myfonts you can type in sample text. It's a really good resource. You can buy them or they will bounce you to the site that sells them.
Finding a free one
Question: Can you talk about wordpress themes?
Lin: We're trying to be platform agnostic.
Lin: Myfonts does have free fonts, but it might be a funky weight (like bold, italic).
Dafont lists things by category; it is one of the biggest.
We created the mockup blog Chitchat & chew food blog wordmark
(Gave several samples of different fonts)
We found a found that is elegant and beautiful, but we're not elegant and beautiful.
Baskerville was a little conservative, which we aren't either.
We ended up with two typefaces. It looks like three because chat is in a thinner weight.
Modelle: We'll talk about this more in the blog post.
Lin: The out of the can version is straight-forward typeface. We see the flaws in this.
Tinkering with the font to round out and even font can be important. This is why you hire a designer. This would be like everyone thinking your cake is beautiful and all you see is that one little crumb out of place.
Thinking of your site holistically.
Make a Mood Board
Modelle: It's like going online shopping for your website
Lin: Understand the themes and concept for the project.
My friend is a YA author and the young girl flipflops between the real world and fantasy world. She creates mood boards for each world. SO when she's writing the scene, she's exactly where she needs to be.
You could do it for a recipe. Create mood boards for yourself in terms of that.
Some of you may make mood boards and don't know it.
Vi.sualize.us or pinterest.com or weheartit.com all create mood boards virtually.
Modelle: When creating a moodbard, go outside of your area of interest. If you don't want to go outside of food, you could do a different food area. Go to anything, whatever you find intriguing.
Lin: You want to find inspirational & aspirational images.
I created magic shell coating that you pour on ice cream. So I could put a photo of the DQ dipped cone, it is inspirational. Or I could put a beautiful wedding cake that I couldn't do, but I can aspire to.
Foodgawker, tastespotting, all of the food porn websites, you can get inspiration
You can use your own photo collection as well.
Even if you aren't a great food photographer, you have this rich archive. They don't have to be the most beautiful photo, but if it inspires you and is something you love, that's something you can use.
Lin: Mood board for chitchat & chew
Vegan tacos, image at design website, packaging we like, wine
Building a color palette from the mood board
It really integrates great with all of adobe's stuff.
Use search terms (I did dinner party). You can submit your own palettes as well. It's a nice jumping off point.
Sam: you can actually upload photographs from your mood board.
Lin: There's actually an option to create a pallette out of it. Colourlovers.com
Colorexplorer.com it's free, but you can register and get more saves and if you pay, you can get unlimited.
FOr our pallette, we pulled from the images themselves.
Modelle: Overall our colors don't really fit our brand. The page lacks focus.
Where's our content?
Lin: Above the fold, there's no content. There's also no social media.
If youre a blogger, you need to be on social media.
Lin: The colors are too dark for our concept.
Static conent is too prominent and high on the page.
I'm a little bit against tag clouds.
Modelle: On my Web site, I have a larger female audience. Tag clouds are skewed toward a male, techy audience and are fading.
Question: How do you feel about content when it's not as wide as the site?
Modelle: I'm not a big fan of that.
Question: I feel like the content should be the widest.
Modelle: When you got to a newspaper, the headline story is the biggest, they don't bury the lead.
Lin: Building from scratch.
What sites inspire you? And why?
Find the commonality between all of them.
Commonality is strong bold typography and lots of negative space. Big juicy photos and navigation is really clear.
Sam: Social media buttons need to be prominent.
Lin: Changed social media, maybe popping too much.
Final mockup, cleaner, simpler, header way more bold. Alot of negative space and fits with other blogs we loved.
How about themes?
themedesigngallery.com (wordpress & tumblr)
Top 10 mistakes
Giant header: people can't get to your content. there are exceptions to the rule. peggy de lo santos, her header is content.
Generic template: don't stick with one without modifying it. Unless you go w/ a very minimalist template and add your own word mark. You can actually search for the words minimalist template.
Busy background: competing w/ the site.
Hard to read typefaces: too swirly, cursive, small
Too many typefaces: you don't want type salad. Stick with 1-2.
Unreadable word on top of images
Type with too little contrast: ALso don't reverse out the type, it hurts people's eyes.
Unusable navigation: No way to get back home.
No About page: Talk about who you are, why you're doing a blog. Your blogger profile does not count
No social media
Bonus: No autoplay music, blinking, falling sprinkles, animation, anythign of the sort
Modelle: just because you can, doesn't mean you should. If anyone wants to put an ad w/ that, tell them no. If it comes up in your ad network, tell them to take it down.
Most Popular on BlogHer
Recent Comments on Conferences