CoffeeBoy Skeleton: Mock-ups, Part VI

Site Map Excerpt

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 pages which are in the hierarchy below of the Coffee Recipes page. (see extract of the site map above).

CoffeeBoy Series Schedule

A short hint before we start: In the following three sections we’ll meet a form group with ingredient sliders. This form group was initially described for the Coffee Recipe page and hence won’t be detailed again here.

Create Coffee Recipe page

Create Coffee Recipe Page (XS And SM)
Create Coffee Recipe page (XS and SM)
Create Coffee Recipe Page With Backed Up Coffee Recipe Warn Toast (XS And SM)
Backed Up Coffee Recipe Warn Toast (XS and SM)
  1. Ingredient Icon and Ingredient Label
  2. Ingredients Form Group Title
  3. Coffee Recipe Name Text Input Field:
    • Allows the specification of the coffee recipe’s name.
    • Allows only a certain amount and set of characters (tbd.). Must not be empty.
  4. Navigate Back Icon Button: Click opens the Coffee Recipes page.
  5. Page Title
  6. Discard Coffee Recipe Icon Button: Click discards the specified coffee recipe and opens the Coffee Recipes page.
  7. Save Coffee Recipe Icon Button: Click saves the specified coffee recipe and opens the Coffee Recipes page.
  8. Ingredient Slider
  9. Total Label
  10. Backed Up Coffee Recipe Warn Toast: Displayed in case there is a backed up coffee recipe.
  11. Restore Backed Up Coffee Recipe Button: Click populates the page with the backed up coffee recipe’s data.
  12. Discard Backed Up Coffee Recipe Button: Click discards the backed up coffee recipe and closes the Backed Up Coffee Recipe Warn Toast.
  13. Dismiss Button: Click closes the Backed Up Coffee Recipe Warn Toast.

Create Coffee Recipe From Copy page

This page only differs in three points from the Create Coffee Recipe page, as we see below.

Create Coffee Recipe From Copy Page (XS And SM)
Create Coffee Recipe From Copy page (XS and SM)
  1. Ingredients Form Group: Populated with the copied coffee recipe’s ingredient data.
  2. Coffee Recipe Name Text Input Field: Populated with the copied coffee recipe’s name.
  3. Page Title

Modify Coffee Recipe page

Only the Page Title makes the difference between this page and the Create Coffee Recipe From Copy page.

Modify Coffee Recipe Page (XS And SM)
Modify Coffee Recipe page (XS and SM)
  1. Page Title

Up next

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