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 List:
- Contains the maintainable coffee recipes.
- A “You have no coffee recipes.” text label gets displayed if the Coffee Recipes List is empty.
- Open Side Nav Icon Button
- Page Title
- Create Coffee Recipe Icon Button:
Click
opens the Create Coffee Recipe page. - 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.
- Delete Coffee Recipe Icon Button:
Click
deletes the coffee recipe. - 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 Bottom Bar:
- Gets displayed after the user
Longpressed
a Coffee Recipes List Item orClicked
on the Modify Coffee Recipe Position Menu Item (as described above). - Contains the Coffee Recipe Position Modification Functions List.
- Gets displayed after the user
- 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. - Move One Position Down List Item:
Click
moves the coffee recipe one position down and then closes the Modify Coffee Recipe Position Bottom Bar. - Move One Position Up List Item:
Click
moves the coffee recipe one position up and then closes the Modify Coffee Recipe Position Bottom Bar. - 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. - Page Overlay:
Click
closes the Modify Coffee Recipe Position Bottom Bar. - 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.
- 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.
- 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.
- On LG and XL screen widths
Up next
In the next post we’ll go on with the creation of mock-ups. Stay tuned!