This website allows you to create or add recipes from the web and then build meal plans from them. The meal plan calculates the total required amount for each ingredient thus allowing for easy grocery shopping.
This was my final project for the CS50x course that I took as part of my self-education. I first developed the design in Figma and then implemented it using the Flask framework on Python as well as HTML, CSS, JavaScript, and Bootstrap styles and components.
You can access the final website via http://mealplan.bogdanova.de/
All project files are available on my GitHub: https://github.com/katebogd/MealPlan
Wireframing and Low-Fidelity Prototype
I iterated through various ideas for the website layout on paper and selected the most successful options to implement in digital wireframes and a low-fidelity prototype. In addition to the flow of creating and editing recipes and meal plans, the website has registration, login, and home pages.
Digital Wireframes: Desktop Website
Mockups and High-Fidelity Prototype
To refine the visual design I developed a set of elements to use across the app: menu elements, forms, buttons, typography, and color. These elements were used to create all final mock-ups and the high-fidelity prototype.
Sticker Sheet
Mockups
