HEADERS & NAV
Last update: 02/08/2018
Last update: 02/08/2018
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:
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
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
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
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
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
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
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
All cases uses the same BLACK section title header (#4)
sketch files: https://drive.google.com/open?id=1-SAaUWszsK3XyBVc7T2B9PvWmSrWvULD
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 for headers:
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
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