CoffeeBoy Skeleton: Mock-ups, Part V

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 Coffee Recipes page and its coffee recipe position modification feature.

Coffee Recipes page

Coffee Recipes page (XS and SM)

1. Coffee Recipes List:
   • Contains the maintainable coffee recipes.
   • A “You have no coffee recipes.” text label gets displayed if the Coffee Recipes List is empty.
2. Open Side Nav Icon Button
3. Page Title
4. Create Coffee Recipe Icon Button: Click opens the Create Coffee Recipe page.
5. Coffee Recipes List Item:
   • Displays the coffee recipe’s name and the amount of ingredients.
   • Click opens the Modify Coffee Recipe page.
   • Longpress opens the Modify Coffee Recipe Position Bottom Bar.
6. Delete Coffee Recipe Icon Button: Click deletes the coffee recipe.
7. Context Menu Icon Button:
   • Available on XS and SM screen widths.
   • Click opens a context menu with the Create Coffee Recipe From Copy Menu Item and the Modify Coffee Recipe Position Menu Item.
   • Create Coffee Recipe From Copy Menu Item: Click opens the Create Coffee Recipe From Copy page.
   • Modify Coffee Recipe Position Menu Item: Click opens the Modify Coffee Recipe Position Bottom Bar.
   • On SM, LG and XL screen widths the previously mentioned menu items get substituted by icon buttons displayed to the right of the Delete Coffee Recipe Icon Button. However, because all coffee recipe position modification functions are permanently available in the Modify Coffee Recipe Position Toolbar on LG and XL screen widths (see below), the Modify Coffee Recipe Position Icon Button does not get displayed on LG and XL screen widths at all.

Modify a coffee recipe’s position

Modify coffee recipe position (XS and SM)

Modify coffee recipe position (LG and XL)

1. Modify Coffee Recipe Position Bottom Bar:
   • Gets displayed after the user Longpressed a Coffee Recipes List Item or Clicked on the Modify Coffee Recipe Position Menu Item (as described above).
   • Contains the Coffee Recipe Position Modification Functions List.
2. Move To Bottom List Item: Click moves the coffee recipe to the bottom of the Coffee Recipes List and then closes the Modify Coffee Recipe Position Bottom Bar.
3. Move One Position Down List Item: Click moves the coffee recipe one position down and then closes the Modify Coffee Recipe Position Bottom Bar.
4. Move One Position Up List Item: Click moves the coffee recipe one position up and then closes the Modify Coffee Recipe Position Bottom Bar.
5. Move To Top List Item: Click moves the coffee recipe to the top of the Coffee Recipes List and then closes the Modify Coffee Recipe Position Bottom Bar.
6. Page Overlay: Click closes the Modify Coffee Recipe Position Bottom Bar.
7. Modify Coffee Recipe Position Toolbar:
   • Permanently displays the coffee recipe position modification functions on LG and XL screen widths.
   • The icon buttons in the toolbar are disabled as long as no list item is selected.
8. Create Coffee Recipe From Copy Icon Button: As mentioned above the Create Coffee Recipe From Copy Icon Button substitutes the Create Coffee Recipe From Copy Menu Item on MD, LG and XL screen widths.
9. Coffee Recipes List Item:
   • On LG and XL screen widths Longpress selects the list item so that its position can be modified by means of the buttons in the Modify Coffee Recipe Position Toolbar.
   • A second Longpress again deselects the list item. Also the selection of an other list item within the list automatically deselects all other list items.

Up next

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