Home Blog Tips on creating excellent website banner design

Tips on creating excellent website banner design

Blog, March 21, 2015

Creating visual impact is impossible without website banner. You need this type of visuals, if you want to make your web presence more interactive and interesting. Banner design improves the experience and encourage the viewer to hit on the link. But, creating a nice website banner can be time-consuming and difficult. There are so many great and not-so-great websites banners from which you have to stand out. It shoud be easily remembered and done in the style similar to branding. The colors and branding names should be consistent. You should also distinguish between website banner and promotion banner. Promotion banner refers to banners that can be used on any types of advertising spaces: websites, magazines, newspapers and billboards, while website banner refers only to a banner on a website.

Step #1. Determine the size of the website banner.

sizes banner

Considering ads clickability Google lists the best options:

  • 336?280 Large Rectangle
  • 300?250 Medium Rectangle
  • 728?90 Leaderboard
  • 160?600 Wide Skyscraper

Step #2. Determine the message of the website banner.

The basic purpose of banners is helping to grow brand awareness and attract visitors to your website. You should take into account 3 crucial elements:

  • The business logo: In most scenarios the website banner should contain the logo of your company to be brand consistent. Your goal is to place it so that it was visible and clear for the visitors. However, keep in mind, the value proposition and the call to action are more important than anything else. Without clear information and message, a user will see only an image and nothing else.
  • The value message: The value proposition message refers to the service/product your company provides and lists their attractive attributes i.e. ‘Classy,’ ‘90% sale,’ ‘Exclusive,’ or ‘Premium!’ You should leave the most space on website banner for it. Proposition should be the primary thing that a user sees.
  • The call to action: The call to action refers to techniques that provoke some response or reaction from users. It is a crucial element that prompts a website visitor to interact with the website. It can be presented in the form of text or a button with text like ‘Pay for it,’ ‘Read more,’ ‘Use Now,’ or ‘Sign-up’ It should be a noticabe component that encourages users to click on it.

Step #3. Developing beautiful design of the website banner

Make it simple and clear. People usually look at website banners very quickly. It takes a few moments to realise whether they want to learn more about it or not. It is very difficult to predict what design they may like or not. Choosing the right fonts is important here.

Webfonts from scuh famous services as Google, Font Deck, Typekit, and Fonts.com have enough experience in providing styles for a website banner that can ensure good level of crawlability. They build the basic structure and support of any well-designed, well-optimised site.

Look at the image below, although it looks nice, but there is too much information to add to an Alt-tag. There is a problem of determining the core of the message and adding it to an alt-tag in the form of a plain text.

design banner

With the help of a mix of webfonts, HTML, and CSS, you can save the design and provide excellent SEO by making all of the text components in this banner as “live text.”

It looks really good. And since it was SEO optimised, it has indications of H1’s, body type, bold text, and can be updated automatically. Search engines will regard this as simple HTML. If you want something like this or even better, read more.