Guidelines for Banner Design

The

secrets of

banner DES IGN ~MANASI KOTHARI Design Guidelines for Banner Design

MARKETING TEAM , SNAPDEAL.COM

A

CONTENT

1.0

ANATOMY OF THE BANNER

2.0

COMPOSITON OF THE BANNER

3.0

PRODUCT IMAGES

4.0

TAGLINES

5.0

SUPPORTING IMAGE

6.0

FEATURED LOGOS

7.0

ACTION BUTTONS

8.0

SAMPLES

Design Guidelines for Banner Design

& what’s inside a banner

1.0 ANATOMY OF THE BANNER

1.1

ANATOMY OF THE BANNER Heading/tagline

Product Image

163 px

Supporting Image

Background

Featured Logos

Action Button

756 px

Design Guidelines for Banner Design

The right things & the right placement‌

2.0 COMPOSITION OF THE BANNER

2.1

BANNER COMPOSITION

Option 1

Heading Supporting Image

Tagline Button Featured Logos

Example

Design Guidelines for Banner Design

Product Image

2.2

BANNER COMPOSITION

Option 1

Heading Product Image

Tagline Button Featured Logos

Example

Design Guidelines for Banner Design

Supporting Image

2.3

BANNER COMPOSITION

Option 2

Heading Supporting Image

Product Image

Tagline Button Featured Logos

Example

Design Guidelines for Banner Design

2.4

BANNER COMPOSITION

Op#on 2

Heading Tagline Button Featured Logos

Example

Design Guidelines for Banner Design

Product Image

Supporting Image

2.5

BANNER COMPOSITION

Option 2

Heading Tagline

Product Image Button

Example

Design Guidelines for Banner Design

Supporting Image

Featured Logos

The Play of Shadows

3.0 PRODUCT IMAGES

3.1

PRODUCT IMAGE

Product image is the image of the product that is to be promoted. In this case the watches.

DO’s  Ideally use images of the products on the landing page.  You can source and use images with a different angle of the same product if required.  While cutting the image from its background make sure that it has smooth edges and the background is completely removed.

 Process the image to look sharper but make sure that the details are not lost.  Use perspective while composing multiple images. For eg. Product that are upfront, in this case the watch with the green dial will be larger than the one with the black dial which is seemingly behind.

Design Guidelines for Banner Design

3.2

PRODUCT IMAGE

Product image is the image of the product that is to be promoted. In this case the watches.

DON’Ts ✕ Do not use unclear or low resolution images. ✕ Do not use drop shadow effect on images. Create shadows by using shape tool and Motion Blur and Gaussian Blur filters.

✕ Do not leave rough edges of the background on the image. ✕ Always use images as smart object so that editing and composition can be flexible.

Design Guidelines for Banner Design

3.3

PRODUCT IMAGE

Step 1: Select product images from the landing page. And make a composition

Watches that are seemingly behind in perspective will be smaller size. Â Â

Design Guidelines for Banner Design

Details and brand clearly visible in the close up shot

3.4

PRODUCT IMAGE

Step 2: Adding shadows and depth to the banner

Create shadows for all objects.

All surfaces that seem to touch the base should have shadows.

Design Guidelines for Banner Design

For shadows create a shape in black and apply motion blur and Gaussian blur filter to achieve soft shadows.

Adjust opacity as per background

3.5

PRODUCT IMAGE

Step 3: Adding shadows and depth to the banner

Add shadows on overlapping surfaces to add depth Â

Design Guidelines for Banner Design

Make sure all surfaces are covered Â

3.6

PRODUCT IMAGE

Step 4: Adding shadows and depth to the banner

Add other elements and complete the banner Â

Design Guidelines for Banner Design

3.7

PRODUCT IMAGE

Step 5: Adding depth to the background

A soft inner shadow to the the background can add more depth to the banner Â

Design Guidelines for Banner Design

What the

t??

Fon

4.0 TAGLINES

4.1

TAGLINE

Main Tagline: This generally defines what product category/ Deal Segment the banner is promoting Price/ Discount: This would define the price/ discount on the product/ service.

Secondary Tagline: This line generally would describe the offer / USP of the category. It could also be a line that would help sell the product/deal.

The size and placement of the various taglines would vary depending on what needs to be highlighted in the promotion Design Guidelines for Banner Design

4.2

COMMONLY USED FONTS

Design Guidelines for Banner Design

4.3

COMMONLY USED FONTS

Design Guidelines for Banner Design

4.4

COMMONLY USED FONTS

Design Guidelines for Banner Design

4.5

TAGLINE

Cambria Math Freehand 575 BT

Design Guidelines for Banner Design

4.6

TAGLINE

Trajan PRO Scriptina

Design Guidelines for Banner Design

4.7

TAGLINE

Asenine

Freehand 575 BT

Rupee fordian

Design Guidelines for Banner Design

4.8

TAGLINE

Freeform Â

Design Guidelines for Banner Design

4.9

TAGLINE

Quicksand

Design Guidelines for Banner Design

Freehand 575 BT

4.10

TAGLINE

Trajan PRO Zapfino

Design Guidelines for Banner Design

4.11

TAGLINE

Labtop (bold)

Design Guidelines for Banner Design

Labtop

4.12

TAGLINE

Kabel BK BT

Design Guidelines for Banner Design

Kabel BK BT

4.13

TAGLINE

Helvetica Â

Design Guidelines for Banner Design

4.14

TAGLINE

Tips  Use simple and clear fonts.  Use sans serif fonts for small size text.  Font size should not be less than 10 pt.  Do not use too many different fonts on a single banner.  Preferably do not use any effects like Drop Shadow / Outer Glow for the text.  Make sure that text is legible on the background of the banner.

Design Guidelines for Banner Design

Perk ‘em up…

5.0 SUPPORTING IMAGE

SUPPORTING IMAGE

5.1

Tips  Use images that highlight the product or its purpose.  Ideally make sure that the product shown in the supporting image is also available on the landing page.

 Do not use images that are not from one of the featured brands. Please check with concerned person if you are allowed to use brand images and you are not violating any copyright rules.

Design Guidelines for Banner Design

5.2

SUPPORTING IMAGE

Here the supporting image supports the tagline. By adding it to the product image it completes the story Â

Design Guidelines for Banner Design

5.3

SUPPORTING IMAGE

Here an image is used of the product being used instead of using an isolated image of the bat. Â

Design Guidelines for Banner Design

5.4

SUPPORTING IMAGE

Here an image is used which supports the tagline and adds interest in the banner. Â

Design Guidelines for Banner Design

5.5

SUPPORTING IMAGE

Here just the hint of an image is used to enhance the banner and add colour. Â

Design Guidelines for Banner Design

6.0 FEATURED LOGOS

FEATURED LOGOS

6.1

Tips

Featured logos

 Align all the logos. In most cases the logos should be aligned to the bottom.  All the logo should look the same size.  Make sure that the logos are not too small and are legible.  Assure that the logos are not blur. Get high resolution logo and edit them.  In most cases you can use single colour logos of the brands. Like in this case all logos are grey.  Make sure that the distance between each logo is not too little where the logo start to merge with each other.

7.0 ACTION BUTTONS

ACTION BUTTONS

7.1

Tips  The action button should as per the standard design as shown  Change the colour of the button so that it is highlighted against the background.  Do not reduce the size of the action button.  In case the banner is promoting a range of products the action button should say “SHOP NOW” in case it is promoting a single product the button should say “BUY NOW”

 In most cases the button should be near the price or the discount mentioned. This is one exception.

7.2

SAMPLES

Design Guidelines for Banner Design

7.3

SAMPLES

Design Guidelines for Banner Design

7.4

SAMPLES

Design Guidelines for Banner Design

7.5

SAMPLES

Design Guidelines for Banner Design

7.7

SAMPLES

Design Guidelines for Banner Design

7.8

SAMPLES

Design Guidelines for Banner Design

7.9

SAMPLES

Design Guidelines for Banner Design

7.10

SAMPLES

Design Guidelines for Banner Design

7.11

SAMPLES

Design Guidelines for Banner Design

7.11

SAMPLES

Design Guidelines for Banner Design

7.11

SAMPLES

Design Guidelines for Banner Design