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.mp4

Refer 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

Report abuse