This site provides writing advice. If you're writing a superhero novel or comic book, please also read our superhero writing articles.

Would you like to subscribe to our RSS feed?

This post offers techniques on using header art to market your website, particularly if you’re an author.

Table of Contents

• Starter Guide to Header Art

• Using Header Art

• General Tips and Guidelines

• Superhero Nation’s Header Art: A Case Study

Basic Questions

“What is header art? How do I put it in?”’

In Wordpress, you can use the Paalam theme or any other theme with a custom header. Palaam gives you 900 pixels across and 180 pixels vertically to work with. That’s enough space to introduce your products or books. Our Palaam header can fit 4-5 characters, a brief synopsis and the book’s title fairly comfortably.

“Why should I have header art?”

Header art is your website’s equivalent of a book’s cover. Your header is an enormous opportunity to establish your site’s professionalism and tone/substance. Ultimately, good header art will encourage readers to stick around, browse through your site and (hopefully) make a purchase.

Furthermore, making (or buying) an effective header is fairly easy.  You can buy a quality header for $50-150, which compares favorably to other investments you might make in your writing endeavors. For example, business cards or low-cost advertising will cost at least $50, a book doctor or agent will cost at least hundreds or thousands of dollars, and a year of paid membership in a writing workshop will probably cost at least $75.

Using Header Art

Once you have a space for header art on your site, filling it effectively is your next step. I’ll introduce these methods now and eventually offer more techniques on using them most effectively.

1. Borrow or buy a digital camera and use a photograph as your header.
2. Hire a freelance artist. I highly recommend Rebecca Gunter, the artist that illustrated Superhero Nation’s characters. I am greatly pleased with her quality and style. She charged $25 for each of our four characters. If price is really an issue, you can probably find cheaper freelancers at DeviantArt, but you may be disappointed or defrauded.
3. Create digital art and use it as a header. I don’t recommend this unless you are actually talented; if your header looks unprofessional, it will probably discourage readers.
4. If you’re not artistic, you can probably use Photoshop to make a workable logo by typing your site’s name in a visually striking color on a light background. If you don’t own Photoshop, you can probably find it at a public or school library near you.

Your header absolutely must…

1. Convince most viewers within 1-2 seconds that your site is worth their time.
2. Look attractive.

If you’re using your header to sell a novel, it is virtually required that you…

1. Give us the novel’s title.
2. Give us a 1-2 sentence synopsis of the book. Why should we want to read it? What’s it about? What kind of book is it?
3. Suggest the book’s genre, tone and mood.

That is a very basic set of requirements. Your header might also suggest what your writing style is like, introduce your characters, suggest any relevant themes, or indicate the setting. But these are generally less important.

Text (Book’s Title/Synopsis)

The title and synopsis probably should not be the header’s focal point or on the left side of the header. The header has to make a visual impact immediately. But text usually isn’t visually gripping. Because of that, text should usually occupy the least valuable space in the header, the right side. (Most Westerners read from left to right, so the left and middle of the header are used best by powerful imagery rather than bland-looking text). A final visual consideration is that text should usually not be placed over other elements of the header. That will probably look cluttered and make readers feel claustrophobic.

Don’t use more than 20-25 words. You won’t have enough space (or time) to describe your plot at any length, but you can convince a reader to look at a “Site Explanation” or “Book Synopsis” page to learn more. Be straight-forward, clear and concise. You have a few seconds to make a sales pitch. Ambiguity won’t work.

Genre/Mood/Tone:

Obviously, the header for a science fiction-horror story should look very different than one for a romantic comedy. What sort of mood do you want your header to convey? Is your story cheerful, gritty, dark, tragic, whimsical, scary, comical, etc? How realistic do you want your book to seem? You can suggest any of these traits with lighting and color. Additionally, readers will also pick up on your choice of font. (Consequently, Times Roman is almost always a poor choice for header text).

Characters

You may want to illustrate key characters if your characters look intriguing or suggest a lot about your plot’s genre, mood or plot. I think that a ninja-masked superhero and a reptile in a government uniform strongly suggest that Superhero Nation is an eccentric superhero story.

But most novel headers probably shouldn’t use character illustrations. If showing your protagonists doesn’t foreshadow the story or help the reader visualize something unfamiliar (like a reptile in a trenchcoat), I’d probably leave them out. If you’re writing an epic fantasy, showing another 17-year-old raising a sword will probably disgust your readers. (As a general rule of thumb, swords (and wands, to some extent) are extremely cliché and should be shunned.) Don’t illustrate banal-looking characters. On the other hand, if your character is a middle-aged woman with a peg leg, that would probably intrigue readers.

Relevant Themes?

You may find it useful to allude to different ideas and concepts from your book. However, this isn’t important and readers might miss the allusion, anyway.

If you look at “SUPERHERO NATION” in my header, it gradually shifts from blue on the left to red on the right. That alludes to the theme of political conflict in Superhero Nation. (In US politics, liberals/leftists are “Blue Staters” and conservatives/rightists are “Red Staters”). Additionally, I’ve positioned the characters with the most liberal on the left and the most conservative on the right.

Setting?

You might want to use a real-world landmark or cityscape in your header, but I don’t recommend it. If your header features Chicago’s skyline, it will probably make non-Chicagoans feel like outsiders. Unless a real-world setting is absolutely vital to your story, I’d avoid that.

On the other hand, if you’re writing a fantasy with a juicy setting, that could be really appealing. Illustrating that would probably be pretty complicated for your artist (and more expensive for you), but you could probably work something out.

General Tips and Guidelines

1. Don’t clutter. Leave as much empty space as possible.
2. Make your text easy to read. Adding an outer glow or border to your text in Photoshop really helps. (Our white text has a tiny black border).
3. Using too many colors may be problematic, unless you’re trying to strike a cartoony mood.
4. Aim for consistency in style and brightness. If one character looks photorealistic, your others probably shouldn’t look like cartoons. Try to balance your text. Text rows that are approximately equal in length look much better.
5. If you are working with an artist, give as much detail as possible. If you’re not sure which details to provide, check out Rebecca’s questionnaire. Ask to see a pencil or ink outline before your artist begins coloring. It will be much easier to resolve any issues you have before coloring begins. Also, don’t forget to tip.

   Superhero Nation’s Header Art: A Case Study

   Over the past four months, we’ve had four headers. I’m going to analyze how our audience has responded to each of these headers (using Google Analytics data). However, this is not a controlled experiment. We made many changes to the site over that time. Even so, I think that it’s fair to attribute most of our audience reaction to the header art specifically because it’s so much more visible than any of the other changes we have made.

   These are the four headers we’ve had (shrunken by about 25% to fit in the browser).

   

   Header 1: December 9 to January 14.

   • 77% bounce rate (the proportion of readers that leave after seeing a single page)

   • 1.71 pages per visit

   • 108 seconds per visit

   Header 2: January 15 to February 17

   • 69% bounce rate

   • 1.86 pages per visit

   • 105 seconds per visit

   Header 3: February 18-March 21

   • 64% bounce rate

   • 2.00 pages per visit

   • 110 seconds per visit

   Header 4: March 22-28 (only a week… so take this with a grain of salt)

   • 63% bounce rate

   • 2.35 pages per visit

   • 144 seconds per visit

   I’m not surprised that the bounce-rate has changed the most. It’s definitely intuitive that someone who doesn’t like your header art is more likely to leave immediately than someone who is impressed by it. On this front, header-art has clearly had at least some impact. But I’d like to delve into this data a bit more to try to control for the other changes we have made.

   For example, if I look at only the week prior to the January 15 switch, it had an 82% bounce rate, 1.6 pages/visit and 90 seconds per visit. In the week immediately after the switch, we had a 65% bounce rate, 1.77 pages/visit and 102 seconds per visit. This strongly suggests that the second header was drastically more successful than the first.

   I’m not surprised that the second header performed better; the text is better balanced, it’s slightly brighter and more colorful, the logo looks cleaner, and the synopsis is slightly crisper.

   Looking at the week before the February 18 switch, we had 67% bounce rate, 2.06 pages and 121 seconds per visit. In the week afterwards, we had 64% bounce rate, 2.06 pages and 119 seconds per visit. This slight change doesn’t surprise me too much. The differences between the second and third header are fairly slight– I only changed the synopsis and the placement of the logo.

   Looking at the week before the March 21 switch, we had a 61% bounce rate, 2.15 pages and 111 seconds per visit. In the week after the switch, we’ve had a 63% bounce rate, 2.34 pages and 143 seconds per visit.

   I’m a bit surprised that our fourth header has been bouncing (slightly) more readers. I had expected that its decidedly more cheerful tone would bounce fewer people. Ah well. I think a 2% rise in bounce-rate is an acceptable loss for 30% growth in time/visit and 10% growth in pages/visit.

   END ARTICLE.

   (If you would like a more exhaustive survey of the changes to our headers, without any statistical analysis, you can keep reading).

   

   

   

   At the very beginning, I didn’t have text, not even a title. That was obviously a huge mistake and I attempted to correct it by superimposing writing at the top of the page, over the headshots. That didn’t work very well, either. I learned that it’s really important to keep the elements separate.

   Another problem with the second version was that putting SUPERHERO NATION on the right side didn’t feel right.

   I realized that there was no way I could fit in five characters and text. I started by eliminating Catastrophe because I was afraid that people would misconstrue a parody of a Pokemon (Hegemon—gotta kill ‘em all!) for a ripoff of Pokemon or—worse—Pokemon fan fiction.

   So, in the third version, Catastrophe is gone and the text has actually been added over Mallow’s face. I’m not sure what my reasoning was, but it looked pretty bad. Additionally, I added some hand-scrawled notes there and that didn’t work out too well, either. It wasn’t stylistically consistent.

   3 suffered from serious alignment problems. It was “centered” on Mallow’s head, but Mallow’s head wasn’t near the center of the header.

   By the fourth variation, I removed Oliver, fixing most of the space issues. You can also see that I shrank down Mallow’s head a bit and centered him better. His left eye is the center of the header. (Well, it’s his right eye…) I also darkened Orange’s scales a little bit. (Did you notice that his eyes started out light blue and gradually became more orange?)

   The main change to the fifth variation was that the 4^th variation had this text block: “a grim comedy where anybody can be somebody and that’s the problem. Starring three hundred million (more or less) innocent bystanders and some science hopefully not coming soon to a review journal near you.” That was too wordy.
   

   I cut that down to “a grim comedy dedicated to everybody’s favorite superpower and the proposition that, for better or worse, anybody can be somebody.”

   The sixth version is very similar to 5. The SUPERHERO NATION is more two-dimensional—I thought that was easier to read. I also moved Mallow a bit more to the left.

Comments RSS