ProtoPie Masterclass

Prototyping for Smart TV
and Video Streaming

Design the next-gen TV experience with rich interactive interfaces,
from intuitive navigation systems to cutting-edge video player technology.

<_dddul class="lw-topbar-options with-flexible-parts align-items-center"> <_dddli class="lw-topbar-option">
  • 1. Grid Navigation
  • 2. Dynamic Data
  • 3. Browse Experience
  • 4. Video Player
  • 5. Trick Play
  • 6. Final Touch

Rise to New Design Heights
with TV Prototyping

Figma to ProtoPie Collaboration

Set up the foundation of your TV interface with an efficient workflow that smoothly transitions from Figma to ProtoPie.

Data-Driven Design

Unlock the power of data-driven TV UI development by integrating APIs for dynamic content that adapt to real-time data, providing a richer and more engaging user experience.

Component-Based Design for Scalable TV Interfaces

Discover how to create scalable UI components and customize them with ProtoPie, ensuring your TV apps are adaptable and visually appealing.

Media Playback Controls

Elevate your TV app's media playback experience by mastering the art of designing intuitive playback controls.

Keyboard and Remote Input Mapping

Gain expertise in mapping D-pad controls, virtual remote interfaces, and keyboard/gamepad navigation for TV UIs. Ensure accessibility, user-friendliness and compatibility across various devices.

Navigation Model for TV UI

Dive into the world of TV navigation with a focus on the grid layout system. Build dynamic TV program grids with ProtoPie and master the use of focus states and indicators for intuitive and accessible TV UI design.

Module 1: Grid Navigation Model

1h 20min, 6 lessons
Write your awesome label here.

Intro

Join our instructor Jeff, a seasoned UX designer from top TV broadcast companies like Comcast, Bell Canada, and Sky UK, as he shares his comprehensive knowledge in TV interface design.
3m

1. Getting Set Up

Learn how to import essential design elements and component to set up the foundation for your TV interface prototype.
3m

2. Figma Import and Basic Tile Component

Get started by importing screen templates from Figma and setting up a self-contained mechanism to test transitions between focused and unfocused states.
13m

3. Rail Component

Create a row of tile components that can be navigated left and right. This lesson focuses on setting up navigation within your interface and managing the focus on different tiles.
20m

4. Abstract Input

Learn how to abstract input mechanisms to make your TV interface more flexible. By creating a keyboard input component, you can easily change the input method without altering every component throughout the prototype.
12m

5. Multiple Rails

Expand your interface by adding multiple rails, and ensure that each rail can work independently. Debugging techniques and adding UP/DOWN navigation will also be covered in this lesson.
29m

Module 2: Prototype with Real Data

1h 39min, 4 lessons
Write your awesome label here.

6. Set Up a Data Service

In this lesson, you'll set up a data service for your TV prototype. This involves setting up a simple server and creating an in-house API to serve dynamic TV program data, images, and videos.
5m

7. Populate Rails from Data

Learn how to populate your rails with data fetched from the API you set up. Preview the prototype through ProtoPie Connect and ensure that the data is correctly displayed.
30m

8. Adjust to Data Length

Make your prototype more adaptable by configuring tiles to handle varying data lengths. This lesson will address challenges related to data length and switching from fixed to roaming focus.
25m

9. Configure Rail with Tile Size

Modify your existing tile component to accommodate different tile sizes, making it more versatile for different content. This involves making tile width and height configurable at the rail level.
38m

Module 3: Complete the Browse Experience

2h 31m, 5 lessons
Write your awesome label here.

10. Show Hero / Metadata on Focus

Learn how to highlight selected content by adding hero images and metadata when a tile is in focus. This lesson will also introduce animation techniques to enhance the user experience.
13m

11. Details Screen Navigation Model

Explore the navigation model for the program details screen. This lesson covers the transition between the home screen and program details screen, focusing on button interactions and animations.
43m

12 & 13. Populate Program Details Screen

Share data between scenes to populate program details, including title, hero images, descriptions, star ratings, and more. You'll create a user-friendly scroll-to-layer component and iterate through different content elements.
85m

14. Transition Between Home and Details Screens

Add motion to your TV interface by creating a custom transition between the home screen and program details screen. This lesson will focus on enhancing the user experience with smooth transitions.
10m

Module 4: Basic Video Player

1h 34min, 5 lessons
Write your awesome label here.

15. Zone Navigation Model

Set up the navigation model for the video player, including creating focusable elements and replacing buttons with reusable components. This lesson is crucial for preparing the video playback section of your TV interface.
25m

16. Basic Play / Pause Control

Learn how to toggle video playback using different input methods, including the progress bar scrub knob, play buttons, and the dedicated play/pause button on the remote control.
19m

17. Progress Bar Display

Enhance the video player by displaying progress in the form of a moving knob on the progress bar. You'll also add elapsed and remaining time indicators for a comprehensive viewing experience.
18m

18. Detecting End of Playback

Explore how to detect the end of video playback and handle video looping or starting over from the beginning when the end is reached.
5m

19. UI Timeout

Create a timer to automatically hide the user interface after a period of inactivity. This lesson will add user-friendly functionality to your TV interface, making it more intuitive.
27m

Module 5: Adding Trick Play

1h 4m, 3 lessons
Write your awesome label here.

20. Thumbnail Preview

Implement thumbnail previews for your video player. This feature allows users to see a snapshot of the video content while paused and facilitates navigation within the video.
10m

21. Skip Forward and Back

Introduce the ability to skip forward and backward within the video playback. This lesson will cover pausing the video during skip actions and updating the thumbnail preview accordingly.
19m

22. Multi-Speed Fast Forward and Rewind

Add multi-speed fast forward and rewind functionality to the video player. This lesson covers sequential speed adjustments, interruptions, and more advanced video control features.
35m

Module 6: Complete the Whole Experience

45min, 4 lessons
Write your awesome label here.

23. Make the Video Player Data Driven

Remove embedded videos and make the video player data-driven. Learn to play videos dynamically using media responses and integrate metadata for a more realistic TV interface.
21m

24. Make the Video Player Fault Tolerant

Enhance the fault tolerance of your TV interface by handling scenarios where videos may not start playing. Implement a timeout mechanism and clean up building aids for a smoother experience.
12m

25. Add Gamepad Input

Abstract input mechanisms for your TV interface, allowing compatibility with various input devices. This lesson focuses on adding gamepad support and creating a reusable component.
9m

26. Add IR Remote Control Input

Explore integrating IR remote control input into your TV interface. Discover methods to make your prototype responsive to remote control commands without writing code.
3m

Wrap Up

You've completed a fully data-driven TV interface prototype. See how you can add further enhancements and modifications to make your prototype even more versatile and user-friendly.
Coming soon

Master TV Prototyping with ProtoPie

The Preferred Choice of Leading Design Teams Worldwide

Grid Navigation Using Remote Control
Voice Assistant with 52 Languages
Cross-Device Interactions
Immersive Experience in AR/VR

The Wall of Love

I’m truly impressed by the wealth of knowledge in this course. I learned numerous techniques and best practices that I can immediately apply to my upcoming projects. While the videos are quite lengthy, it’s easy to navigate with the provided resources. The course did start with some complex sections, but it gradually built up to impressive interactions that students can aspire to create.
Curtis W. 💜
This course feels like a NASA-level training, and the rewards are absolutely worth it. Although it can be overwhelming at times and some processes may seem confusing initially, the content and learning process are exceptional. The fantastic presentation and videos make complex information accessible. I’m eagerly looking forward to the next class!
Chris W. 💜
Taking this course was a game-changer for me. When I first started using Protopie for a school project, I wish this course had existed. It would have saved me countless hours of research. Now, I feel much more confident in my ability to create prototypes using Protopie, thanks to this course. I also discovered the tool’s incredible capabilities, like voice interactions, which will be invaluable for my future projects.
Jingwen Y. 💜
The course is exceptionally well-explained, featuring short and helpful videos. I’m delighted to have switched to ProtoPie for prototyping, and if I could offer a suggestion, it would be to consider using a dark theme for the videos. Thank you for providing such an engaging and beneficial Masterclass.
Filip D. 💜