Simple is best when it comes to design.
That's something I say in Blog Design for Dummies. It's something I say when it comes to writing . (Why say “utilize” when “use” works just fine?)
But sometimes we equate complexity with value. Complex sentences mean we're more intelligent. Complex designs means we're more talented.
That's not always the case. And in many cases, complexity just makes things, well, more complex.
Sooooo, if you look at the top of my blog, you'll see I took my own advice and simplified my header!
Truth is I've been wanting to do this for a LONG time! But I just couldn't come up with a better alternative.
So I just sat on it until it came to me.
Well, I didn't exactly SIT on it. I've been tinkering off and on, but I was never happy with any of my designs (and some of them took HOURS I'll never ever get back *sniff*).
When I launched Blog Clarity, I wanted bold jeweled colors and triangles. That's all I knew. So I created a secret board on Pinterest and started pinning cool designs for inspiration.
However, this weekend a design idea – THE design idea – clicked with one single pin.
In case you're curious, I only blurred this because it was about someone's hot yoga class. Totally unrelated!
Layers WITH transparency. BOOM.
In all the iterations I made of my blog header, I had tried layers. I had tried transparency. But together? That was apparently the key. So I started redesigning.
What I Didn't Like about the Current Header
- The gray background: At first, I didn't want another white background like Momcomm, so I had convinced myself that I needed gray. But it muddied the bright colors too much.
- Harlequin triangles: While I spent waaay too long making that triangle pattern, I always thought it was a little harlequin. And harlequins are too close to clowns. And I hate clowns. Enough said.
- Header was too tall: A tall header pushes all my content down so I wanted something skinnier.
What I Love about My New Header
- White!: Aaaaah, it's like a breath of fresh air. Feels immediately cleaner.
- It's not a full-width header: I wanted my social media icons within the header area to free up the sidebar. Luckily, the Metro theme for Genesis already has a widgetized header so it was relatively easy to add. I also wanted a way to introduce the fact that I offer e-courses. So I created a graphic with another tagline of sorts and included some triangles to reinforce the header design.
- Fewer triangles: This is my favorite. With fewer triangles, it's more impactful and clean. The overlapping triangle with the transparency also adds some depth.
- Menu: If you remember, my old menus were black, really just because I wasn't sure what to do with them with such a heavy header design. With a more open design, it was easy to add colors to the menu without it being garish.
- Different social media colors: My previous icons were pink which looked pretty in my sidebar, but were overkill in my header. So I changed them to a light blue.
Did I bore you with all the designy talk?
All that to say, my original header was pretty, but wasn't simple enough for me. So almost six months later, I finally designed something that works. *drops mic* *takes a nap*
Get Productive with Day Batching!
Subscribe and receive this tool to help you get the most out of your week!
Hey- I'm Melissa! I'm a mom, side hustler, online course instructor, and brand marketer. I run a 6-figure blog helping online biz owners find their a-ha moments with can-do tips, tutorials, and online courses. I also work at Burt's Bees as the assistant manager of Brand Engagement (yep, it's as cool as it sounds). Jump start your biz productivity with my free worksheet!
Looks great, Melissa!
Thanks!
It’s always hardest designing for yourself!!! I love the layered triangles and simplicity of your new design. I remember when I first learned to do that in Illustrator, I made a TON of layered overlapping images..lots of fun.
It REALLY is! Yes layering is fun!
I like it a lot! Well done! Now as a reader, I know where to look. I like its clean simplicity.
Thanks Cadry!
Thank you for the great advice! Your new header is lovely. My header is also way too tall. It was the first one I ever made using picmonkey.com. I will definitely be re-doing it soon.
Good luck with the redesign! Pinterest has been SUPER helpful in finding inspiration.
I like the new header! I’ve always been a fan of a clean white background.
I need this. I have NO header on my new design because I can’t figure out what I want! Good thoughts and great info as usual!
Thanks Sili! It’s always hardest to design for ourselves!
I’ve been thinking about a header redo, but it took me so long to come up with the first one that I hesitate to climb on board the crazy train. I wanted color but the more I look at the page, the more I think it’s too much. Less is more, as you so beautifully demonstrated with your new header.
Off to start playing with some ideas! 🙂
I just re-did my own blog, but had my branding designed by someone who has far more skillz. My old header was very dated in look and it was HUGE. Same issue as you with pushing all of my content down. I’m very happy with the update – feels good to have a refresh! Now…if I could get my blogging mojo back…. {ahem}.
Like it much better. Love gray for somethings but white is as you say”cleaner” Thanks for the inspiration.
Thanks- I totally agree!
I like the new header much better – great job!
Thanks Paige– me too!
Love it! And your explanation is fantastic.
Thanks Corinne!
I am interested in redoing my blog header, but don’t know where to start! What program should I use? Are there any tricks to creating a responsive header? I’d love to hear your thoughts. Thanks!
Hi Margaret! Responsiveness has more to do with your theme than the header design, though design is moving towards a header that doesn’t span the entire width and often times just a logo. As far as programs, I use Photoshop but there’s a big learning curve so I’d stick with Picmonkey or something similar! Also, my book Blog Design for Dummies (you can find it on amazon) goes through some design principles and color/font selection if you need that too. Hope that helps!
I’m in the same boat as Margaret. If you ever offer online tutorials on Blog Design Melissa, let me know!
I liked your old header but I LOVE the new one! Thanks for explaining your thought process…. I’m inspired!!
Awesome!
I am so glad you finally did this! I have to admit when I saw your (original) header re-design I was a little bit surprised. This will be much more mobile friendly, and it is much cleaner! Sweet!
Agreed! The design looked awesome in Photoshop but I wasn’t 100% confident when I launched with it. But sometimes it takes a while to develop ideas so I knew it’d come to me eventually. Ha.
it’s really sipmplier and much more cute! The post wasn’t boring at all.
Thanks, Despina! Glad to know it wasn’t boring!
LOVE your new header. Of course, I really like the previous one but fully understand your reasons for change. Isn’t it funny how we can be perceived and expert in a field and yet we struggle with implementation? And the “perceived” part of that statement applies to me. You, my friend, ARE an expert.
Speaking of, you have prompted me to make the leap to a new blog name. I’ve struggled with the current one for far too long. I went with it against my better judgement. At the time, I had held off the design of my new site so long waiting for THE right name to come to mind. I finally went with a well meaning friends suggestion. All was well until i tried to share the name of my blog at a blog conference and tripped all over my own tongue. Since that day (over a year ago now) I offer a disclaimer each and every time I share my blog with a new friend. And yes…I chose the name before reading your tips on the subject. 🙂
I loooove your new header! I totally get it. I’ve got mine up and it’s just too much, but I have no idea the direction I want to take it. I’m sitting on it as well until I can figure out what I really want. I think I need to head back over to Pinterest. I love your layered transparent triangles. I love how you tied them into your tagline as well. Hope your nap is satisfying! 😉
Love the simplicity reminder! Great job on the header redesign 🙂 I love how you took that pin & made it your own.
I love the new header and you didn’t bore me with the design talk. It intrigues me bc I just can’t seem to grasp it myself.
Great work!
I love it!
It looks awesome!! I really really love it. 🙂 I actually just finally changed my own header last week as well. It was too busy and looked like I tried to stick way too many design elements into one image. It’s tough working on your own site, though! I finally got an idea a few weeks ago and just ran with it. Not totally in love but I’m going to let it sit for a while before I completely decide one way or another. I LOVE the overlapping triangles you used!!
What a nice redesign!!! However it doesn’t scale properly on my iPhone 🙁
I LOVE this! I just came across your blog, so I didn’t know about the old header, but I love this new look and think it fits your purpose very well. The color scheme is great and the content of your header is stellar! Gives your readers what they need! This is inspiring me for my own header!
Looks great, good job on taking your own advice!
Love your header! I just found your blog through Pinterest. I write a Blog Tip Friday column every week on my blog, Slim Sanity, and I’ll be linking up a couple from you this week. Love your site!
I have this same theme and for the life of me can’t seem to get my banner up. I created one the right size but once I post it, all I get is a solid block. So I’ve been stuck using the default one. Also the same goes for the nav menu color. Mine is black and can’t seem to change that either and my search bar in the nav disappeared.