top of page

What are the layout design errors on this webpage?

4.JPG

Blueberry Lemon

Cake Shop

Trafiq specializes in delicious layered cakes. We begin with perfectly baked bases, then, delicately layer with light and creamy mousses and swirls of vibrant fruit curds; we finish them in silky chocolate ganaches, elegant glazes and light whip creams.

From our soft & gooey Schenckens (original cinnamon buns) to our perfectly baked double chocolate chip cookies, all of our pastries are baked fresh every day.  Pre-order and we will have them packed and ready when you arrive

This reimagined classic features layers of chocolate, vanilla, and strawberry cake, harmoniously intertwined with decadent chocolate, vanilla, and strawberry mousse.

 

We believe this beautiful cake will be a delightful addition to your table and impress your guests

Cake 1.  cake2          cake3                                           cake4                       cake5

3_edited_edited_edited.jpg

Chocolate Brulee

Vanilla cake, light wild blueberry mousse and swirls of lemon namelaka.  Finished with  lemon whipped cream.

At first the lightness of the wild blueberry cream and the hints of floral vanilla notes entices your senses and then the power of the lemon curd, with its tartness awaken all your tastebuds.   Every bite encourages another until its all gone.

 

  • We require 48 hours Notice for all cake pre-orders. If you have any dietary concerns pleas

2.jpg

Blueberry Lemon

Triple chocolate-Caramel mousse, swirls of salted Dulce de Leche, vanilla cake and salted caramel whipped cream

A combination that juxtaposes the sweetness of the caramel, the delightful sparkles of salt and the creaminess of dark and milk chocolates.  An awakening of the senses in both in its creamy light texture as well as the intensity of its flavours make this a Trafiq favorite.

1.jpg

Cake 1.  cake2          cake3                                           cake4                       cake5

Layout and Design

Graphic Elements

1. Color

  • Color harmony: Choose a consistent palette (primary, secondary, accent).

  • Contrast: Ensure sufficient contrast between text and background for readability.

  • Brand alignment: Colors should reflect the brand identity and mood.

  • Emphasis: Use color to highlight or key areas.

2. Images & Illustrations

  • Quality: Use high-resolution images, but optimized for web (small file size).

  • Relevance: Images should support content — not distract from it.

  • Consistency: Use a coherent style (same tone, filters, or illustration type).

  • Composition: Mind cropping, focus, and alignment with surrounding text.

  • Responsiveness: Ensure images scale or crop well on mobile.

  • Alt text: Add descriptive alt text for accessibility.

3. Icons & Graphics

  • Purpose: Use icons to support text, not replace it entirely.

  • Consistency: Match icon style (filled, outline, flat, etc.) across the site.

  • Simplicity: Avoid overly detailed graphics; clarity > decoration.

  • Alignment: Maintain even spacing and size relative to text and other visuals.

4. Layout & Composition

  • Balance: Distribute graphics evenly to avoid visual heaviness on one side.

  • Whitespace: Leave breathing space around text and images.

  • Hierarchy: Use size, color, and positioning to guide the user’s attention.

  • Alignment: Stick to a grid — edges of images and text should line up cleanly.

​​

Text Elements

1. Typography

  • Font choice: Use 1–2 complementary fonts (e.g., one for headings, one for body).

  • Readability: Avoid overly decorative fonts for main content.

  • Hierarchy: Establish clear differences between H1, H2, H3, body, etc.

  • Size & spacing:

    • Headings: 1.5–2× larger than body text

    • Line spacing: ~1.4× line height of font size

    • Paragraph spacing: consistent but distinct

  • Consistency: Same font sizes and weights across similar elements.

2. Text Alignment & Layout

  • Alignment: Left-aligned text is most readable (avoid full justification online).

  • Line length: Keep to 50–75 characters per line for body text.

  • Contrast: Dark text on light background (or vice versa).

  • Hierarchy: Headings, subheadings, and paragraph styles guide scanning.

  • Responsive scaling: Font sizes should adapt to different screen widths.

3. Tone & Content Presentation

  • Clarity: Short, direct sentences; avoid jargon when possible.

  • Scannability: Use bullet points, bold keywords, and subheadings.

  • Call-to-Action: Highlight CTAs visually (button + color + concise text).

  • Consistency: Maintain the same tone and writing style across the site.

4. Interaction Between Text & Graphics

  • Visual flow: Images should lead the eye naturally toward related text.

  • Contrast balance: Avoid busy backgrounds behind text.

  • Spacing: Leave enough margin between images and text blocks.

  • Alignment: Text should align with visual elements (grid alignment).

Layout Exercise/Quiz

​

 

What are the layout design errors on this webpage?

​​

Read and use the layout and design information to

List 10 errors of the above web page

​

Write down your Name/ Class/ Date on the quiz paper

​

​

​

bottom of page