Horizontal Scrolling | App Carousel Tutorial
5.2K views · 2020-01-08
Interaction & UX
Learn how to bring your Sketch designs into Origami Studios here: https://www.youtube.com/watch?v=vyaqilW6c00&t=14s
If you are new to Origami, learn the basics here: https://www.youtube.com/watch?v=rPpjk9PbkCE&t=596s
In this video I show you how to make your Sketch designs interactive with Origami Studios. Origami Studios is a software that you can use to create mobile, web and tablet prototypes. I use Origami to create interactive prototypes for user testing and for creating animation documentation. I show you how to import designs and add swipe interactivity.
In this lesson I go over how to make an interactive carousel. I show you how to bring in an application design from Sketch into Origami, import images, add swipe interactivity and logic so the carousel dots indicate which page the user is on. I go over the entire process of how to create a horizontal scroll for your UX prototype.
I show you:
- 1:19 How to import Sketch designs into Origami
- 1:35 How to add images into Origami
- 2:09 How to set up the Origami layers
- 3:01 How to align the image layers
- 3:25 How to add the horizontal scroll interaction
- 4:00 How to add pagination / elastic scroll interaction
- 4:27 How to create the carousel dot interaction
- 6:06 How to add logic statements
- 6:50 How to add a color transition
Get Started with Origami here: https://www.youtube.com/watch?v=rPpjk...
Let's Connect
Dribbble: https://dribbble.com/angeladelise
Blog: https://medium.com/@angeladelise
If you are new to Origami, learn the basics here: https://www.youtube.com/watch?v=rPpjk9PbkCE&t=596s
In this video I show you how to make your Sketch designs interactive with Origami Studios. Origami Studios is a software that you can use to create mobile, web and tablet prototypes. I use Origami to create interactive prototypes for user testing and for creating animation documentation. I show you how to import designs and add swipe interactivity.
In this lesson I go over how to make an interactive carousel. I show you how to bring in an application design from Sketch into Origami, import images, add swipe interactivity and logic so the carousel dots indicate which page the user is on. I go over the entire process of how to create a horizontal scroll for your UX prototype.
I show you:
- 1:19 How to import Sketch designs into Origami
- 1:35 How to add images into Origami
- 2:09 How to set up the Origami layers
- 3:01 How to align the image layers
- 3:25 How to add the horizontal scroll interaction
- 4:00 How to add pagination / elastic scroll interaction
- 4:27 How to create the carousel dot interaction
- 6:06 How to add logic statements
- 6:50 How to add a color transition
Get Started with Origami here: https://www.youtube.com/watch?v=rPpjk...
Let's Connect
Dribbble: https://dribbble.com/angeladelise
Blog: https://medium.com/@angeladelise