O'Reilly logo

UX Design for Mobile by Pau Giner, Pablo Perea

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Using a single layer for the active state

The first approach consists of showing the filled-bookmark icons on top of the original ones when an item is bookmarked. In order to do so, we'll add a filled version of the bookmark icon on top of the empty one and control the opacity with an animation when the user clicks on the corresponding area.

First, we start by creating a new Hype prototype using a 360x640 px scene and adding the activities view mock-up as a layer in the background. Next, we add the filled-bookmark icon as a new layer, placing it on top of the bookmark icon of the first element in the list.

The layer representing the bookmark ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required