Figma UI Mockups - CMPUT301F22T20/Team20 GitHub Wiki

This is the user interface mockups for the app.

Design choices

  • Add for list view pages will be in the top corner on the title row
  • Delete and edit for lists
    • If we have a lot of information we will use a new page with an edit button in the bottom corner
    • If we have less information we can put it in an expand under the row
  • Bottom bar should be present in all main list view pages

Main Screen

Main Menu

Ingredient Storage

Empty Ingredient List

Ingredient List

Add Ingredient Dialog

Add Location

Add Category

Expand Ingredient

Deleted Ingredient

Ingredient Sort

Edit Ingredient Dialog

Ingredients Story Board

Recipes

Empty Recipe List

Recipe List Populated

Recipe List Sort

Add Recipe

Add Recipe Scroll Down

Add Recipe Ingredient

Recipe Details

Edit Recipe

Edit Recipe - Scroll Down

Recipes Story Board

Meal Plan

Meal Plan Main

Meal Plan Deleted Day

Meal plan main

Add to Meal Plan

Add Day

Meal Plan Added Day

Create Meal Plan

Empty Meal Plan

Select Ingredient

Add New Ingredient

Scale Ingredient

Meal Plan Added Ingredient

Select Recipe

Scale Recipe

Meal Plan Added Recipe

Recipe Details

Scale Recipe (1)

Meal Plan Story Board

Shopping List

Shopping List Empty

Shopping List Populated

Shopping List Sort

Shopping List Checked Ingredient

Shopping List Ingredient Added to Storage

Shopping List Story Board

Storyboard

Food Tracker Story Board

⚠️ **GitHub.com Fallback** ⚠️