The idea for my final project stemmed from an issue I came across in my personal life. At the moment, I'm trying to learn how to be a better cook and Im learning to expand the variety of recipes that I'm attempting. The main issue I've come across with my experience is that websites and web pages dedicated to teaching the user how to cook have a variety of problems. I think many of them are overcomplicated visually and might not be easy to follow for the average user. What I'm trying to do with my project is make a website that not only teaches the user how to cook various recipes, but to do so in a way that's easy to follow and not visually distracting.
The main way I have each recipe page set up is that I have a cutting board set in the middle, a button to actually cook the recipe, and various ingredients surrounding the cutting board. The use of color in each of these recipe pages is very sparse. This is because I want the primary source of color to be each of the ingredients as well as the final image of the meal. Each circle containing the ingredients has a hover state attached to it. Upon hovering, the user can read not only how much of the particular ingredient they need for the recipe, but how they need to prepare it as well. Once they're done reading the information for each ingredient, the user can click on the ingredients, which places their pictures on the cutting board. This mirrors what the user's real life cutting board may look like. Once the user clicks the "Cook!" button to see the finished product, they can either return to the main page or cycle to a different recipe using the arrows on either side of a page.