UX Design for Mobile

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 ...