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 separate layers for each state

As an alternative way to support this same example, we will use two different elements for the filled and empty bookmark states. To keep things simple, we'll create the alternative version as another scene in the same prototype, but feel free to create a new prototype if you prefer.

We will add the activities view mock-up version that does not contain the bookmark icons, and then add the icons as separate layers.

Bookmark icons are added as separate layers on top of the activities view

In order to make sure that we have a big enough touch area, we turn the bookmark layer into a group by right-clicking on ...

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