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