Web Wireframe

Mobile Wireframe

notes(reference web wireframe)

1. Background for title is a semi-transparent background image of a shepherd's pie
2. Shows 3 most relevant pieces information quickly
3. Description should fully fit in box - which will be a slightly darker color than the background color
4. Each section has a title with a bar similar to windows on a computer
5. Sliders on the side that open when bolded words in ingredients -and instructions- are clicked. Sliders are relevant for substitutes or side notes - to make text more concise.
6. Checkboxes on left side for user to check off ingredients that they have
7. Image carousel featuring images that people have made from this recipe - variations to inspire ideas
8. Tutorial video explaining how to make shepherd's pie
9. Sliders present for prep and cook steps.