Angie Terrell

The Interaction Design of a Horizontal Scroll with Snap

Angie Terrell | Jul 22, 2018

When designing for content, there are times when you’ll need to design the layout of content to scroll vertically and horizontally in your mobile app. It’s common to see this in content-rich applications that have both images and text. In particular, there may be featured content which spans the almost the full width of the screen, but when the user swipes through it, you want the content to snap into place.

It’s important to prototype these interactions so that you can get a feel for them, but also to communicate to your team how you would like them to work. Additionally, and probably one of the greatest uses for prototypes is to test out your solutions with users before they are built in code.

In this screencasts, we'll show you how to prototype this in Principle. If you haven't used it before, Principle is a robust prototyping tool centered around interaction design. You can sign up for a 14 day free trial using the link below.

For the More Curious...

Principle App

Subscribers Only

Transcripts are for subscribers. Create an account today to access our collection of screencasts, skill packs, and more.

Subscribers Only

Project files are only available for subscribers. Create an account today to access our collection of screencasts, skill packs, and more.

Need Help?

If you get stuck, try starting a discussion with Big Nerd Ranch experts in the community tab.

Related Screencasts

Explore other screencasts related to this topic.

Using Container Views to Manage Complex Layouts

7 minutes

When you have a complex view controller view, sometimes it is helpful to break up the view into manageable chunks. In this video we will show how you can use container views to simplify the construction of certain layouts. After this video you will know when and how to use these container views in your applications.

Dynamic Stack Views

9 minutes

UIStackViews are a relatively new addition to UIKit, appearing with iOS 9. They are quite useful because they eliminate the need for many Auto Layout constraints in common screen designs, making them easier to modify and maintain.

Custom Fonts

5 minutes

Android O introduces fonts as resources which will greatly simplify using custom fonts in your app. In this video learn how to add those fonts, how to apply them, and how to create custom font families.

Autosizing TextView

5 minutes

Android O has the ability to change the size of text in a TextView based on the size of the view. In this screencast learn how to add the autosizing and the different modes available.

Implementing Adaptive Icons in Android

6 minutes

Android Oreo introduces Adaptive Icons which allow device manufacturers to choose the outline, or mask, of all app icons on the device. This guarantees that all app icons will be uniform on each device, whether they be square, rounded, or circular. In this screencast, part 2 of the series, we'll now show you how to generate your icon to take advantage of this new Android O feature.

Drawing Custom Controls

6 minutes

Sometimes your app design calls for a control design that isn't provided in UIKit. In this video, we draw one from scratch!