Behind the Design: Creating My Logo and Header
Itching to design a new logo or header for your blog?
Well, it’s always helpful to see how others work through the design process.
When I switched from the name Momcomm to Blog Clarity, I said I wanted to bring you into the design process, so that’s what I’m gonna do. Once I had my new blog name figured out, the designy goodness started!
Here’s a look at how I went from a blog name to a finished blog header.
Collecting Inspiration with a Mood Board
At the beginning of the design process, it helps to spend some time gathering pieces of design inspiration: fonts, colors, patterns, images, design elements, and so on.
In Blog Design for Dummies, I describe more about mood boards and a few places to find inspiration. I used a secret board on Pinterest for my mood board. One thing I love about creating a Mood Board this way is that I don’t have to worry about pinning something that’s not properly sourced since it’s not public. Because you never want to pin that kinda stuff, no matter how pretty.
As you can see from my mood board, I dig triangles, script fonts and multi-colored images. Yep, that’s pretty obvious.
Choosing Blog Colors
I knew that I wanted to completely overhaul my colors. When I picked Momcomm colors, I knew I wanted pink and blue. At Trader Joe’s one day, I saw a lady with this gorgeous scarf and I KNEW those were the colors I wanted. So I went home, matched them up to the best of my memory, and those were my colors.
Lately though, I’ve been itching for new colors because, even though I liked my Momcomm colors for the most part, they weren’t ME. I don’t love the color red and pale pink isn’t my thing. Plus, those two together was quite Valentine-y, am I right?
I’ve always loved jewel tones. I have this emerald-colored shirt that I adore and for the longest time, I’ve thought – “hey- I really want to use this color somehow.” And so I did. But as I started designing my logo, I realized the green didn’t look great in the logo (more about that below).
Just like Momcomm, I still wanted to keep a pink and blue, but wanted richer colors. The dark blue is inspired by the Pantone color Myconos Blue but I went a bit darker. A rich, deep pink adds some bold femininity. Once I got my “jewel” tones, they looked too dark by themselves. So I added a lighter blue for some brightness and the grey for a neutral. Ta-da!
Selecting Blog Fonts
As I was working on colors, I simultaneously worked on selecting fonts. Have you ever spent hours upon hours working on something, to the point that you say to yourself, “pick something already!”? Yeah, that was me trying to find a script font.
Why was I so gung-ho on a script font? Two reasons (and one might seem silly). First, I thought a good script font would add a little feminine touch, since female bloggers are my target audience. Two (my silly reason), I really like writing “ity” in cursive and thought the right font would have a “y” with a nice swash as the end. I definitely wanted “Clarity” to be scripty to stand out more, but I knew the obvious: the word CLARITY would have to be easy to read. Otherwise, wouldn’t it be ironic to have the word “Clarity” in a script font that was hard to read?
Here are the three fonts I chose:
In my mood board screenshot, you saw some other script fonts I tried. I’m about the pickiest person on the planet. I tested font after font. In fact, I almost settled for another font until I found Moonface Script. It’s a relatively new font and inexpensive too (just $10). It had just the right amount of “swashiness” without being hard to read. However, as with any script font, it can’t be overused so you won’t see it as a blog post title or anything with more than a few words.
For the word “Blog,” I chose Museo Sans 500 (free) but went with ALL CAPS and a faux bold in Photoshop. The Museo font family is quite popular, but for good reason. It’s easy to read and very clean. I really loved Brandon Grotesque but have a hard time spending $40 for each variation ($240 if you bought ALL of them, which I didn’t need). I plan to use Museo Sans 500 for my navigation menu, body text, and in a few other places as well.
Knowing that I couldn’t use a script font for my blog post titles, I knew I wanted a different font for the titles than the body that. That’s where Museo Slab 500 (free) comes in. Again, you probably see this font everywhere under the sun, but it’s a gorgeous, easy-to-read serif font. I make no apologies for using it. 🙂 While I’m currently using the free version, I might pony up for Museo Slab 700 for a thicker weight font.
Designing My Logo
I completed my design in two parts: the logo and the header. As you could see from my mood board, I LOVE triangles. From a design point, I know that triangles can be very hard to work with because of their shape. I used to work for a company who had a triangle as part of their logo and remember being so frustrated when laying out some designs. So… that’s why there’s no triangle as part of my actual logo.
After I decided which fonts to use for the logo, I had to make the design actually work. Using Illustrator, I played around with the sizes of each word. I finally settled on their sizes, making sure Clarity held more prominence than Blog. But the design still looked empty.
At first, I had decided against using a diamond because it seemed so obvious, but the more I sat on the idea, the more I liked it. Why? Well, one great thing about Momcomm’s design was that I had the smiley face as a symbol to use: for my favicon, in my email header, for my Facebook page profile. So I decided to give a diamond a try from this handwritten shapes set. I added the lines around the diamond, pasting them from another diamond in this set. Bingo!
As for the colors to use, originally I wanted green to be in the logo, but in using green I would need to have three completely different colors in the font, which just looked too busy. Instead I chose two shades of one color (the blues) and a pink.
With all the design elements figured out, it was time to put them all together. Here are a few attempts at the design, why they didn’t work, and why the final design floats my designy boat.
Done! Now for the header.
Designing My Header
Are you still with me? While I didn’t want a triangle in my logo, it’s obvious from my mood board that I wanted triangles somewhere! So, with my blog header I wanted to bring in the triangles and use the green and grey.
When designing a header for your own blog, look at it critically and remember this is the first design element someone sees when they land on your blog. So as I worked through the design, I continually asked myself: “if this was the first thing someone noticed when they landed on my blog, would it give off the vibe I want it to”?
I wanted the logo to be on the left side since we read left to right. But it looked too heavy on the right with just a logo on the left. So I knew I needed to add a design element on the left too. Using Photoshop, I created triangles and laid them out in a pattern.
After I laid out the triangles, it looked too triangle-heavy so I deleted a few so the grey background peeked out. I tucked my tagline underneath the word Clarity and took a step back to evaluate.
While I had used a grey background, the header still needed one final touch. So I purchased some grunge brushes and started playing around with textures to use on the background. The bonus of using a texture? Although subtle, a texture adds some depth to the design, making it a nice contrast to the word “clarity.” I ended up using a linen brush from the grunge set. When a brush is used at a large size, it acts more like a stamp. So I selected white and stamped the brush across the header a few times. Aaaaand done.
Design Elements Recap
And that’s a peek into the blog design process so far! If you’re interested in seeing (or buying) any of the elements I used for my design, here’s a recap of the links:
Tools and Elements Used:
Adobe Creative Cloud (specifically Photoshop and Illustrator)
890 Handwritten Shapes (I am using the diamonds from this set)
50 Subtle Grunge Brushes (These brushes are for Photoshop- I used the Linen)
Fonts:
Museo Sans 500 (Free)
Museo Slab 500 (Free)
If you want to learn more about mood boards, how to pick fonts and colors, and how to design a blog header, grab a copy of my book, Blog Design for Dummies!
QUESTION! Anything surprise you about the design process?
Like this post? Pin this!
This post does contain some affiliate links, but I stand behind everything I recommend. Well, duh.
