360º Video Icon
Last update: 01/26/2018
Use to differentiate a 360º video experience from a regular video
Notes:
- Tool tip explaining how to interact shows for 3-4 seconds and fades away
- The compass indicator rotates as the user taps on the video in different directions. Refer to a 360º Vimeo video experience.
- Refer to this demo for the compass indicator rotation animation
- The 360 Icon size and text apply for APPS as well
- Download icon .svg here
Call to action text specs:
- Font: Roboto bold
- Font size: 11px
- Lineheight: 13 px
MOBILE
MOBILE -STATE 2
DESKTOP
DESKTOP-STATE 2
360-hover.mp4Refer to this video to see the 360 video icon hover state. The icon scales 1.2 its size
MOCKUPS WEBAPP
Mobile 414: https://univision.invisionapp.com/share/C9FJPSITKGU
Desktop 1440: https://univision.invisionapp.com/share/H7FJPS8G8JR
CRAFT DIRECT URL
For 320 and APPS refer to the 414 breakpoint url:
414 - 360 video icon: https://univision.invisionapp.com/d/main#/console/12863211/275866375/inspect
414 - 360 video experience:
https://univision.invisionapp.com/d/main#/console/12863211/275866374/inspect
For 768 to 1280, refer to 1440 breakpoint url:
1440- 360 video icon: https://univision.invisionapp.com/d/main/#/console/12862898/275865914/inspect
1440- 360 video experience:
https://univision.invisionapp.com/d/main/#/console/12862898/275865913/inspect
Sketch editable file: https://univision.box.com/s/vexu1w9ht6muaz5efnxjfslnelras2a8