Mobile App Prototyping: Designing Custom Interactions | Noah Levin | Skillshare

Mobile App Prototyping: Designing Custom Interactions

Noah Levin, Product Designer / Prototyping Teacher

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
7 Lessons (51m)
    • 1. Introduction

      3:39
    • 2. Why Prototyping?

      3:41
    • 3. Prototype 1: Create an Animation

      13:30
    • 4. Prototype 2: Create a Transition

      10:31
    • 5. Prototype 3: Create a To-do App Action

      18:00
    • 6. Your Final Prototypes

      0:38
    • 7. Explore Design on Skillshare

      0:37
48 students are watching this class

Project Description

Prototype a fun mobile app interaction: animation, page swipe, or both.

This class is recommended for those with a basic familiarity of mobile app design. If you're brand-new to prototyping or mobile app design, check out Intro to Mobile App Design on Skillshare.

____________________________

ASSIGNMENT

Your assignment is to create a mobile app prototype for a fun interaction. You will create one of the three simple prototypes below: an animation, a page transition, or a scroll/swipe action.

Using Framer, you will create one or all of the 3 prototypes below (free trial download of Framer):

Animation Prototype: Make a basic click animation using any image you’d like (or you can use the Buzz Lightyear example in the resources!)

a14ce68a

Page Transition Prototype: Make a basic swipeable page. You can use the Sketch file provided in the resources, or use your own. 

a201335b

Scroll/Swipe Action Prototype: Create your own to-do list app in this class, or download the example sketch file in the class resources. Then make it interactive with a scroll or swipe.    

3aa97a14

DELIVERABLE

Upload a screenshot or gif of your prototype to the project gallery. Please be sure to share the link to your finished prototype.

RESOURCES

  • Take the Intro to Mobile App Design with Sketch 3 to learn the basics of app design, and to create a to-do list app to use in this class.
  • Check out the Framer gallery for some inspiration.
  • For a quick tutorial to get started with the basics of framer, read this, and explore additional Framer resources.
  • A quick tool for making your prototype into a gif here (Class on Skillshare coming soon!)

Student Projects

Noah Levin
1 comment
Sufiyan Yusuf
4 comments
Swaminathan J.
4 comments
Devin M.
2 comments
T Kim
Carlos Morales
6 comments
Roman Wagner
Robert Mion
1 comment
Carlos Cañas
2 comments
Seth ◕
5 comments
1 comment
1 comment
Ahmed Majid
1 comment
2 comments