Cameron EricksonUX/UI Designer

Made for fun · Adobe XD · Responsive experience

Recipe Tutorial Site.

A recipe and video-tutorial concept that makes it easy to browse, choose a dish, and follow along from either a laptop or phone.

← Back to Playground
Recipe Tutorial Site project overview with desktop and mobile designs

What I explored

Turn a good recipe into a good experience.

Browse

Use food imagery and cuisine categories to make inspiration feel welcoming instead of overwhelming.

Follow along

Bring video, ingredients, timing, and recipe steps into a readable hierarchy that supports cooking in the moment.

Responsive rhythm

Keep the experience consistent across desktop and mobile while adapting the content to the screen at hand.

Final design directions

A closer look at the experience.

Recipe site home page displayed on desktop and mobile
Recipe discovery across desktop and mobile.
Recipe video tutorial displayed on desktop and mobile
A detailed tutorial view for cooking along.
Recipe site chef profile displayed on desktop and mobile
Chef profiles give the community a personal layer.
Recipe tutorial detail screen with ingredients and nutritional information
Ingredients and nutrition stay visible beside the video tutorial.
Recipe tutorial detail screen with step-by-step cooking instructions
Step-by-step instructions make the recipe usable while cooking.