How to Design online video streaming website with Sketch

How to Design online video streaming website with Sketch

  • English
  • Design
  • UX designUX design
  • (775)
  • Project length: 7h 09m

In this project, we are going to design a Mobile and tablet video streaming app with the Material design theme editor using Sketch. We will focus on designing a clean and modern interface that even your grandma could use!

Overview

Project Introduction:

This tutorial will go through the process of designing the UI of a video streaming app using Sketch. The tutorial will focus on creating a clean, modern UI design. First, we’ll look at how to set up the project, and then how to design the individual pages starting with the home page. We'll finish off with designing the search filters.

What are the requirements?

To get the most out of the tutorial, viewers should have some basic knowledge or understanding of:

  • Sketch
  • UX/UI design principles
  • Website design
  • Mac computer

What is the target audience? Anyone who wishes to learn more about:

  • Sketch
  • UI design
  • UX design principles

Project Outline

Session 1: Project setup

  • Setting up the material design grid
  • Designing the top app bar
  • Branding the theme colors
  • Wireframing the home page

Session 2: Homepage tablet

  • Arrange and measure the grid
  • Deciding on swipe logic
  • Designing relation between video splash screen and cover image
  • Adding genre and movie length

Session 3: Homepage mobile part 1

  • Adding movie plot to the movie in the spotlight
  • Designing the mobile movie spotlight
  • Migrating the desktop movies to mobile
  • Finding a better preview option for black background apps

Session 4: Homepage mobile part 2

  • Thinking through the user journey
  • Adding a button to watch full movie or trailer
  • Replacing dummy text with the actual movie plot
  • Testing different versions and iterating
  • Designing a search overlay

Session 5: Movie detail page part 1

  • Adding a drop-down navigation
  • Replacing movie cover images
  • Trying different layout variations
  • Designing a cast module

Session 6: Movie detail page part 2

  • Redesigning the Cast module
  • Creating the Trailers module
  • Adding a Similar movies section
  • Migrating it to mobile screen
  • Adding an info icon for the movie plot
  • Linking the screens and testing the prototype

Session 7: Filters desktop

  • Designing a genre, popularity and release date filter
  • Adding a pagination slider
  • Iterating on the filter on/off switch button

Session 8: Filters mobile

  • Migrating the filter system one by one to mobile
  • Adding an overlay under both mobile and desktop filter system

Reviews

Average rating

5(775 Reviews)