UI/UX in banner design

UI/UX in the context of banner design, which is one of the most important parts of website design.

When it comes to designing a banner for a business, you must understand the objective of what the requester of the banner wants.

The requester has to first explain what type of a banner he wants to get designed. First explain to your client the difference between banners and stamp ads—while banners represent the most important spot of your website, stamp ads are ads with small pictures and text along with them. The banner is the space that should always talk about your core focus/business.

You should apply the rule of Z Pattern to your banner design. Nikon banner is an example of Z Pattern. Z pattern follows the shape of the letter z. Readers start in the top/left, move horizontally to the top/right and then

nikondiagonally to the bottom/right before finishing with another horizontal movement to the bottom/right.

In order to make them mobile friendly, height and width of the banner have to be in 30:70 ratio.

Banners should have a standard 96DPI resolution

4 vital elements to remember in banner design

1.     Inform or promote through banner but be frugal with your words to conv

ey what you want to; lesser the words the better it is.

2.     Convey price benefits through three information—“market price”, “Offer Price” “Your Savings”

3.     Fruits – Show case Product image or Lifestyle image

4.     Placement and Highlighting of Call to action is extremely important and we will not cover as part of this chapter.

In Ecommerce, there are four types of banners

1.     Lifestyle

2.     Actual Product

3.     Brand

4.     Hybrid Banner


Lifestyle banner is focused on high end or luxurious products. Such banners are made for branding and not click thru’s and used as part of the 360 degree marketing campaign.

Actual Product banners are sales based banners for known items such as Mobiles, Electronics, Shoes, Jeans etc.These banners are ineffective for unknown products or difficult to identify products.

Brand Banners are to focus on establishing the recall factor of a brand or availability of a brand. For example, a local store selling Puma Shoes, will highlight the shoes and the brand Puma.

Hybrid banners are those banners that include lifestyle/product or Brand. In this case when designing a lifestyle image then provide information about the product and when using the actual product provide lifestyle information.

While designing banner keep the following points in mind.

  • Place the Image > Place the Text > Place the Call to Action
  • Stick to standard color codes.
  • Best Practice in using Colors
  • Information banners are different than Call to Action Banners
  • Hyperlinks –blue color with underline
  • Price – red color and bold
  • Information-    Information text should be in a contrasting color to that of the background color. kuler.adobe.com is a great place to find color combination ideas
  • If you have multiple banners on the same page, you need to maintain standardisation to your call to action or brands in order to ensure eye tracking movement is not distracted. See the example below.




















Category Banners are different than call to action banners, see example

zara zara2










Below is a unique Seven Line Rules for Banners for Web and Mobile.

Rule # 1

Text Alignment – Always align content to the left of your banner, and ignore the right.


Rule # 2


For a lifestyle banner, there should be parity between the images used in the site and the text colors. So just choose a color from the background image to be used in the text for information or facts showcase.

cufflinks Rule # 3

In order to give out maximum visual experience to your audience, follow the Text Spacing finger rule which placing of minimum amount of contents on a banner. lucera

Since nice visual expressions are more effective than the text in connecting people, the only way to achieve a creative look is to give enough breathing space between your messages—this is precisely the finger rule of banner design.


Rule # 4


When you are confused about the foreground color with respect to the background color, use same color background for the text with reduced opacity. In the example below, one background image has been picked plus on top reduced opacity is used to write information/call to action.










Rule # 5

omax-watchPhoto close-up – When the creative size is small, then you need to have close of the image. In case of Mobile, if you want to showcase jeans, you need to show as a model wearing the jeans cutout.

Rule # 6

fourcolorsAlso take help from color suggesting tool to get the right color combination. Kuler is good choice, though there are a number of them to choose from. Do not use more than four colors and you will be able to design a good banner.

Rule # 7

Banners are designed for an audience. Here is a thumb rule for designing for different audience:

adidasWhen you are creating an advertisement such as an offer, add product- based images. When you are creating branding design, then apply lifestyle images showcasing what kind of audience you are targeting.

In branding ads, showcase the entire message through visual.