Title Banner Designs That Work

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.

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.

Gradients

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

We personally use the coupon codes found at http://couponcodehoster.org/godaddy-promo-codes to save a lot of money on our GoDaddy hosting account. You should too!

The Psychology of Color in Web Design

Apart from clear navigation, web design should also be able to hold the attention your site visitors for the longest time possible, leading them down the conversion channel and quietly urging them to take whatever action you have in mind as the goal of your website. Color holds an enormous grip on our attitudes and emotions and because web design should have an influence over people’s behavior, it is only important to consider the psychology of color when designing your website. Color defines how the public perceive your brand and what you stand for. Nevertheless, the ultimate question remains, what is the right color for my brand for maximum impact?  Take advantage of the psychology of color in web design.

Color and conversion

It is undoubtedly true that there is a strong connection between color and the call to buy. Every time you see a color, the brain goes through a series of reactions, which triggers emotions that affect your behavior. In fact, more than 60% of purchasing decisions are attached on the influence of color. What this means for your business is, understanding the psychology of color will considerably improve the conversion rate on your website.  Here is some more information on the psychology of color.

Where to Use Color?

Color is ubiquitous, but you need to be careful when using color in pop-ups, headlines, background hues, borders, call for action buttons, and web banners. Similarly, remember, the target audience influences the choice of colors you use in these key areas.

Choosing the Right Color for your audience

Color is tricky, and you have to use it right and with the right audience, for the right purpose. Any color you choose sparks a different kind of emotion and it is important to learn how you can take advantage of that. For instance is your website is selling makeup, the target group is women. Using various shades of purplish or pinkish background, will not only be alluring, but also give a sense of sophistication for the target audience. On the other hand, if your company’s core values stand for transparency and trust, then blue is probably the right color for you.

Contrast and Brightness

Brightness plays a significant role in the success of a website. It is also widely accepted that women are more attracted to soft colors, while men prefer brighter colors. However, learn to balance where need be. For instance, contrary to their preference of soft colors, when it comes to their children, women want brighter colors. Contrast on the other hand improves the readability of your website. Honestly, no one wants to keep on struggling to read what is written in your website. Bottom line is, the scheme of color you choose for your website can break or make your website. Before launching your website or when redesigning, analyze your website from your perspective of a user and you will understand what is right or wrong for your website.

4 Ways Web Design Templates Can Easily Kill Your Brand

Temptations of using a web design template may arise when you, a new business owner, want to set up your business. It may save you a few bucks, but then it also has hidden costs involved in the setting up of your presence online. These design templates have been the major cause of poor results and frustration to many businesses. The reasons listed below clearly outline how a web design template can kill your brand, and why you should consider investing in a professional website.

1. You Practically Become Dependent on Their Services

Once you start using web design templates, you cease having full ownership of your website. Your unique content quickly becomes incorporated into their template and systems. What this means is that you risk being shut down at any time with no warning whatsoever for irrelevant reasons e.g going contrary to their terms and conditions.

It is moreover impossible for you to download files from your website and upload them to a different web hosting service. You’re out of luck if ever you wish to change providers for one reason or another.

2. Some Web Templates Restrict Access to SEO Tools

These templates claim to offer SEO tools as part of the package. In truth, these tools cannot be compared to the services professional SEO services have to offer. Professional services ensure proper optimization so as to drive traffic to your website.

Major elements that are needed to impact SEO, such as titles or header tags are inaccessible in most website templates. In addition to this, the technology used in these templates cannot be picked up by search engines and are hardly visible on most smartphones.

3. They Do Not Make Your Brand Stand Out

The essential elements of your brand’s identity is its overall appearance. Website templates, in one way or another, cheapen your brand by forcing your to use either of their cheesy templates. This may lead to multiple business sharing your business’s logo or brand colors.

You may also not find what your business needs in terms of look and feel. The templates’ old and outdated nature will give your business an amateurish as well as cheap appearance. The most important thing a web design company can offer you is the creation of a site best suited for your business.

4. The Customization Feature Is Inaccessible

You simply cannot add any important details or add any functionalities or custom scripts. This often leads to frustration. Any professional website developer sets your custom website on a hosting server that has a positive reputation.

These kind of developers allow you to access the customization feature so as to include any functionality you see fit to be included in your website.