Your Site’s Header is like Your Book’s Cover

Just as people judge books by their covers, they judge sites by their header images. It’s the first thing visitors see, and they will have an immediate gut reaction that’s either favorable or unfavorable.

Your header is your chance to promote your style and genre.

With my current header I try to convey fantasy, mystery, and perhaps hope. (Butterflies symbolize hope, faith, and change.)

header1

But what if I add a few red lines?

header1a

A little sinister. Horror?

Font and image both play a role. What if I used this font?

header2

You may think romance.

What if I went with something like these? What genres come to mind?

header3

header4

header5

(I threw these headers together quickly, so no critiquing. grin)

Header Basics:

  • Include an image or logo.
  • Include the site/author name.
  • The width should be equivalent to the width of your content, and neither should make the horizontal scroll bar show up. Consider all screen resolutions.
  • The height can vary but visitors expect to see actual content before needing to scroll down. If you use top bar navigation, consider that as part of the header’s height.
  • Take your site’s background into consideration. To look professional it needs to integrate or merge seamlessly.
  • Always center the header.
  • Don’t overcomplicate the design (it’s the equivalent to purple prose).
  • Templates for blogs and sites are a great starting point, but the header still needs customization to shout out your brand. Choose a template that has a color scheme and design elements that fit your genre, then customize the header.
  • Look for images and clipart that are free for public use (all my example themes use these).
  • Manipulate and create your header in GIMP or Photoshop.
  • Use animation with caution. Not only does it extend your site’s loading time, most people hate it.

Alternative Header Designs:

  • Use your book covers.
  • Use your author photo, but even then make the background fit your genre.

Helpful Article:

Design Challenged? Try …

Tell me what you love to see in headers–and what you hate.

headers by me, sample headers used images from openclipart.org and clipart.com

Share! It will make you happy, trust me.

While you’re here…

Sign up for my newsletter and I'll send you one of my cookie recipes free. Other benefits include being the first to know exciting news, first to receive sneak peeks and sale information. Mailers are sparse.

44 Comments

Add a Comment
  1. I like the third one. The fourth looks science fiction.
    I’m fortunate Jeremy did my header for me and incorporated all three book covers into it.

    1. By the third one, do you mean the red-orange future-is-desolate-post-apocalypse image? I love that image.

  2. I love the header you have now, though I do also really like the effect of the lava or blood. I had to get my blog design professionally done because I’m not very savvy at this stuff. I like what I have, but think this year is also good for some change.

    1. I love your header and site!

  3. I like your new header. But I like the daisy one as well. Though for me personally, I enjoy changing my header often. Just a lot of fun.

    Cheers and boogie boogie.

    1. I haven’t changed my header, but I wanted to add a pic of it in case I do change it in the future. I like the changes you make with your header – very seasonal too.

      1. Whisk, I can’t find your blog in my feed. (I did a little reorganizing, and I don’t remember what category I put it under.) Can you send me your URL?

        1. This is weird. I did my real Email before and added my URL, but the URL link never showed. Don’t know why? Anyway, trying it again. But just in case it doesn’t work I am at TheHappyWhisk.blogspot.com

          I have you listed under Cooks & Bakers on my blog rolls. But I also think of you as a writer. Do you have a preference as to which of those two blog rolls you would rather be listed under?

          1. Correction. I just double checked and I have you on two blog rolls, bakers/cooks and writers.

          2. Nope. Whatever works for you. When I went looking on my own I left out the “the”.:)

  4. Great tips. I agree a header on a blog is a good way of branding your style/genre/story, and that it should coordinate with your writing projects.

    1. I actually made LG’s header 🙂 I do have a service for that and anybody who wants a header can find it at my page under one of the buttons 🙂
      I love the version of your header with the daisies 🙂
      I think that my own header has become so famous that everybody now knows it and even connects its trademark colours with me wherever they see them

      1. You are so right about your header AND the colors being part of your brand! That mossy, sagey green and I know it’s your site!

        Dez, I’m going to add your link to my post. I love the banners your have done.

        1. oooh, thanks so much for the linky dinky 🙂 I haven’t had any order ever since I actually started charging the price LOL

  5. You always write such useful posts. Funny how changing the font helps the header reflect something different.

    1. Thanks! 🙂 Design and art is fascinating and how little change can impact the whole feel.

  6. I love the design of your header. Small changes can make such a difference.

    1. Thanks. One day I’ll post an evolution of my headers. It should prove amusing. 😉

  7. Excellent advice — your header is mighty fine.

  8. Great things to think about!

    I really love the third one down–with your name in red.

  9. I’ve been meaning to create a new header for my blog. It’s been there for about two years now. Time for an update!! I love your header. Works well.

  10. Excellent advice and I love your header. For my website, I used to have a header with Marseilles tarot cards and my name, but now I use just my name and background page images. I do my own web design and plan to update sometime this year. For my blog and Facebook, I do use matching headers and would like to bring in a similar black and white tree image when I redesign my website.

    1. To match up your other sites like Facebook, Twitter, etc. is a good strategy.

  11. I like how a few tweaks on the first three change the mood.

    The last three are all so different. It looks like suspense, romance, and sci-fi.

  12. Great post! Very informative. 🙂

  13. Great tips! Someone else designed my header – now that I have one instead of just a photo 🙂

    1. Your header is wonderful. I like how it combines your genre with the Tiki Hut idea.

  14. I redid my header to merge fantasy with sci-fi. I hope it evokes wonder.

  15. If those headers are just you playing around, you totally need to go into the business! =) I don’t mess with my header. I leave that to my graphic designer, and I like what he produces. *shrugs* Maybe I’m easy to please…or not so much. You should see how many covers I’ve vetoed for this next book. *sigh*

    1. Your header is outstanding! It’s good to be picky.

  16. I love your header! I don’t have much talent for visual design, but I know what I like, and yours looks great.

  17. Awesome tips.

    I like your header a lot. The red butterfly is a nice touch!

    I wish I knew more about making headers and such. I’m still such a beginner. Should probably take a course. ; )

  18. I’ve been dragging my feet on a header for a long time. I think it’s because I keep thinking I’m going to leave Blogger, then that starts behaving and I’m so lazy about having to start a whole new blog. Well, you can see what I mean about dragging my feet.

    Thanks for the links. Appreciate the help.

    1. I understand. It take a lot of patience to transfer all your old posts over to a new system too.

  19. Excellent tips. I’m getting ready to do my website so advice like this is very much appreciated. I like the one you have now best. I thought about moving to WP after my blog was hacked infall of 2012. But not sure what I’ll do.

    1. I’m sorry to hear your blog was hacked! That stinks.

  20. This is a great point. I have no header on my blog right now and I need to get one. My son is a graphic designer and we’ve briefly discussed it. He’s working on my website now, so when that’s done we’ll revisit the topic. Thanks for the great info and reminder!

  21. They are all superb. I love the one you’ve chosen, but I also adore the first and third you selected. I agree that a header is vitally important. It needs to convey a message, and yours does that!

  22. There should be an image? I guess I fail there. I also fail at matching my blog to my books. 🙂 I suppose if people come to my site, epic fantasy won’t be the first thing that comes to their mind.

    All of your headers look great. Each one invokes its own feel.

    1. I like your header. It doesn’t have to be an image, just have the feel and yours does. But I didn’t know your genre. Actually, it took me a bit to find your books too. You might consider changing “stories” to “books” in the navigation bar. I think that’s a trigger word for people – and search engines.

      1. Thanks for the tip! I’ll do it.

Leave a Reply

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

H.R. Sinclair © 2016
Scroll Up