Lately, I have been craving Lasagna. To be honest however, I’m not much of a chef. I wanted to take the opportunity with this activity to learn how to make Lasagna while simultaneously evaluating elements and layout of the websites for these 3 recipes using wireframes.
For starters, I went to my first website Natashas Kitchen to learn how to make Lasagna myself. I first skimmed through the website and quickly realized this website was utilizing numerous images showcasing the Lasagna and even some ingredients. However, one element that went away from the standard was more background information on the Lasagna, not necessarily explanation but rather a personal approach referring to households and school nights for this recipe.
I believe from a layout perspective the website takes its time to get to the actual recipe of the Lasagna with the background and images sort of building up to the main course (the recipe). For me, it’s a deficit clearly this format is suited for active consumers of this website and not for the casual viewer who may seek immediate results.
My top 5 most important elements on this website would have to be 1. the images, there are a lot of them but it gives many visuals that are clear and easy to see for the viewer. 2. It is titled very well for each section which is vital since this website not only supplies the recipe but other topics like storing the lasagna or a “commonly asked questions” section. 3. The directions is not ordered by numbers but rather bullet points. 4. In the right corner it clearly states the authors picture and bio. 5. Everything is contained within the text box.
The second website I visited was https://www.allrecipes.com/recipe/23600/worlds-best-lasagna/ and compared to the other website, this went straight to the point with the recipe with only one image after the Introduction. At the very top they put an image of prep time, cook time, serving sizes, and more. Their directions were also number rather than bullet points.
I like this layout it follows the common elements such as bolded titles and bolded key words. The paragraphs are 4 sentences or less. Their are images that don’t just stack the page up.
My top 5 elements for this website would be, 1. The bolded title at the top with the review boxes down below. 2. The additional information box before the text begins that included prep time, cooking time, etc. 3. Their external links that are placed well throughout the page. 4. Placing the ingredients and directions early on in the page. 5. The spacing between the text makes it feel less compact.
The final website I visited was https://www.simplyrecipes.com/recipes/lasagna/. The title, reviews, synopsis, and author are all very well laid out at the top. There’s an image at the top of the page and below their’s a preview box of what is contained in the recipe. The layout is very common and similar to the other websites.
I would say this layout is good. The elements are spaced properly and the images are placed in the right positions.
My top 5 elements from this website is 1. The color coordination on the website and it is easy to view. 2. External links and bolded titles to separate sections is done good. 3. The directions are numbered instead of bullet points . 4. The link to the author is properly sized. 5. The hierarchy from Title to body text is good.