Introduction
  • Introduction
  • Quick tips on how to take this course
Turn paper sketches of a video player into a mobile prototype
  • Introduction—What you'll learn and what you need for this section
  • Let's start drawing our wireframes
  • Understanding Marvel App
  • Taking pics of the sketches with Marvel App
  • Creating your prototype—Linking screens with hotspots and adding transitions
  • Let's see how good you got!
  • Congratulations - You finished your first section!
Designing the layout
  • Setting up your file
  • Setting colors
  • Fonts and logo
  • First image background
  • First screen and buttons
  • Let's see how good you are!
  • Introduction flow
  • Signup flow
  • Onboarding flow
  • Tabbed navigation
  • Let's test your skills!
Design the content screens
  • Feed Section
  • Feed Section - Hot
  • Discover Section
  • Product Detail
  • Product Detail - Image Slider
  • Product Options Panel
  • Quick quiz!
  • Search Section
  • Brands Section
Design the user settings screen and final details
  • Let's check those artboards!
  • User Section
  • Settings Section
  • Icon and Details
Create Prototype on Marvel
  • Export and Import
  • Adding Actions and Transitions
  • Hotspots on intro
  • Setting up the signup flow
  • Hotspots on Feed Section
  • Setting up Discover, Product, and Brands
Testing your design on your phone and desktop
  • Testing on Desktop
  • Testing on iPhone
Create a signup flow prototype on a whiteboard
  • Introduction—What you'll learn and what you need for this section
  • Drawing your signup flow on a whiteboard
  • Creating the prototype with Marvel App
  • Creating the prototype with Marvel App (detail screen)
  • Let's see how good you got!