How do you plan a website so that it meets the user's needs before any code is written?
Analyse the requirements of a website and design it using a site structure diagram, wireframes, low-fidelity prototypes and user-centred design principles.
A focused answer to the SQA Advanced Higher Computing Science content on web analysis and design, covering functional requirements, site structure diagrams, wireframes, low-fidelity prototypes and user-centred design.
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 dot point is asking
The SQA wants you to plan a website before building it: work out what it must do, who it is for, then design its structure and the layout of its pages using recognised notations. Design comes before implementation, and a clear design is what the markers reward in a web project.
Analysing the requirements
Analysis turns a client's wishes into a clear specification. You identify the website's purpose, its intended audience, and its functional requirements: the things it must do, such as let a user search products, submit a form, or log in. Identifying the audience shapes everything that follows, because a site for young children, say, has very different needs from one for accountants.
The site structure diagram
A site structure diagram (sometimes a navigation or site map) shows every page of the website and the links between them, usually as a hierarchy with the home page at the top. It is the plan for navigation: it makes clear how many pages there are, how a user moves between them, and how deep the site goes. It is drawn before any page, so the navigation is designed rather than improvised.
Wireframes
A wireframe is the layout plan for a single page. It marks where the header, navigation bar, main content, images and footer go, using boxes and placeholder text rather than final colours, fonts or photographs. Its job is to settle the structure and positioning of a page so the build follows an agreed layout. A consistent set of wireframes is what gives a site a uniform look across its pages.
Low-fidelity prototypes and user-centred design
A low-fidelity prototype is a rough, quick mock-up (often paper or a simple wireframe set) used to try a design with users before committing effort to code. It is cheap to change, so flawed ideas are caught early. This sits inside user-centred design, the principle that the user's needs drive every decision: consistency across pages, clear and intuitive navigation so users always know where they are, accessibility for users with disabilities, and feedback that confirms the result of an action.
Try this
Q1. Name the design notation that shows all the pages of a website and the links between them. [1 mark]
- Cue. A site structure diagram (site map).
Q2. State one reason a low-fidelity prototype is used early in the design. [1 mark]
- Cue. It is cheap and quick to change, so design flaws are caught before any costly 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.
AH style: design notations4 marksDistinguish between a site structure diagram and a wireframe, and explain what each contributes to a website design.Show worked answer →
A site structure diagram shows the pages of the site and how they link, in a hierarchy from the home page down (1 mark); it contributes the navigation and overall organisation of the site (1 mark). A wireframe shows the layout of a single page: the placement of headers, navigation, content and images, without final colours or graphics (1 mark); it contributes the structure of each individual page so the build follows a plan rather than being improvised (1 mark). Markers want the structure-versus-layout distinction and a contribution for each.
AH style: user-centred design3 marksState three user-centred design principles a designer should apply to a website.Show worked answer →
Any three, one mark each, for example: consistency, so navigation and layout are the same on every page (1 mark); clear and intuitive navigation, so a user can always find their way and knows where they are (1 mark); accessibility, so the site works for users with disabilities, for example with alt text and good colour contrast (1 mark). Other valid answers include feedback to user actions, readable text, and designing around identified user needs. Markers reward sensible, named principles.
Related dot points
- Implement a web page using HTML5 structural and semantic elements and style it with CSS, using internal and external stylesheets, selectors, classes and IDs, the box model and responsive design.
A focused answer to the SQA Advanced Higher Computing Science content on HTML and CSS, covering HTML5 structural and semantic elements, CSS selectors, classes and IDs, internal and external stylesheets, the box model and responsive design.
- Implement client-side interactivity with JavaScript, using variables, functions, events, DOM manipulation and form validation.
A focused answer to the SQA Advanced Higher Computing Science content on client-side JavaScript, covering variables and functions, events, manipulating the DOM, and validating form input in the browser.
- Implement server-side functionality with PHP, handling form data with GET and POST, using sessions, and connecting to a database to run SQL queries from a web page.
A focused answer to the SQA Advanced Higher Computing Science content on server-side scripting, covering PHP, handling form data with GET and POST, sessions, and connecting a web page to a database to run SQL.
- Test a website for functional correctness, and evaluate it for usability, accessibility and fitness for purpose.
A focused answer to the SQA Advanced Higher Computing Science content on web testing and evaluation, covering functional testing against requirements, usability, accessibility and fitness for purpose.