Project Goal
Turn a client brief, branding direction, and wireframes into a calm, premium site.
GraphitEdge Guided Project
Black Swan Bistro Project Brief
A premium restaurant website brief for building layout, reusable components, and a consistent multi-page site.
Project Overview
Build a multi-page restaurant website that evolves from a static layout into a reusable, scalable site. This project simulates a real client brief and introduces a more professional design-to-code workflow than a one-page exercise.
What You Will Practise
HTML structure, CSS layout, reusable components, and multi-page consistency.
Working Habit
Read the brief before coding so your layout decisions come from the project goals.
How to Use This Brief
- Read the project brief.
- Review the wireframes.
- Build the HTML structure.
- Apply layout with CSS.
- Identify reusable components.
- Expand to a multi-page site.
Treat this page like a real project reference. Return to it while working through Parts 2, 3, and 4 so your decisions stay connected to the client goals instead of becoming random one-off code changes.
The Client
Black Swan Bistro is a modern Australian restaurant focused on seasonal ingredients and relaxed dining.
- Audience: locals, couples, and tourists
- Tone: warm, modern, premium
- Main need: a polished website that feels trustworthy and easy to browse
Branding & Design Direction
Logo
Use the supplied Black Swan Bistro logo as the brand anchor in the header and footer.
Colour palette
Deep charcoal, warm gold accents, and soft neutral backgrounds.
Typography
Elegant serif headings with a clean sans-serif body style.
Spacing
Generous whitespace to create a premium feel and reduce visual noise.
Brand Palette
Use these values to keep your project work consistent. Start with the hex codes in your CSS, and use the RGBA value when you need a transparent overlay.
Deep Charcoal
Primary text, strong dividers, and dark footer areas.
Hex: #2f2923
RGB: rgb(47, 41, 35)
Warm Gold
Accent colour for headings, highlights, and restrained emphasis.
Hex: #8d6c24
RGB: rgb(141, 108, 36)
Soft Cream
Main page background and light section surfaces.
Hex: #fcfaf5
RGB: rgb(252, 250, 245)
Warm Sand
Borders, secondary surfaces, and quiet supporting blocks.
Hex: #d8cfbf
RGB: rgb(216, 207, 191)
Muted Stone
Body copy, supporting labels, and lower-emphasis text.
Hex: #5f564c
RGB: rgb(95, 86, 76)
Charcoal Overlay
Optional overlay for banners or image areas when contrast is needed.
Hex: #2f2923
RGBA: rgba(47, 41, 35, 0.72)
Wireframes
These wireframe panels are a closer adaptation of the supplied handoff artboards. They show the stronger desktop and mobile structure students should follow while building the project.
Hero / banner Content section Media / supporting block Reusable / implementation note
Home Page
Homepage Layout
Desktop
Black Swan BistroHomeMenuAboutContact
Hero section
Full-width imageTagline + subheadingPrimary reserve CTA
The handoff hero uses a dark image overlay and centred call to action.
Featured dishes
3-column cardsFood imagePriceOrder button
About preview
Image leftText rightRead More link
CTA banner
Primary gold CTASecondary outline CTA
Newsletter strip
TaglineEmail fieldSubscribe button
Footer
Logo + addressNavigationHoursSocial linksCopyright bar
Mobile
BSBHero section
Stacked headingReserve CTA
Featured dishes
Single-column cardsCompact image + text
About preview
Image above text
CTA banner
Buttons stack vertically
Footer
Condensed brand + nav footer
Menu Page
Menu Layout
Desktop
Black Swan BistroHomeMenuAboutContact
Page title banner
Our MenuSubtitle / tone line
Category tabs
AllMainsSaladsDrinksDesserts
The handoff shows pill filters with one active state.
Menu cards
3-column gridCategory badgeImageDescriptionPriceAdd to order
Footer
Shared footer component
Mobile
BSBPage title banner
Compact banner
Category tabs
Horizontal scroll pill filters
Menu cards
Single-column card stackSame content as desktop
Footer
Shared footer component
About Page
About Layout
Desktop
Black Swan BistroHomeMenuAboutContact
Hero banner
Full-width image overlayAbout Us title
Story section
Centred text blockDecorative underline
Image + text split
Text leftImage rightTwo CTA buttons
Values / stats strip
100% locally sourcedChef ownedEst. 2018
Meet the team
3 profile cardsCircular photo placeholders
Testimonial / quote
Dark quote stripAttribution
CTA banner + footer
Practical CTAShared footer component
Mobile
BSBHero banner
Compact image banner
Story section
Centred text block
Image + text split
Stacks image above text
Values strip
Single-column value items
Footer
Shared footer component
Contact Page
Contact Layout
Desktop
Black Swan BistroHomeMenuAboutContact
Page title banner
Get In TouchSupporting subtitle
Contact details
AddressPhoneEmail
Opening hours
Alternating rows tableDaily hours
Map placeholder
Embedded map areaPinned address label
Contact form
NameEmailMessageSend button
Footer
Shared footer component
Mobile
BSBTitle + contact details
Compact title bannerAddress / phone / email list
Opening hours
Stacked hours rows
Map placeholder
Single-column map block
Contact form
Full-width stacked form
Footer
Shared footer component
Content Pack
Core site content
- Navigation: Home, Menu, About, Contact
- Menu item: Barramundi - Lemon butter sauce - $28
- Menu item: Steak Sandwich - With chips - $22
- Menu item: Garden Salad - Seasonal greens - $14
- Contact: 123 Coastal Rd, Perth WA
- Phone: (08) 1234 5678
- Hours: 9am - 9pm daily
Page purposes
- Home: introduce the bistro and drive reservations
- Menu: display dishes with clear categories
- About: tell the story and build trust
- Contact: provide practical details and a clear way to reach out
Images & Media Guidance
- Use free sources such as Unsplash or Pexels for food and interior photography.
- Helpful search terms include “restaurant food plating” and “modern restaurant interior”.
- Hero images should support the premium tone without overpowering the content hierarchy.
- Menu and gallery images should feel consistent, not like random stock placeholders.
- Canva AI can be used for hero visuals, menu item imagery, or social preview graphics.
Reusable Components / Component Inventory
Header
Reusable logo and navigation structure shared across all pages.
Footer
Repeated footer with brand details, navigation, hours, and supporting links.
Menu Card
Card pattern used for featured dishes and the full menu listing.
Section Heading
Consistent heading treatment that keeps page hierarchy readable.
CTA Button
Primary and secondary button styles used across hero and call-to-action sections.
Contact Detail Row
Repeated icon-label-value rows for practical contact information.
Technical Scope
Part 1
HTML structure
Build the semantic page structure and organise the core content blocks.
Part 2
CSS layout
Use the brief and wireframes to shape spacing, hierarchy, and page layout.
Part 3
Reusable components
Identify repeated sections and turn them into consistent reusable patterns.
Part 4
Multi-page structure
Expand the project into a consistent site with shared layout decisions across pages.
Developer Thinking Prompts
- What sections repeat across pages?
- What can become reusable?
- How does layout change across screen sizes?
Success Criteria
- Functional multi-page site
- Consistent layout and styling
- Reusable components implemented
Reflection Questions
- What did you learn about layout?
- What patterns did you reuse?
- What would you improve next?