A Showcase of Beautiful Blog Headers

A showcase of beautiful blog headers on DesignYourOwnBlog.com
A Showcase of Beautiful Blog Headers. Part of the June monthly theme on Blog Headers only on DesignYourOwnBlog.com

Styled photo courtesy of A Prettier Web

Is your blog header making you ill?

If so, I’ve got a remedy for you today: an inspirational showcase of blog headers.

Here’s a look at some gorgeous trends I’ve noticed in header design. Be inspired for your own blog’s design!

It’s June and all month long we’ll be talking about blog headers. There’s one new post per week, plus discussions in the Facebook group so be sure to join us there!

Other posts in the Blog Headers theme:
Is Your Blog Header Awkward? Fix it Now!
How to Write a Kickbutt Blog Tagline + a Worksheet

The Centered-Lone-Logo Blog Header

Back in the day almost all logos were left aligned within the blog header, but it’s now become quite popular to center it. In fact, this seems to be the most popular way to design a header these days.

This works well with wider logos, but narrower ones work just as well as you can see in the Sunny with a Chance of Sprinkles example below.

The lone logo looks great with a white or solid colored background or you can also try placing it on a subtle patterned or textured background as well. Which are your favorites?

Here’s why centered logos work so well.
When all you have in your header is a logo, it looks unbalanced to have it left aligned with nothing else to the right of it. Check out these beautiful examples…

The Logo-with-Menu Blog Header

If you really want to left align your logo, that’s totally ok. Just make sure you balance out the right side with something else. Good options are social media buttons, an opt-in form, or your menu bar, like in these examples below. You can either set the menu to the right of your logo or you can center the logo within the menu. If the logo is small enough, I love this look!

The Big Photo Blog Header

There is a right way to do a big photo header and a wrong way. The wrong way is to use a big squarish photo and not crop it’s height (I think this is a thing in some free Blogger templates). The right way is to use a big photo and crop it vertically so that it creates a nice horizontal shaped header that’s not too tall.

With a big photo header, you can create a collage if you want or just use a cool photo that has something to do with your blog’s content. But please! If anything, use a high quality photo that has good lighting and coloring and actually looks good! Also, be sure that the colors in the photo match the colors in your blog’s design. I can’t stress enough how important this is and how often it’s overlooked.

Another way to create a big header is to use a big photo of you. This is great for personal branding. Take a look at some of these fabulous examples…

The Graphic Blog Header

Another way to dress up your header is to use illustrations or graphic patterns to fill it up. There’s a gorgeous trend going on now with these graphic botanical headers and they just make me swoon!

The “Framed” and “Unframed” Blog Headers

Any of the above headers fall into one of two categories: what I like to call framed or unframed. What I mean by that is either the header is bordered by the blog’s border or it has no borders, as if it’s stretching 100% across the screen or blends into the page’s background.

Here, let me show you…
The first three below are framed headers. You can probably get a better idea by clicking through to the blogs themselves and seeing the entire page. See how the header is framed within the borders of the site? If you go this route, please make sure that the header image actually stretches to the inner edges of the border. Remove padding or margins around the header image.

These last three are unframed meaning they blend into the background of the site horizontally. Go back and look at the other headers in this post and see if you can pick out which ones are frame or unframed and see how they work within the context of the design.

What NOT to do with your Header!

We’ll talk more about awkward blog headers next week as we continue the Blog Headers June Theme!

Did you like this post?

Blog-Beautiful-50-tips-make-blog-glow-smIf you’d like to learn more about doing some DIY design work on your blog, you’ll want to check out my new guide, Blog Beautiful: 50 Tips + Fixes to Make Your Blog Glow!

Order it now for instant download and take that blog from ugly to lovely today!

That was the first of 4 installments on Blog Headers! Join the discussions going on in the Facebook group here!

Well that’s it! What trends have you noticed in blog headers lately? Any I’ve missed? What do you think of these? I’d love to know. Say so down below.

Would you share this post with your friends? A thousand kisses for you! Just click one of these cute buttons below 🙂

Hey friend, want free DIY design stuff?

I've got an entire library of FREE goods just for you! Join the 7000+ others and get instant access now!

Powered by ConvertKit
Mariannes signature for DesignYourOwnBlog.com

37 Comments

Leave a Reply

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

CommentLuv badge