How to design for Connected TV (CTV) Devices

The first step into OTT - 2022! Design your first OTT Streaming app for TV Devices

Ratings 3.75 / 5.00
How to design for Connected TV (CTV) Devices

What You Will Learn!

  • Design fundamentals for Connected TV Devices
  • How to design an OTT Streaming App
  • Basic UX, User Mindset, User Behaviour, Best & Worst Practices for TV
  • Differences between web & TV
  • TV specific typography & grid
  • Design approach in Figma
  • Navigation & UI states
  • Various components & pages
  • TV & platform specific restrictions

Description

During this course, we'll build an OTT Streaming App for TV Devices from scratch and you'll gain hands-on understanding of OTT apps. The SVOD (Subscription Video On Demand) model is the best first step into this niche or segment of the digital industry.


The course is up to date and reflects the current state of this section of the digital industry.


OTT is a growing market the demand for Connected TV apps is higher than ever. If you're a designer and want to stand out or gain additional skills to further your design career, this might be the course for you.


In this course, we'll look into how to design for CTV (Connected TV) devices, all the possibilities, and opportunities. You'll learn about the restrictions and challenges you're facing, how to approach a project like this, what to look for, and how to communicate with your development team effectively. You'll learn about best UX practices for OTT apps, how to keep your users engaged on the big screen, you'll learn about their mindset and goals.


The topics covered in the course are:


Section 1 - Introduction


Section 2 - Software & hardware requirements


Section 3 - Planning ahead


Section 4 - Core Differences between CTV & Web:

  1. Navigation

  2. Focus state

  3. UX differences


Section 5 - Design file:

  1. Creating your design file

  2. Freebies


Section 6 - Design preparations:

  1. Grid & overscan

  2. Typography for CTV devices

  3. Design in isolation & pre-prototyped frames


Section 7 - Home page:

  1. Navigation

  2. Header section

  3. Generic content cards & variants


Section 8 - Series page:

  1. Header sections & generic cards

  2. Genre rail & inner page

  3. Movies page


Section 9 - Individual content pages:

  1. Individual content page for series/shows

  2. Additional concepts

  3. Individual content page for movies


Section 10 - Video player


Section 11 - Search functionality


Section 12 - Account section


Section 13 - Log in & Sign up flows


Section 14 - Prototype


Section 15 - Thank you!

Who Should Attend!

  • Digital / Product Designers who would like to learn about deigning for Connected TV Devices

TAKE THIS COURSE

Tags

  • Design Thinking

Subscribers

61

Lectures

26

TAKE THIS COURSE



Related Courses