Interactive Design / Exercise 3 - Creating a Recipe Card
02.11.2025 / Week 6
GeXianjing / 0377636
Interactive Media /Bachelor of Interactive Spatial Design (Honours)
🍞 Simple Bruschetta — My Recipe Webpage Design Journey
Assignment Overview
For this exercise, our task was to create a Recipe Card webpage using basic HTML and CSS.
The goal was not only to display text and images, but also to practice combining layout, font selection, and color harmony to create an attractive, functional page.
The assignment emphasized creativity in design while maintaining clean structure and readability.
Why I Chose Simple Bruschetta
For my project, I decided to design a webpage based on the recipe Simple Bruschetta.
I chose this recipe because it’s clear, concise, and visually rich — the vibrant tomatoes, basil leaves, and toasted bread create a warm and natural palette that fits perfectly with a food-themed design.
I referred to the “Simple Bruschetta” article on the 101 Cookbooks website, and adapted its text and structure to suit my own webpage layout.
What I wanted to express through this project was a sense of freshness and lightness, similar to summer afternoons when you prepare simple food with good ingredients.
I focused on creating a soft, natural tone that reflects both the aesthetic and the flavor of the dish.
Picture material
My Writing and Content Organization
While writing the webpage, I divided the text into several clear sections:
-
Introduction — A short overview explaining the background of the dish and why I selected it.
-
Ingredients — A complete list of items with small helpful notes, such as how to pick the best tomatoes or choose the right vinegar.
-
Instructions — Three main steps with corresponding images beside each description.
-
Variations — Seasonal versions of the dish for spring or winter.
-
Closing Notes — A short reflection to make the reading experience feel complete.
I tried to keep the tone friendly and blog-like rather than overly formal, so that readers would feel like they were reading a personal cooking note rather than a technical report.
Font and Visual Expression
When designing the visual identity of the page, I wanted the typography to feel modern yet warm.
I used fonts from Google Fonts:
-
Title Font (H1/H2): Bebas Neue — strong geometric form and tall letter height, ideal for headings and food-related designs.
Title Font
-
Body Font: Josefin Sans — clean spacing and comfortable to read; it complements the bright imagery and soft background colors.
Body Font
- H1 size: 56 – 96 px (responsive)
- H2 size: 32 – 40 px
- Body: 16 – 18 px font size, line-height 1.65 – 1.8
- Paragraph spacing: 8–12 px before / 12–16 px after
Color Palette
Accent Color: #D35400 — a warm orange tone inspired by toasted bread and olive oil.
Text (Ink): #222 — dark gray for strong readability.
Divider/Card Edge: #FFE1C9 — creamy beige lines.
Highlight Blue (Secondary): #0F3A63 — used for subheadings or labels to balance warm tones.
Card Background: white with 92 % opacity and soft shadow to create card-like depth.
Color variables are managed through the :root selector, allowing easy global adjustment later on.
 |
| color |
- Fixing image height using object-fit: cover
 |
| Before |
 |
| Now |
- Adjusting table cell padding and line height
 |
| Before |
 |
| Now |
- Trying responsive grid instead of fixed two-column tables
- Added a fixed navigation bar with smooth scrolling and auto-highlight for each section.
 |
| navigation bar |
- Standardized all images to the same aspect ratio to keep the layout consistent.
 |
| Before |
 |
| Now |
- Refined the Nutrition & Storage section into a well-aligned table, ensuring accessibility and visual balance.
 |
| Now |
 |
| Now |
1. Project Reflection
This exercise allowed me to experience how HTML and CSS can transform simple written content into a visually structured and meaningful design. While working on the recipe card, I realized that coding is not only about technical accuracy — it’s also about visual storytelling. Every spacing, border, and color tone contributes to how users perceive the overall atmosphere of a page.
At first, I found it challenging to manage two separate CSS files (style_new.css and style_recipe.css) and ensure they worked together properly. However, through this process, I learned the importance of modular design — separating experimental styling from layout structure can make the code cleaner and more efficient to debug.
I also paid attention to semantic structure in HTML, such as the use of <section>, <figure>, and <figcaption>. These tags made the webpage more organized, easier to read, and more accessible. When adding my recipe content and images, I started to understand how visual hierarchy helps the audience quickly grasp key information like preparation time, ingredients, and cooking steps.
2. What I Learned
Throughout this project, I learned to:
-
Use CSS variables (
:root { --accent: ... }) to maintain consistent color palettes. -
Apply responsive design techniques such as
max-width,flex, andgridfor better adaptability. -
Organize and rename image files properly for a professional workflow.
-
Combine aesthetic choices (fonts, colors, spacing) with functional structure.
-
Embed interactive components such as Google Maps and contact forms, enhancing user experience.
Moreover, I improved my understanding of how CSS cascade and specificity work — sometimes a small misplaced bracket {} or a missing semicolon can break an entire layout. Learning to debug such issues in Dreamweaver helped me build stronger attention to detail.
3.Personal Reflection
What I enjoyed the most was designing something that connects culinary art and visual design. The recipe itself felt like a design composition — mixing textures, colors, and typography to convey warmth and simplicity. The final layout not only showcases my technical learning but also reflects my creative side.
If I had more time, I would like to explore CSS transitions and animations to make the image sections or buttons more dynamic. I also want to experiment with responsive breakpoints to optimize the design for mobile viewing.
4.Conclusion
Through this exercise, I learned that web design is not only coding — it is communication. Every tag, color, and margin represents a choice in how we present information and emotion to users. The process taught me patience, precision, and the beauty of balance between structure and aesthetics.
“A good web design feels natural, not because it’s simple — but because every detail is carefully designed to make it so.”
Video
Deploy the exercise in Netlify
 |
| https://exercise3-gexianjing0377636.netlify.app/ |
This is another design method used in class, but it is not within the scope of this assignment and is only recorded
Comments
Post a Comment