Long Form Video Layout
* Long form layout has the black theme in all cases
* Long form layout has the black theme in all cases
* Long form layout applies to TV SERIES and NOVELAS
* Long form layout applies to TV SERIES and NOVELAS
TV SERIES CASE
TV SERIES CASE
- Season selector is added above the playlist and indicates the user the tv serie title and the number of season is currently playing.
- The user clicks/taps on the back arrow button to display the season list
- Once the user reaches the last item of the playlist, a "load next season" button appears.
- From season two and forward, when scrolling up to the first item, a "load previous season" button appears.
- On mobile the player and season selector are sticky. Please refer to the mockups below
WEBAPP - MOBILE
WEBAPP - MOBILE
MOCKUPS
MOCKUPS
- Mobile (414): https://univision.invisionapp.com/share/XVN0K3MC5BA
- Sticky player + season selector: https://univision.invisionapp.com/share/MVN0K3VBXE6
- Load next/previous season button: https://univision.invisionapp.com/share/TFN0K47XJM5
- APPS - android (360): https://univision.invisionapp.com/share/ZHN5CL0M7C3
CRAFT DIRECT URLs
CRAFT DIRECT URLs
Mobile
- 414: https://univision.invisionapp.com/d/main/#/console/13896722/309279308/inspect
- 414 - season list: https://univision.invisionapp.com/d/main/#/console/13896722/309277482/inspect
- 414 - Load next/previous season button: https://univision.invisionapp.com/d/main/#/console/13896722/309277484/inspect
Apps:
DESKTOP
DESKTOP
- Back arrow button hover state bgr color: #808080
- Back arrow button active/enable state bgr color: #00000
MOCKUP
MOCKUP
- Desktop (1440): https://univision.invisionapp.com/share/YDN0K4DVW6R
- Desktop (1440) - load next/previous chapter: https://univision.invisionapp.com/share/7SN0K4KYMC2
*For button hover/pressed states please refer to the OUTLINED dark button definitions here : https://sites.google.com/fusion.net/univision-design-framework/design-base/buttons
craft url: https://univision.invisionapp.com/d/main/#/console/14375444/305679873/inspect
CRAFT DIRECT URLs
CRAFT DIRECT URLs
Desktop
- 1440: https://univision.invisionapp.com/d/main/#/console/13898069/289560928/build
- 1440 - season list: https://univision.invisionapp.com/d/main/#/console/13898069/309275660/inspect
- 1440 - load next/previous season button: https://univision.invisionapp.com/d/main/#/console/13898069/309275659/inspect
- 1280: https://univision.invisionapp.com/d/main/#/console/13898069/310597442/inspect
- 1024: https://univision.invisionapp.com/d/main/#/console/13898069/310597443/inspect
- 768: https://univision.invisionapp.com/d/main/#/console/13898069/310597441/inspect
TV NOVELAS CASE
TV NOVELAS CASE
- Uses the same layout than the tv series, but all the novelas chapters will belong to the one single season, meaning that the user will only see in the season list: season 1, unless the chapter data is organized in more seasons.
- The playlists will be of 25 chapters. When the user scrolls down to the last item of the playlist, the "load next chapters" button appears
- When the user scrolls up to the first item of the playlist, the "load previous chapters" button appears as well
🎨 Sketch editable files: