Gallery
See what others have created
ragingbatch
@ragingbatch
Recipe Detail
Design a recipe detail screen that helps someone decide, prep, and cook without hunting for information. The page should open with the recipe name, a strong food image, and the key facts that matter most at the start: prep time, cook time, total time, servings, difficulty, and rating.
Below the hero, organize the content into clear sections: ingredients, step-by-step instructions, and any notes or substitutions. Ingredients should be easy to check off, and steps should read cleanly one at a time, with enough spacing to follow on a phone while cooking. If you include video or gallery content, keep it secondary to the recipe itself.
Add one primary action for the main task, such as saving the recipe, starting cooking mode, or adding ingredients to a shopping list. If you include a portion control tool, it should update ingredient quantities immediately and stay visible near the ingredients list. The screen should feel calm, practical, and built for use with one hand in a kitchen.
What to deliver
- Design the recipe hero with title, rating, time, servings, and primary image
- Lay out ingredients, steps, and notes in a scannable order
- Add a sticky or prominent action for saving, cooking mode, or shopping list
- Include a portion adjuster that updates ingredient amounts
- Show media support only if it helps the recipe, not as filler
Incorporate visual cues like icons or color-coding to distinguish different sections of the recipe, such as ingredients, utensils, and cooking steps.