HEADERS & NAV
Last update: 02/08/2018
Embedded Files
1. BRANDED HEADER
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.
- Desktop 1440: https://univision.invisionapp.com/share/7KJPGTOGMUR
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
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
- White style for UNIVSION, ENTRETENIMIENTO, NOTICIAS: https://univision.invisionapp.com/share/2KFOVMX8GUA
- Black style for DEPORTES, TELEVISIÓN and TENTPOLES.
3. MENU
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
- Second level collapsed 414: https://univision.invisionapp.com/share/B7FONDQ4ZDR#/277769114_414-Hamburguer_Open
- Second level expanded 414: https://univision.invisionapp.com/share/B7FONDQ4ZDR#/277769115_414-Hamburguer_Closed
4. SECTION TITLE
4. SECTION TITLE
Located next to the brand in branded header
sketch files: https://drive.google.com/open?id=1KqprXv44w2g2tr0kSEtg7I7bxVYj3SK3
White + vertical theming: theming over text - standard
Vertical theming : bg theming
Black theming: dark theme
5. SUBNAV
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
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
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
USER CASE FOR CONTENT PAGES
ARTICLES, VERTICAL SLIDESHOWS AND LIVEBLOG > All cases uses the same WHITE section title header (#4)
ARTICLE and vertical slideshow:
https://univision.invisionapp.com/share/B7FONDQ4ZDR#/277449609_414-Article-Clean
HORIZONTAL SLIDESHOWS, VIDEO PAGE, FEATURED ARTICLE >
HORIZONTAL SLIDESHOWS, VIDEO PAGE, FEATURED ARTICLE >
All cases uses the same BLACK section title header (#4)
8. CUSTOM HEADER EXAMPLE
8. CUSTOM HEADER EXAMPLE
sketch files: https://drive.google.com/open?id=1-SAaUWszsK3XyBVc7T2B9PvWmSrWvULD
Specs for logos into headers
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 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
Detailed shows / tentpoles / branded headers guideline in PDF: https://drive.google.com/open?id=1BHwAs8R-6s8kUVGWcLLWv1faJozHrjA8
sketch file: https://drive.google.com/open?id=1-SAaUWszsK3XyBVc7T2B9PvWmSrWvULD
Calreply positioning and rules
Calreply positioning and rules
explainer in high res: https://univision.invisionapp.com/share/UBMGIXUPHGR
QUESTIONS OR RECOMMENDATIONS MLUQUE@KINJA.COM, AGONGORA@KINJA.COM
Mockups
mobile: https://univision.invisionapp.com/share/VZMGIWK8BQT
desktop: http://univision.invisionapp.com/share/SPMGIX65K6D
CRAFT INSPECTOR
mobile off: https://univision.invisionapp.com/d/main/#/console/13368895/306786317/inspect
mobile ON: https://univision.invisionapp.com/d/main/#/console/13368895/306786316/inspect
desktop off: https://univision.invisionapp.com/d/main/#/console/13368722/306786376/inspect
desktop ON: https://univision.invisionapp.com/d/main/#/console/13368722/306786375/inspect
source files: https://drive.google.com/a/fusion.net/file/d/1CBW67594lax9-pH4t1Cjlna3Y3MrEQuz/view?usp=sharing
Report abuse