Recipe Page - Research (Beef Wellington)

Beef Wellington is a classic dish made by wrapping a beef tenderloin in mushroom duxelles, prosciutto, and puff pastry, then baking it until golden. The goal is to keep the beef tender and medium-rare while achieving crisp pastry.


Ingredients

Instructions

  1. Season and sear the beef on all sides in hot oil. Let cool completely.
  2. Brush the beef with Dijon mustard and chill.
  3. Cook mushrooms, shallots, garlic, and butter until completely dry.
  4. Lay prosciutto on plastic wrap, spread mushrooms on top, then wrap the beef tightly.
  5. Wrap the beef in puff pastry and seal the edges.
  6. Brush with egg wash and bake at 425°F (220°C) until golden.
  7. Rest for 10–15 minutes before slicing.

Source attribution: Recipe summarized from Gordon Ramsay and Food Network


Sample Imagery

Whole Beef Wellington

Beef Wellington hero image

Cooking mushroom duxelles

Cooking mushroom duxelles

Sliced Beef Wellington

Sliced Beef Wellington

Recipe Website References

Gordon Ramsay – Beef Wellington

This page is clean and direct, with ingredients and instructions clearly separated. Ingredients listed on the left, steps on the right. There are no distracting ads, and the layout makes it easy to follow each step with the bolded numbers.

Food Network – The Ultimate Beef Wellington

The recipe begins with a helpful video and quick overview of difficulty, time, and serving size. The downside is that the ingredient list appears after the instructions, which is not user friendly since people usually start by reading the ingredients.

BBC Good Food – Beef Wellington

This site has a strong layout with a video and summary information at the top. However, the amount of ads interrupt the reading and reduces clarity.


Non-Recipe Design References

Mobalytics TFT Comp Guide

The TFT website is a great example and can be implemented in a recipe website. It has general info on the top followed by early and mid game plan, each has its unique section. What I want to get out of this website is how they managed to section different kinds of information and placed them effectively on the screen.

Porsche 911 Carrera Model Page

This site is a great example of good image placement with text. Large images are used as visual anchors, and sections often place text near or on top of imagery. The overlaps and spacing make the page feel premium and dynamic while still being readable and not crowded.

Apple iPhone

Apple’s product page is a clear example of strong visual communication. Each section focuses on one message at a time with large imagery and short text. I want to borrow this one idea per section structure to make recipe steps feel less overwhelming and easier for users to to follow.