Sign up with your email address to be the first to know about new products, VIP offers, blog features & more.

Title Banner Designs That Work

Engage Website Visitors With Eye-Catching Title Banner Designs.

So you’ve gotten your website’s domain name and hosting costs under control, but you still want to have a large swath of visitors to your website and keep them engaged.

One of the most common features found on websites is a title banner at the top of each page. This can be an image that spans the full width of the page, or a key graphic that occupies a prominent position on the page. Why are these title banners so important to a website? Title banners determine the effectiveness if website design in a number of ways.

  • They set the design theme or ethos for the website. For example, will the website be perceived as happy, dark, funny or serious?
  • They unify the website design and appearance across all pages. Although the content on web pages can change quite markedly, the banner at the top of each page reassures the visitor that they are still on the same website.
  • Subtle variations in title banner design can guide visitors in navigating the website, in the same way that different colour zones guide visitors in a shopping mall.

With these points in mind, there are a number of design options that must be considered when creating a website title banner. If you’re anything like me, you like to have headphones on to minimize distractions and improve focus while you are working. Here are some reviews of noise-cancelling ones, which are my favourite to work with.

Some great examples of effective title banners are: CSS Tricks, Shopify, and Adobe.

Banner Size

Choose the banner size carefully. If the working page is defined as 950 pixels wide, make the banner that width. The depth should be between 100 and 200 pixels. If you make the banner too deep you will be consistently occupying important page space. This is especially important for website visitors using netbooks that have a maximum screen height of 600 pixels.

Blend it in

Blend the banner with the page background. At its simplest, the banner should match and tie in with the background color or image. Where the working page width is to be flexible as a design choice, the banner needs to merge with the background. For instance, the web page background image could have a 50 pixel colored bar at the top. This should be continued seamlessly in the page banner so it will sit on top of the background without an apparent edge.

Choose eye-catching shapes

Unless it is a particular design choice, avoid using obvious rectangles as banners. A website title banner will be a rectangular image, but it doesn’t have to look like one. If the banner background color matches the page background color, the overlying banner content can appear to take any shape you want. The visible banner edge can be curved, ragged or structured as overlapping photographs, for instance. The title banner will merge seamlessly with the web page as an irregularly shaped feature at the top.

Create visual interest

Add detail and depth to the banner. A website title banner will be seen multiple times during each user visit. Make it special by adding layers of interesting content and elements that are subtle. With a screen resolution of 72 dpi, even a 1 pixel wide line can seem strong sometimes. Compensate for this by adjusting color and opacity of the image layers. Introduce grids, circles, lines and other subtle background features.

Avoid making it too busy

Add bold content to title banners. There is nothing worse than a title banner that looks like it contains every idea the designer could think of, each added with the same level of prominence. Where several features are being added to a website banner, avoid making them all a similar size. Try taking one layer or photo feature, and giving it a dominant space in the banner. Balance this with text and other elements of different sizes. This will prevent the banner from looking like a collection of assets squeezed together.


Use gradients for open space in a title banner. We rarely look at a surface that is one true color. Whether we are looking at a wall in a room, or at the side of a truck, reflection of light and the direction of origin will mean there will be a gradient of tone across the surface. This can be used in a website banner to give added interest and variation across areas of otherwise plain color.

It can be seen that website banner design needs to be thought out carefully, and designed to be relevant and appropriate throughout the whole website. A title banner sets the mood, and tells the user what to expect to find in website content. By embracing the concepts and ideas above, you should be able to design a title banner that will be a key asset to a website, and will give the site authority and prestige.

Further resources for web masters

%d bloggers like this: