As a graphic designer I spend a lot of time helping people create professional online business presence.

I have created this content to help you identify what to consider when creating your website banner.


The first thing to consider is what template you are using for your site.

Is it one with a fixed width header at the top?

Or is there a space for your logo at the top with navigation and then a larger potentially full screen width banner underneath?

Perhaps your site has fixed width banners on rotation?

Once you identify which template style you are working with you will be able to clarify the size of image you need to create.


Before you start designing it is a good idea to think about how your banner will be seen across all devices… Design elements or text can look great on a desktop but potentially be illegible on a mobile phone screen. Just have a look at the size of the elements you are using when they are reduced to make sure they still look good.

Will you have text as part of the graphic or over-laid on top of your image in website text? (Having text over-laid means it won’t reduce to an illegible size upon automatic rescaling between desktop and mobile – however the text may appear over a different part of the image)

Consider how much of the “first screen view” (before any scrolling) your header will take up. It’s really important to get any KEY INFORMATION into the first view screen so the viewer knows what the site is about and is encouraged to scroll and click through to find out more.


Design is more than a pretty picture.

The wording, colours, fonts, images and styles we use INFLUENCE PERCEIVED VALUE and help a viewer feel that you are offering exactly what they are looking for. Even with a single header design you can evoke feelings that make the potential customer want to stay on your site and find out more.

So think about:

• What you want to say (a very short sweet message – this could even be as simple as logo and tag line if these give a good impression of what the brand is all about) Or you could pose a question to engage the viewer, or use a call to action statement that lets the viewer know you understand where they are at and what they need/want.

• How you want your viewers to feel (for example calm, excited, hopeful, free, supported, welcome – this way you can ensure your colours and images evoke these feelings)


Choosing the right design elements to include is really important. Here are a list of some elements you may decide upon and what they portray.

Logo or brand style elements – Keeping consistent colours and brand elements shows a professional brand that pays attention to detail and is reliable (can be trusted)

Backgrounds – Using brand theme backgrounds that have a little depth to them (as opposed to flat colours) will help draw a viewer into the energy of your business more and make it feel tangible, approachable, welcoming, you can help them feel a taster of experiencing your brand.

Flat colour – Blocks of solid colour will portray clarity, focus, strength, a structured business, as brand triggers.

Photo of you – Including a good professional photo of you is a good idea if you have a business that involves a customer working with you personally. Choose an image that compliments your brand colours and feels professional, welcoming and friendly. It is a positive brand trigger to have an image that is front facing (as if making eye contact – place left or right of banner) or so you are facing to the right (in a forward driven direction – place on left hand side of the header).

Product photo – If you sell products, showing a selection of your best sellers and possibly identifying them as such with a ‘sticker’ overlay is a good idea. Ensure you use a good quality professional image.

Photo “story” – They say an image speaks a thousand words… so making sure the image you choose says the right things about your business is really important. Consider how any specific image makes you feel… compare this to the key words you want to evoke in your viewer. Keep images “on brand” in theme and colours. If using a free stock photo image, edit the image with some of your brand colours or a tint to ensure it looks unique on your site and not like something they may have seen before on the site of another business. Using an image is great for a ‘lifestyle’ brand – where you want the viewer to picture themselves in that photo (creating desire).

Badges / Icons – Have you won any awards? Or do you claim anything that your business delivers/ guarantees? Having an icon/badge that makes this clear is a great way to establish credibility. Alternatively you could consider adding a badge that clearly identifies who you help / with what.

Contact details – Contact details such as address or telephone number are only recommended for a header if you have a physical retail outlet / business premises that customers visit / or take phone orders for online product sales – in this case making these details easy to find is a good idea… otherwise, for other business types, contact details can be swiftly found via your navigation. 

Avoid over complicating your header and ‘Pick and Mix’ the most suitable design elements for your unique brand.

Remember you could have different headers created especially for different pages / sections of your site too!

Hopefully this has given you some food for thought. If you need some more inspiration or would like help with designing a high vibe header for your website check out my design offers via this link.