I have seen many a website giving tips on how to create a winning banner ad campaign and/or how to properly design a banner ad in a way that will increase CTR (click-through rates). However, there are almost none that has placed a magnifying glass over regular website banners. I’m talking about the image at the head of most conventional websites that let immediately lets you know what the website is about. For the purposes of this conversation, I’ll be using the term “banner” to refer to the branding area for those particular sites. I do acknowledge unconventional websites that utilize various interface elements that come together to make one cohesive impression, and perhaps they will be the subject of a future entry.
What some might choose to ignore is that the web is not only a melting pot for competition, but also a massive conglomeration of varied interests stemming from thousands of users who want instant gratification. We, as users in this age of seemingly endless information, are extremely fickle in the attention we give hundreds of sites that we encounter every week, and only a few are going to draw us back. With the banner typically being the first thing a user sees when they enter a website, it is essentially the first, and quite possibly the last, thing that will help a user determine whether that site, from a purely objective point of view, is legit or a joke. Of course, exceptions do exist (e.g. blogs), but that does not defer the fact that a well-designed banner has a higher chance of garnering curiosity for more than five seconds if the banner’s message coincides even a little with the need of the user.
For anyone who is looking to keep users from writing-off their site from the get-go (which should be everyone who cares about their site), I have five simple necessities for those who really want to make an initial welcoming impression on the eyes of hungry, site-hopping users.
1) Use high quality images = Blurry, frayed, or pixely images have a tendency to set off an alarm in the minds of most experienced users and immediately gives off a negative image towards the entire site. Also, images that may have residual elements, such as text, that do not coincide with the desired image is another no-no. Make sure that whatever you use for your banner does not need to be stretched or enlarged beyond its original resolution. In addition, never reduce then increase the width and height of an image, as that will ruin the quality of your image. If your banner is crisp, then your message will be clear as well.
2) Establish a concise mood/expectation to your audience = If your website is meant to be for fans of Nirvana who want to find others like them, you want to at least have some element that is indicative of that band. Whether it’s a CD cover or a picture of the lead singer, you want to make it clear that the site is for those fans. If you’re a blogger who likes anime and enjoys writing, perhaps having a themed banner of your favorite character and an original quote from one of your stories would convey that better than simply the name of your blog on top of a color gradient. Whatever you do, make it as solid as possible because chances are, there are plenty others who like what you like, but users may have either preferred another banner’s ambiance, or have had their expectations fulfilled that made them want to browse the site content further, which is what you want.
3) Harmonize colors = Want to turn people off from your site real quick? Make their eyes hurt with either clashing colors or too much variance in color. They will leave, guaranteed. If you aren’t so good with imagery and want to use text, make sure that the text can be easily discerned through the color choices. There is a reason why word processors use black text on white backgrounds; they contrast each other the best. This actually took me a long time to get the hang of, but if you’re not sure if colors are working well together, just make sure that the color sitting on top is either lighter or darker than the color beneath, depending on the aesthetic of your site (e.g. light colors = relaxing, happy / dark colors = edgy, depressing). This applies to not only text, but to imagery as well. To sum this up:
“The blending of colors should be attractive, informative, comfortable for the eye and help to convince the viewer to stay on your site.” – Entheos
4) Whet their appetite for your content = #1 was geared mainly towards clarity of imagery, #2 honed in on hooking in a user’s interests, and #3 focused on working on aesthetics. This necessity is targeted more towards the use of text in your banner. Type-setting can make or break a banner, so take notice of not only where you are positioning your text around your imagery, but if the text is a compliment to the message that your banner aims to convey. The choosing of which font type you have on your banner is also essential to making #2 work for you. There really is no “best method” to go about doing this, but keep in mind that there is a difference between throwing text onto a banner just to fill space, and planning to ensure that your text is going to add a growing intrigue to the rest of your website.
5) Take a step back = Most things learned in life come with practice, and many things unseen come with patience. Make time to come back to it after a time and see if your banner’s message is still executed as sharply as you thought it was when you believed you were finished with it. As you continue to refine your technique and tighten #1-4, your ability to catch your own shortcomings or form new, stronger ideas will only lend itself to a more compelling and confident creation.
Doing any one of these can ultimately affect the others, as they are all intertwined in order to make a banner as effective and compelling to the rest of the site as possible. At the very least, random users that happen upon your site may be more convinced to take a tour inside your domain rather than simply turning away before they can even get a foot in the door.
