Hot Deals Panel

This panel acts as the main focus for new and exciting hot deals in the 3 Shop. It is large in size and attracts alot of attention, therefore some guidelines have been developed for designers/developers to follow when producing content for this panel in future. Below is the layout that is used for this panel.


Note: Diagrams shown above are not to scale.

 
Return to top
 
Hot Deals Panel - Navigational Menu

The navigation menu allows for four Hot Deals. There is also a link through to the Hot Deals homepage via the ‘More Hot Deals’ button. Each selected deal is highlighted via an arrow to the right and a change in the font colour of the HTML text (see specifications below). By clicking on another deal the feature panel to the right is updated with new content.


Typographcial Specifications

Product Headline:
Font:
Trebuchet MS  Size: 14px   Style: Bold
Colour: #000000   Output: HTML Text

Secondary Line (pricing):
Font:
Trebuchet MS  Size: 12px   Style: none
Colour: #222222   Output: HTML Text

Product Headline:
Font:
Trebuchet MS  Size: 14px   Style: Bold
Colour: #0C7BAD   Output: HTML Text

Secondary Line (pricing):
Font:
Trebuchet MS  Size: 12px   Style: none
Colour: #222222   Output: HTML Text


Download the PSD template
 
Return to top
 
Hot Deals Panel - Feature Panel

At this current time the feature panel is a single static image. In future this could be changed to an animated flash feature panel for more effect.

The layout below should act as a guide to future promotions on the 3 Shop Homepage. There are some guidelines that should be followed when designing this panel and they are detailed below alongside there corresponding numbers.


Typographcial & Design Guidelines

1. Product Images
Ensure the product image is large and clear. All phones should have a standard ‘3 Mobile UI’ (as shown in this example) which can be colour modified to suit each individual phone. Only use other UI’s if there is a specific link to that content within the promotion.

2. Typography
All promotional messaging should use 3’s corporate fonts of Verona and Modena. Verona should not be used for anything under 15px in size and instead should be replaced by Modena. Verona can only be used in black (#000000) and white (#FFFFFF) as per the 3 Styleguide. Ensure the product offer is large and clear, and avoid any unnessesary wording that makes the design cluttered.

3. Call to action buttons
Buttons in the feature panel must be kept to the same size (width variable if copy changes) and style as seen in the above example. The ‘add to cart’ button must always remain green in colour to be consistent with the same messaging used throughout the remainder of the site. The ‘more details’ button can change colour if needed to suit the overall creative. There should be no more than two buttons inside this panel at any one time.

4. Promotional Stickers/Offers
Promotional stickers should only be used when there is a special offer related to the product. The messaging inside the sticker and overall colour can be changed to suit different creatives. No more than one sticker should ever be used inside this feature panel.


Download the PSD template
 
Return to top
 

Sectional Tiles

Below the Hot Deals feature panel there are four graphical tiles that link through to the most popular sections of the site. These include the Mobiles, Broadband, Caps & Plans and Prepaid sections. Rollover states for all of these tiles can be found in the photoshop file below.


Note: Image above is not to scale.

Download the PSD template
 
Return to top