CoffeeBoy Skeleton: Mock-ups, Part VII

In the current series of posts we create mock-ups for each CoffeeBoy UI page. These mock-ups show the building blocks (buttons, labels etc.) of each page, though without revealing the final visual appearance (colors, fonts etc.) of the UI, yet. This part focuses on the Inventory page (see extract of the site map above).

Inventory page

Inventory page (XS and SM)

1. Inventory List: Contains information about the ingredients inventory.
2. Inventory List Item: Displays the ingredient’s icon, name and the fill level of the tank.
3. Inventory Fill Level Balk:
   • Displays the fill level in percent.
   • Colored in green if the fill level is >= 30%.
   • Colored in yellow if the fill level is < 30% and >= 10%.
   • Colored in red if the fill level is < 10%.

Up next

In the next post we’ll go on with the creation of mock-ups. Stay tuned!