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.

Blog Clarity Mood Board

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!

Choosing blog colors

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:

Behind the Design: Creating My Logo and Header

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.

The Making of a Logo

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.

Behind the Design: Creating My Logo and Header

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:

Moonface Script

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!

Behind the Design: Creating My Logo and Header

This post does contain some affiliate links, but I stand behind everything I recommend. Well, duh.

Comments

  1. Shelly says

    Hey Melissa! Interesting post! Seems so simple broken down into steps like that! Your Blog Design for Dummies opened up a Dropbox page with your secret Pinterest board on it for me. Not sure if that’s what you wanted.

  2. says

    I have a secret mood board on Pinterest. I’m not entirely sure how to use it. Color was easy–especially sense I already had a good idea of what colors I want for my business.

    Translating it into an actual website design is challenging. :-) Better design skills would probably help!

    • Melissa Culbertson says

      It can definitely be tough to translate into design. If you do a search for design, web design or blog design, you might see some interesting things you might want to pin. Then when you pin it, a box will pop up showing a board that has that pin. Sometimes following the “rabbit hole” of Pinterest can lead to some other great finds.

  3. says

    Thank you for the step-by-step how-to. Very helpful. How do you handle the analysis paralysis “phase” ;-) of design? I seem to get stuck there all too often. ps. Thanks for all the helpful info you provide. REALLY appreciate your work!

    • Melissa Culbertson says

      You’re welcome! I get stuck there too… and often. I usually look back at my goals with the design (what am I trying to convey?) and then do some more inspiration-searching. It’s amazing how one single piece of a design or object (like the lady’s scarf I mentioned) can be a source for an idea.

  4. says

    This was super interesting. I wish and am trying to understand all this. I love how you go into detail.
    My blog is very simple because I am not sure how to make it any different. It is basically sharing my craft and inspiring others. I have an Etsy Shop set up and am hoping to post items within the next two months. I do a lot locally for people that I don’t have enough inventory built up. I have a lot of items that can be monogrammed but do not know how to make a collage of the different monograms I would offer. Thank you so much for your help. I have your book and am working my way through it.

  5. says

    I’m loving seeing your behind the scenes posts. :-) I went ahead and re-branded as well. I designed my header using Picmonkey. lol I’m lucky that I found a free theme that can use Google Fonts and that the fonts I wanted to use were available on Picmonkey as well. I’m still tweaking. I’m not too sure I like the pink. I’m thinking about changing it to a darker pink, but I don’t know. lol I need to buy your book!

  6. says

    I have been trying to decide if I need a logo. I have a very distinctive image in my header and I love it. I always get compliments. I have it on my business card, but there are times when I would like a logo that is also strongly branded for my blog. What would you suggest? I think I could brand my blog name with a small graphic, but I’m guessing it should go along with the image. And would it be too much with the tag line too?

  7. says

    Feel the header and blog are very cohesive. I like the triangles and colours used. One thing I would prefer the header background to be white instead of gray. Just my opinion. Great job with revamping your blog.

  8. Sarah says

    If you have a Creative Cloud subscription, you get Typekit’s Portfolio plan for free. They have the full Museo family on there which you can sync to your desktop. Annoyingly, I’ve been paying for nearly a year and only found this out last week. -_-

    • Melissa Culbertson says

      Oh you have no idea how happy that makes me! Made my day! I had SEEN that mentioned but for some reason just didn’t make the connection. THANK YOU so much for letting me know (but sorry you’ve been paying for it up until now). :)

  9. says

    I am so excited that I won a copy of your Blog Design for Dummies book from Clever Compass and it arrived today! I would start reading it now but I was up from 2:30 am – 5 am this morning working on getting the fonts right so I am exhausted. I can’t wait to dive in.

    Do you have any experience with the Prose child theme for Genesis? I hear it is highly customizable which is good because I like to tweak/change things up every so often.

  10. says

    This is perfect timing! I am coming back from a recent hiatus and am taking my blog in a slightly different direction and am really just wanting to change my colors and need an actual logo that fits my new direction. I love this step by step process that definitely makes it seem doable. Now I just need to do the work. I’m going to have to check out your book, not sure how I missed it!

  11. says

    This is an awesome, awesome post! I have my Blog Design for Dummies book on the table right now since I am in the middle of a redesign. Love having these posts where you work through them to go along with it!!

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge