Rotto Rocks Project Brief

Project Overview

Students can also download the combined brief and wireframes PDF for offline planning and annotation, and open the interactive wireframes when choosing a design direction.

Rotto Rocks is a fictional tourism business offering guided walking, cycling, wildlife, beach, and sunset experiences on Rottnest Island, Western Australia.

Students will use this brief to create a working five-page responsive website using structured HTML, reusable CSS patterns, accessible content, and clear page planning.

Wireframe Options

Each required page has two wireframe variations. Students should choose one variation per page before building. They may use all Variation A pages for a simpler, more conventional tourism site, all Variation B pages for a more editorial layout, or a considered mix if they can keep the final site visually consistent.

The aim is not to build both versions. The aim is to practise reading a design option, making a decision, and implementing the chosen structure clearly.

Client Brief

Target Audience and Website Goals

Required Pages

Optional Pages

• Tour detail page for one featured experience
• Gallery page
• Frequently Asked Questions page
• Responsible Tourism or Sustainability page
• Reviews or testimonials page

Sample Tour Content

Brand Direction

The visual direction should feel connected to Rottnest Island: ocean blues, warm sand, weathered rock, pale sea foam, and a restrained coral sunset accent.

Typography Suggestions

• Friendly Tourism: Montserrat headings with Open Sans body text
• Coastal Editorial: Playfair Display headings with Source Sans 3 body text
• Clean Modern: Poppins headings with Inter body text

Image Direction and Search Terms

Use images that show real places, activities, or details a visitor would care about: Rottnest beaches, coastal paths, bikes, ferries, limestone rocks, quokkas, clear water, people walking or exploring, and sunset coastline.

Reusable Component Inventory

Suggested Wireframe Sections

Use these structures as the content checklist for whichever wireframe variation you choose. The sections may be arranged differently between Variation A and Variation B.

Accessibility and Responsive Requirements

Technical Structure Options

rotto-rocks/
├── index.html
├── experiences.html
├── about.html
├── plan-your-visit.html
├── contact.html
├── assets/
│   ├── images/
│   └── icons/
├── css/
│   ├── base.css
│   ├── layout.css
│   ├── components.css
│   └── utilities.css
└── README.md

rotto-rocks-vue/
├── src/
│   ├── components/
│   ├── pages/
│   ├── data/
│   └── assets/
├── public/
└── README.md

Student Deliverables

• A working responsive website with at least the five required pages
• Consistent navigation, header, footer, section spacing, and card patterns
• Reusable layout classes or components where appropriate
• Optimised images with alt text decisions recorded
• A contact or booking enquiry form with accessible labels
• A short README explaining the project structure
• A short project reflection using the questions below

Reflection Questions

1. What content patterns appeared across the site?
2. Which sections became reusable components or shared classes?
3. How did the design change between mobile and desktop?
4. What accessibility checks did you complete?
5. What was the most difficult layout decision?
6. How did the project brief guide your design choices?
7. What would you improve if this became a real client website?

Success Criteria

• The business and tours are clearly explained
• Navigation is consistent across all pages
• Reusable components or repeated design patterns are visible
• The site works well on mobile and desktop
• HTML is semantic and content is readable
• Tour information is clear and scannable
• There is a strong enquiry or booking pathway
• The visual design feels connected to Rottnest Island and coastal tourism

Suggested Multi-Part Tutorial Sequence