Rotto Rocks · Wireframes

Home page

Introduce Rotto Rocks and guide users to key experiences. Two layout directions explore how to balance the coastal imagery with practical tour discovery.

Sections: hero · intro · featured tours · why us · highlights · testimonial · CTA

How to read these: grey blocks are images, lines are text, the coral button is the primary CTA. Side notes in coral handwriting flag reusable components and layout decisions worth thinking about.

Variation A

Classic hero, scannable tour grid

Big image-led hero followed by a 3-up featured tours grid. Familiar tourism layout — easy for first-time visitors to scan.

Desktop · 1440

Explore tours

Enquire

View all →

Wadjemup Highlights

2hr Easy

Beaches & Bays

½ day Moderate

Quokka Discovery

90m Easy

Mobile · 375

Explore tours

2hrEasy

½dMod

90mEasy

a. Full-bleed hero image places brand atmosphere first — consider how much text overlays the image.
b. Featured tours = 3-up Tour card component, reused on Experiences page.
c. Why-us strip = 4-up Feature card component (icon + heading + small text).
d. Mobile collapses everything to single-column; nav uses burger menu.

Variation B

Editorial split hero, story-driven flow

Title sits beside the imagery rather than over it. Tours appear as a horizontal scroll; highlights alternate image/text rows like a magazine article.

Desktop · 1440

Rottnest Island

Explore tours

Plan your visit

Mobile · 375

Rottnest Island

Explore tours

Plan your visit

Book a tour

a. Split hero gives more breathing room to copy — works well when the headline is the hook.
b. Horizontal scroll tours show "there's more" — but reconsider on mobile if scroll affordance isn't obvious.
c. Alternating image/text rows reuse a single Content section component flipped left/right.
d. Accent-coloured CTA strip near the footer keeps booking visible after long scroll.

Experiences / Tours

Present available tours in a clear, scannable layout. Help visitors compare by duration, activity level, and interest before booking.

Sections: intro · tour grid · comparison · booking CTA

Variation A

Filter chips + 2×2 tour grid

A catalog-style layout. Filter chips at the top let visitors narrow by activity; a uniform grid below makes tours easy to compare at a glance.

Desktop · 1440

HOME › EXPERIENCES

FILTER: All Walking Cycling Wildlife Sunset Family

Sort: Duration ▾

Wadjemup Highlights Walk2 hr

EasyFirst-time visitors

from $—

View tour

Beaches & Bays Cycling½ day

ModerateActive visitors

from $—

View tour

Quokka & Coastal Discovery90 min

EasyWildlife lovers

from $—

View tour

Sunset Rocks Experience2.5 hr

Easy–ModCouples

from $—

View tour

Tour	Duration	Activity	Best for	Group size
Wadjemup Highlights	2 hr	Easy	First-timers, families	≤ 10
Beaches & Bays Cycling	½ day	Moderate	Active, couples	≤ 8
Quokka Discovery	90 min	Easy	Families, wildlife	≤ 10
Sunset Rocks	2.5 hr	Easy–Mod	Couples, photographers	≤ 8

Mobile · 375

‹ HOME

All Walk Cycle Wild Sun

Wadjemup Walk2hr

Easy

Beaches & Bays½d

Mod

Quokka Discovery90m

Easy

Sunset Rocks2.5h

E-M

Tap to expand table ↓

a. Filter chips above the grid are quick to scan and easy to make keyboard-accessible.
b. Comparison table is the structured-data take — best for analytical visitors; on mobile, becomes a tap-to-expand.
c. Same Tour card as Home — students see the value of reusable components here.

Variation B

Sidebar filters + detailed list view

Filters live in a sidebar so visitors can drill down by activity, duration, group, or accessibility. Tours show as wide list cards with more detail.

Desktop · 1440

HOME › EXPERIENCES

4 TOURS Sort: Duration ▾

Wadjemup Highlights Walk2 hr · Easy

FamiliesHistoryBeaches

Mon–Sun · ≤ 10 pax

View tour

Beaches & Bays Cycling½ day · Moderate

ActiveCouplesBays

Wed–Sun · ≤ 8 pax

View tour

Quokka & Coastal Discovery90 min · Easy

FamiliesWildlife

Daily · ≤ 10 pax

View tour

Sunset Rocks Experience2.5 hr · Easy–Mod

CouplesPhotography

Fri–Sun · ≤ 8 pax

View tour

Mobile · 375

‹ HOME

Filters (3)

Sort ▾

Wadjemup Walk2hr

EasyFamily

Beaches & Bays½d

ModCouples

Quokka Discovery90m

EasyWild

Sunset Rocks2.5h

Photo

a. Sidebar filters scale up well — but on mobile they collapse to a "Filters" sheet/drawer.
b. Wide list cards give room for more chips, group size, and schedule notes.
c. Consider whether students should build the slider/checkbox controls themselves or use native inputs styled with CSS.

About Rotto Rocks

Build trust and explain the values behind the business — story, guide expertise, slow tourism, sustainability, small-group benefits.

Sections: story · guide · values · sustainability · CTA

Variation A

Story-led, values strip, founder photo

Linear narrative: hero → story → values → sustainability → call to action. Trust built through consistent rhythm and a clear founder voice.

Desktop · 1440

OUR STORY

RESPONSIBLE TOURISM

Leave no traceSmall groupsLocal guides

Meet your guide — Helen

Mobile · 375

OUR STORY

RESPONSIBLE TOURISM

Meet Helen

a. Two-column story keeps reading rhythm comfortable on desktop; stacks on mobile.
b. Values strip reuses the Feature card component from Home.
c. Founder card uses the coral surface to draw the eye without a separate hero.

Variation B

Magazine-style alternating sections

A pull-quote anchors the page; content unfolds in alternating image-text rows. Closer to long-form editorial than tourism marketing.

Desktop · 1440

ABOUT ROTTO ROCKS

— Helen Burgess, founder

01 · BEGINNINGS

02 · SLOW TOURISM

03 · WILDLIFE FIRST

Lead guide

Cycling guide

Mobile · 375

ABOUT

— Helen

01 · BEGINNINGS

02 · SLOW TOURISM

03 · WILDLIFE FIRST

Lead guide

Cycling guide

a. Numbered chapters make a long page feel like a walk — good fit for slow-tourism positioning.
b. Alternating image/text row is one component flipped — a great refactor example for students.
c. Coral CTA strip closes the page with a soft hand-off to "Plan your visit".

Plan Your Visit

Help visitors prepare for their Rottnest Island experience — what to bring, getting there, weather, accessibility, safety, FAQs.

Sections: quick info · what to bring · getting there · safety · FAQ

Variation A

Quick-info strip → checklists → FAQ accordion

Top-of-page summary chips answer the most common questions instantly. Below, structured content blocks invite deeper reading.

Desktop · 1440

HOME › PLAN YOUR VISIT

Getting there

Best season

Weather

Accessibility

Book ferry

Meet your guide

Start exploring

SAFETY & WEATHER

−

Mobile · 375

‹ HOME

Getting there

Best season

Weather

Accessibility

Book ferry

Meet guide

Start exploring

a. Quick-info chips at the top answer the four most-asked questions before any scrolling.
b. Numbered Feature cards reuse the same shell as values/why-us — just with a number badge.
c. FAQ uses a basic <details>/<summary> accordion — keyboard-accessible by default.

Variation B

In-page nav + scrollable sections

A sticky table of contents on the side, with long-form sections beside it. Better when the page grows past a quick reference.

Desktop · 1440

HOME › PLAN YOUR VISIT

01 · GETTING THERE

Fremantle ferryPerth ferryHillarys ferry

02 · WHAT TO BRING

03 · WEATHER & SAFETY

04 · ACCESSIBILITY

05 · FAQ

Mobile · 375

‹ HOME

ON THIS PAGE

Getting there What to bring Weather Access FAQ

01 · GETTING THERE

02 · WHAT TO BRING

03 · WEATHER

04 · FAQ

a. Sticky in-page nav improves orientation on a long page — but only at desktop widths.
b. Mobile collapses the side nav to a chip strip — students learn the same content, two layouts.
c. Numbered sections (01, 02…) re-use a single section-header pattern.

Contact / Booking Enquiry

Let users enquire about a tour — form, booking details, phone/email, social links, ferry/location notes.

Sections: page intro · form · contact info · ferry/location

Variation A

Form first, info beside

Two-column layout with the booking form on the left and contact/location info on the right. Conventional, low-friction.

Desktop · 1440

HOME › CONTACT

Booking enquiry

Name

Tour

Preferred date

Group size

Notes

Send enquiry

Save as draft

Get in touch

Meeting point

Mobile · 375

‹ HOME

Booking enquiry

Name

Tour

Date

Group size

Notes

Send enquiry

Get in touch

Meeting point

a. Form on the left = primary action visible first; info on the right is supporting.
b. All inputs have label + input in a single component — students should reuse this pattern.
c. Mobile stacks the columns but keeps the same field order so muscle memory carries over.

Variation B

Friendly hello, contact cards, centered form

Lead with warm copy and three contact-method cards. The form sits below as one of several ways to get in touch — fits a low-pressure brand voice.

Desktop · 1440

SAY HELLO

Call us

Call

Email us

DM us

OR · SEND AN ENQUIRY

Name

Tour interest

Tell us a bit more

Send enquiry

MEETING POINT

Fremantle ferryHillarys ferry

Mobile · 375

SAY HELLO

Call

DM us

SEND AN ENQUIRY

Name

Tour interest

Tell us more

Send enquiry

MEETING POINT

a. Offering three contact methods upfront respects how different visitors prefer to reach out.
b. Centered narrow form (max-width ~520px) keeps line lengths comfortable — also reusable on a newsletter signup.
c. Meeting-point card finishes the page with practical, location-grounded reassurance.

Reusable components

Eight building blocks from the brief, drawn in isolation so they can be designed once and used everywhere. The whole point of a component library: change in one place, update everywhere.

Header · Hero · Tour card · Feature card · Content section · CTA banner · Footer · Contact form

Refactor tip: when you build the pages, repeat first — copy/paste freely. Then look for the repetition and move it into a single CSS class or HTML partial. That's the lesson Part 4 of the tutorial sequence is teaching.

01 · Header / Navigation

Site header

Sits at the top of every page. Logo on the left, primary nav, single accent CTA on the right. Collapses to a burger on mobile.

Used on: every page · HTML: <header> with <nav> inside · A11y: include a skip link, mark current page with aria-current.

02 · Hero section

Page hero

Two variants: full-bleed image with overlaid title (atmospheric) or split text + image (editorial). Pick one per page; don't mix.

CTA

Eyebrow

CTA

Used on: Home, About (full-bleed) · Experiences, Plan, Contact (slim variant) · A11y: ensure overlaid text has 4.5:1 contrast against the image.

03 · Tour card

Tour card

The single most-reused block on the site. Image, title, duration + activity chips, short description, action.

Wadjemup Walk2 hr

EasyFamily

View tour

Beaches & Bays½ day

Moderate

Variants: vertical (grid view) · horizontal (list view) — same fields, different layout. HTML: <article> wrapping <h3> + image + content.

04 · Feature card

Feature card

Icon + short heading + supporting text. Appears in "why us", "values", "what to bring", and quick-info strips.

Numbered

Variants: with icon · with number badge (for steps) · with image (sustainability section). One CSS class, three modifiers.

05 · Content section

Image + text row

A 50/50 row with image on one side and text on the other. Flip the direction in CSS for alternating layouts.

EYEBROW

Refactor: one component, two modifiers (.row--reverse, .row--accent). Stacks to single column under 768px.

06 · CTA banner

Call-to-action banner

Closes most pages. Heading + supporting line + button. Use sparingly — one per page.

Variants: dark surface (high contrast) · coral surface (warmer end-of-page). Pick one tone per page so the eye knows where the CTA is.

07 · Footer

Site footer

Four-column on desktop: brand + tagline, primary links, secondary links, socials. Collapses to single column on mobile.

HTML: <footer> with nested <nav>s. A11y: social links need descriptive labels (aria-label="Rotto Rocks on Instagram"), not just icons.

08 · Contact form

Booking enquiry form

Eight fields: name, email, tour, date, group size, notes, consent, submit. Two columns on desktop, one on mobile.

Name

Tour

Date

Group

Notes

Send enquiry

A11y: every <label> connected to its input via for/id. Visible focus states. Required fields marked with text, not colour alone.

Rotto Rocks · wireframes · low-fi layouts to plan structure, content, and reusable components before writing HTML & CSS.