Juno Visual Design Standards - ESPNDesign the top XL banner ad to be transparent so that the...

7
VER 1.1 AUG 22, 2017 Wallpaper STYLEGUIDE

Transcript of Juno Visual Design Standards - ESPNDesign the top XL banner ad to be transparent so that the...

  • VER 1.1 AUG 22, 2017

    WallpaperS T Y L E G U I D E

  • VER 1.1 AUG 22, 20172

    STYLEGUIDE: WALLPAPER

    OVERVIEWThe "Wallpaper" is a premium ad unit that is a part of the Video Showcase execution or can be combined with other premium and standard units. The "Wallpaper" asset is intended to compliment the banner creative to allow for a more immersive and integrated brand experience.

    • Due to a high probability that the full width of the wallpaper will not be viewed on most devices, it is highly recommended to only have non-essential brand elements within the wallpaper area wrapping the sides of the site content, as logos and text may not be viewable.

    • Wallpaper is only available for XL and L profiles.

  • VER 1.1 AUG 22, 20173

    STYLEGUIDE: WALLPAPER

    KEY NOTES:

    • No key art or buttons in side panels • Fade to #eeeeee is part of the template • Blue, green and red guide lines show the viewable area for different screen resolutions

    VIEWABLE AREA BY RESOLUTION:

    EXTRA LARGE (XL) WALLPAPER

    • Size: 1680x690

    • Visible width: depends on screen resolution (see guides)

    • Type: JPG

    • Bottom part of wallpaper will have a fade to transition seamlessly into the background

    RECOMMENDATIONS

    Design the top XL banner ad to be transparent so that the wallpaper is visible behind the ad.

    XL WALLPAPER

    1680x1050 1440x900 1366x768

    Blue Guide Green Guide Red Guide

  • VER 1.1 AUG 22, 20174

    STYLEGUIDE: WALLPAPER

    KEY NOTES:

    • No key art or buttons in side panels • Fade to #eeeeee is part of the template • Blue, green and red guide lines show the viewable area for different screen resolutions

    VIEWABLE AREA BY RESOLUTION:

    LARGE (L) WALLPAPER

    • Size: 1280x455

    • Type: JPG

    RECOMMENDATIONS

    Design the top L banner ad to be transparent so that the wallpaper is visible behind the ad.

    L WALLPAPER

    1280x800 1024x768

    Blue Guide Green Guide

  • VER 1.1 AUG 22, 20175

    STYLEGUIDE: WALLPAPER

    WALLPAPER VIEWABLE AREA

    Full width of wallpaper (blue shaded area) not visible on every screen depending on display resolution.

    RECOMMENDATIONS

    Due to a high probability that the full width of the Wallpaper will not be viewed on most devices, it is highly recommended to only have non-essential brand elements within the Wallpaper area wrapping the sides of the site content, as logos and text may not be viewable.

    WALLPAPER VIEWABLE AREA

  • VER 1.1 AUG 22, 20176

    STYLEGUIDE: WALLPAPER

    CORRECT EXAMPLE

    Wallpaper does not have text, CTAs as that will be cut off on some browsers/devices.

    WALLPAPER: EXAMPLES

  • VER 1.1 AUG 22, 20177

    STYLEGUIDE: WALLPAPER

    OVERVIEW

    The wallpaper is there to help the ad appear to be more integrated with the site. A typical execution will have art that compliments the ad without compromising legibility.

    • No key art in side rail wallpaper

    • No messaging in side rail wallpaper

    • No call-to-actions in side rail wallpaper

    • There will be a fade to #EEEEEE at the bottom

    of the wallpaper.

    WALLPAPER: DON'T(S)

    Do not put messaging, text on sides

    Wallpaper fade is too low