How do you plan a website's purpose, structure and layout before building it?
Analysing a website's purpose and functional requirements, and designing its structure and interface using a site structure diagram, wireframes and a low-fidelity prototype.
An SQA Higher Computing Science answer on web analysis and design, covering a website's purpose and functional requirements, the site structure diagram, wireframes and a low-fidelity prototype.
Reviewed by: AI editorial process; not yet individually human-reviewed
Have a quick question? Jump to the Q&A page
Jump to a section
What this key area is asking
The SQA wants you to analyse a website's purpose and functional requirements and design its structure and interface before coding: a site structure diagram for the whole site, wireframes for individual pages, and a low-fidelity prototype to review the design. This is the planning that precedes HTML, CSS and JavaScript.
Analysis: purpose and functional requirements
For a charity site the purpose might be "to tell visitors about the charity and let them donate"; the functional requirements would include a Home, About and Donate page, a navigation bar linking all three, and a donation form. Clear requirements drive both the design and the later testing.
The site structure diagram
A site structure diagram is a map of the whole site: it shows each page and how the pages link to one another, so you can see the navigation at a glance.
This catches navigation problems early: a page with no link to it (unreachable), or a confusing structure, shows up immediately on the map.
Wireframes: designing each page
A wireframe designs the layout of a single page. It marks out, as labelled boxes, where the main regions go: the header, the navigation bar, the main content, any images, and the footer.
Low-fidelity prototype
Its value is cheap, early feedback: the client can click through the flow and comment on the layout and navigation before any HTML or CSS is written, so changes are quick and inexpensive at this stage. Fixing a layout on a sketch costs minutes; fixing it after the site is coded costs far more.
Examples in context
This is how real websites are built. Designers produce site maps and wireframes in tools such as Figma, then a clickable low-fidelity prototype, and only after sign-off do they write code, because rework is far cheaper on a sketch than on a built site. Good information architecture (the site structure) is why a well-made site feels easy to navigate. In the SQA assignment you provide a design (a structure diagram and wireframes) as evidence, and the marker checks your built pages against it, exactly as in the SDD assignment task.
Try this
Q1. State what a site structure diagram shows. [1 mark]
- Cue. The pages of the site and how they link to one another (the site map).
Q2. State two regions a wireframe of a page would typically mark out. [2 marks]
- Cue. Any two of: header, navigation bar, main content, images, footer.
Q3. State one advantage of a low-fidelity prototype. [1 mark]
- Cue. It lets the client give feedback on layout and navigation cheaply, before time is spent coding.
Exam-style practice questions
Practice questions written in the style of SQA exam questions on this dot point, with worked answer explainers. The year tag is the paper they imitate, not the source.
SQA Higher (style)4 marksA charity wants a three-page website (Home, About, Donate) with a navigation bar linking the pages. Describe what a site structure diagram and a wireframe would each show for this site.Show worked answer →
A site structure diagram shows how the pages of the site relate and link to one another: the Home page at the top with About and Donate beneath it, and the navigation links between them. It gives the overall map of the site, not the look of any one page.
A wireframe shows the layout of a single page: for the Home page it would mark out where the header, the navigation bar, the main content area, any images and the footer go, as labelled boxes. It focuses on structure and placement, deliberately leaving out final colours, fonts and graphics.
Markers reward the site structure diagram showing the pages and the links between them (the site map), and the wireframe showing the layout of a single page as positioned regions without final styling.
SQA Higher (style)3 marksExplain why a low-fidelity prototype is produced during web design, and state one advantage of using it before coding the site.Show worked answer →
A low-fidelity prototype is a rough, unpolished model of the site, often a set of linked wireframes or simple sketches, that shows the structure, navigation and layout without final styling or working code.
It is produced so the design can be reviewed and agreed early. One advantage: it lets the client give feedback on the layout and flow cheaply, before time is spent writing HTML and CSS, so changes are quick and inexpensive to make at this stage.
Markers reward describing a low-fidelity prototype as a rough model of structure and layout (not finished styling or code) and a valid advantage such as cheap early feedback before costly implementation.
Related dot points
- Building a web page with HTML: the page-layout structural elements (header, nav, section, footer), links, images, lists and tables, and forms for user input.
An SQA Higher Computing Science answer on HTML, covering the page-layout structural elements (header, nav, section, footer), links, images, lists and tables, and forms for capturing user input.
- Styling a web page with CSS: element, class and id selectors; controlling appearance and positioning; internal, external and inline styles; and a horizontal navigation bar.
An SQA Higher Computing Science answer on CSS, covering element, class and id selectors, controlling appearance and positioning, internal, external and inline styles, and styling a horizontal navigation bar.
- Adding interactivity with JavaScript: responding to events (such as onclick and onmouseover), writing functions, and changing page elements through the DOM (for example getElementById and innerHTML).
An SQA Higher Computing Science answer on JavaScript, covering responding to events such as onclick and onmouseover, writing functions, and changing page elements through the DOM with getElementById and innerHTML.
- Testing with normal, extreme and exceptional test data; syntax, execution and logic errors; debugging techniques; and evaluating software for fitness for purpose, efficiency, robustness and readability.
An SQA Higher Computing Science answer on testing and evaluation, covering normal, extreme and exceptional test data, the three error types, debugging techniques, and evaluating software for fitness for purpose, efficiency, robustness and readability.