Cosmoledo — Wireframes
A clickable, low-fidelity prototype of the Cosmoledo charter website. Drafted to lock in structure, content blocks, and navigation before visual design begins.
What these are
Greyscale wireframes — deliberately unfinished-looking, so feedback stays on the right things. Every page in the signed-off Statement of Work is here:
Every link works. Click around like you're using the live site.
What these are NOT
- Not the design. Colour, typography, imagery, and finish all come together in the next phase — visual design — working from these wireframes alongside the Tillburg brand book.
- Not final copy. Placeholder copy is written at the right length for each block (see word counts in the annotations) but is not the words that will appear on the live site.
- Not picture-perfect. Lines are straight enough, blocks are sized honestly. Anything looking "off" visually is intentional or beneath the level we're reviewing at this stage.
How to view
Two ways to read each page:
- Annotated view (default): yellow notes alongside each block explain what it is, what content goes there, and any decisions that need confirming.
- Clean view: hide all annotations to see the raw structure as the visitor would. Toggle with the button in the top-right of every page. The preference persists across pages.
Use annotated view for working through the structure together. Use clean view to share the structural impression with the owner or other internal stakeholders.
How to give feedback
Best feedback at this stage is on:
- Structure — does each page have the right blocks in the right order?
- Content — is any content missing? Any block we don't need?
- Page set — should any page exist that doesn't, or be merged or removed?
- Navigation — are the labels right? The order?
- Word counts — flag any block where the proposed length feels wrong.
Less useful at this stage:
- Colour, type, imagery, finish — that's for the visual design phase, and the current appearance is intentional.
- Specific copy wording — we're sizing blocks, not writing them yet.
- Spacing and exact proportions — final layout is a design decision.
Annotations sometimes ask explicit questions ("James to confirm…", "recommendation: …") — those are the highest-value items to look at first.
Print / PDF
The wireframes have a print-friendly stylesheet — Cmd/Ctrl + P from any page produces a clean PDF without the toolbar, suitable for sharing internally if a live URL isn't preferred.