HEADERS & NAV

Last update: 02/08/2018

1. BRANDED HEADER

Logo, hamburger menu and search icon (global nav component additional for desktop)

Source Files: https://drive.google.com/open?id=12wu9d3KWqKEK6FoazSI_QEsjd3Uhj3PL

White style for UNIVSION, ENTRETENIMIENTO, NOTICIAS. Black style for DEPORTES, TELEVISIÓN and TENTPOLES.

This type or header will be used for main sections like Univision.com or Univision Entretenimiento and will be composed always by:

  • Hamburguer menu
  • Centered Brand on dektop and mobile
  • Search icon

2. GLOBAL NAV

This global bar will give quick access to the users to a set of 15 strategic links. DESKTOP ONLY

sketch files: https://drive.google.com/open?id=12wu9d3KWqKEK6FoazSI_QEsjd3Uhj3PL

  • Black style for DEPORTES, TELEVISIÓN and TENTPOLES.

3. MENU

The menu is a common list of sections and subsections across platforms.

sketch file: https://drive.google.com/open?id=13bGhmMuPav3O1eRv2vevxPudbcaYlQxD

Close Nav

Collapsed menu first level

Expanded menu second level

4. SECTION TITLE

Located next to the brand in branded header

sketch files: https://drive.google.com/open?id=1KqprXv44w2g2tr0kSEtg7I7bxVYj3SK3

Vertical theming : bg theming

White: standard


5. SUBNAV

Set of maximum 7 links as entry points for contextual subsections

Sketch files: https://drive.google.com/open?id=1KqprXv44w2g2tr0kSEtg7I7bxVYj3SK3

Black theming: https://univision.invisionapp.com/share/RJFONEOEQUW#/277448720_Header-V3-Classic-Section_White

(in desktop) When subnav has more than 7 links. a dropdown menu nests the rest of links Mockup

5.1. LOCAL HEADERS

the logo of the local market is displayed with a special font style (roboto 24px) for the name of the city.

this kind of header, applies for section and content pages that belongs to local markets

Sketch files: https://drive.google.com/open?id=18jbrEZuKAue6MpfNQKenT9cLKlmBZwnl

6. SHOW HEADER

Below the section title header, show header appears with white logo, time on air and follow us links.

Subnav will be placed below show header in most of the cases

Sketch files: https://drive.google.com/open?id=1-SAaUWszsK3XyBVc7T2B9PvWmSrWvULD


USER CASE FOR CONTENT PAGES

ARTICLES, VERTICAL SLIDESHOWS AND LIVEBLOG > All cases uses the same WHITE section title header (#4)

HORIZONTAL SLIDESHOWS, VIDEO PAGE, FEATURED ARTICLE >

All cases uses the same BLACK section title header (#4)


Specs for logos into headers

All logos should be SVG files, and be cropped to the edges in order to optimize visualization.

Logo Specs for building headers: SVG format - Max-width: 180px / Max-Height: 56px

Background image specs

Background image for headers:

  • size: 1440px width / 100px height
  • design should be an ambient texture. photos of talents, high contrast images or photos are not recommended.
  • image should be aligned to the right of the screen in order to be seamless in screens with a width higher than 1440px
  • image must blend to a plain color in the area where the links are located in order to maintain readability

Calreply positioning and rules

QUESTIONS OR RECOMMENDATIONS MLUQUE@KINJA.COM, AGONGORA@KINJA.COM