Website Structure, Wireframes and Prototypes
Design multi-level website structures and effective interfaces using wireframes and low-fidelity prototypes.
How to study Higher Computing Science
Move from requirements to structured designs, trace code and data precisely, and support every test or evaluation judgement with observable evidence.
Core concepts
Concept 1
The course requires a multi-level website structure with a home page and two additional levels, with no more than four pages per level.
Exam cue: Check every required page is reachable through a logical hierarchy and navigation path.
Concept 2
Wireframes consider horizontal navigation, media position, form inputs, readability and device type.
Exam cue: Place form inputs, labels and media relative to user tasks and device constraints.
Concept 3
Low-fidelity prototypes turn wireframes into simple testable representations before full implementation.
Exam cue: Use a prototype to test design assumptions without adding unnecessary visual detail.
Concept 4
Media file formats should suit text, graphics, audio or video use and delivery.
Risk pitfalls and guardrails
Drawing a flat page list when a multi-level structure is required.
Guardrail: Check route, scope, data type, boundary, loop condition, identifier and expected output before committing to the response.
Using a high-detail mock-up instead of showing layout and interaction clearly.
Guardrail: Check route, scope, data type, boundary, loop condition, identifier and expected output before committing to the response.
Ignoring media format or device type when justifying a design.
Guardrail: Check route, scope, data type, boundary, loop condition, identifier and expected output before committing to the response.
Memory anchors
Multi-level structure
A hierarchy with a home page and two further levels of linked pages.
Horizontal navigation
A consistent horizontal bar gives users direct access to key destinations.
Wireframe
A structural design showing layout, navigation, media and form positions.
Low-fidelity prototype
A simple implementation used to test structure and interaction early.
Device-aware design
Layout, readability and input controls must remain usable on the intended device type.
Media format
Choose a file format appropriate to content quality, compatibility and delivery needs.
Checkpoint rule
Do the check-up only after you can summarize each concept in one sentence and identify one dangerous pitfall from memory.
Knowledge Check (after reading)
Short check-up to confirm understanding of this module.
Check-up Questions
What is the main purpose of a low-fidelity website prototype?
A site map shows Home → Courses → Higher → Computing Science. What does this communicate?
Answer all questions to submit.
Next step personalized recommendations
Continue learning
Move forward only after this module is stable.
What is Pass Harbor?
Completely free exam prep for 247 UK exams.
- Practice questions
- Flashcards
- Study guides
- Mock exams
- No registration
- No paywall
- Start instantly
“No more expensive exam prep. Quality study tools should be accessible to everyone.”