How do we analyse the requirements for a website and design its structure and pages?
Web analysis and design: identifying end-user and functional requirements, and designing the structure and page layouts of a website using a wireframe and a navigation structure.
An SQA National 5 Computing Science answer on web analysis and design, covering how to identify end-user and functional requirements for a website, how to design page layouts with a wireframe, and how to plan the navigation structure that links the pages together.
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 what a website must do, then design it: the layout of each page with a wireframe, and the navigation structure that links the pages together.
Analysis: what the website must do
As with software and databases, analysis comes first so the design solves the real problem. For a sports club site, the end users (members and visitors) need to find fixtures, news and contact details; the functional requirements then include having pages for each of these and links that connect them.
Design part 1: the wireframe
A wireframe does not need colour or finished artwork; labelled boxes in the right positions ("logo here", "menu across the top", "main text", "photo on the right") are enough to communicate the design. Each page of the site can have its own wireframe.
Design part 2: the navigation structure
The navigation structure is about the whole site, whereas the wireframe is about a single page. Together they answer two questions: what does each page look like (wireframe) and how do the pages connect (navigation structure)?
Why analysis and design matter
A website that is designed first is easier to build and easier to use. The wireframes guide the HTML and CSS that follow, and the navigation structure makes sure every page is reachable and the site is logically organised. Skipping design tends to produce sites where pages are hard to find or laid out inconsistently, problems that are far cheaper to avoid on paper.
How this key area is examined
Questions ask you to identify end-user and functional requirements, describe the purpose of a wireframe or a navigation structure, or complete a design. Keep the wireframe (one page's layout) and the navigation structure (links between pages) distinct, and express end-user requirements as what visitors need and functional requirements as what the site must do.
For the official course specification
The SQA publishes the full National 5 Computing Science course specification, specimen question papers and coursework tasks at sqa.org.uk. Always revise from the current specification and SQA past papers, because question style and terminology are board-specific.
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 N5 style3 marksDescribe the purpose of a wireframe and a navigation structure when designing a website.Show worked answer →
Marks for the wireframe purpose, the navigation purpose, and a clear distinction.
A wireframe is a sketch of the layout of a single web page, showing where items such as the heading, navigation bar, text, images and links will be placed.
A navigation structure is a plan of how the pages of the site link together, showing which pages can be reached from which, often as a diagram with the home page at the top.
Markers reward the wireframe as a page-layout design and the navigation structure as a plan of the links between pages. Saying both are done before the site is built strengthens the answer.
SQA N5 style2 marksA pupil is designing a website for a sports club. Give one end-user requirement and one functional requirement for the site.Show worked answer →
One mark for an end-user requirement and one for a functional requirement.
End-user requirement: members want to find the fixture list and contact details easily.
Functional requirement: the site must display the fixtures on a page and provide working links from the home page to each section.
Markers reward an end-user requirement expressed as what users need, and a functional requirement expressed as what the site must do. The two should be related but clearly different in focus (what the user needs versus what the site must provide).
Related dot points
- HTML and CSS: building page content and hyperlinks with HTML elements, and controlling appearance with CSS using element, class and id selectors and common properties.
An SQA National 5 Computing Science answer on HTML and CSS, covering how HTML elements build the structure and content of a page including headings, paragraphs, images and hyperlinks, and how CSS controls appearance using element, class and id selectors with common properties such as colour, font and size.
- JavaScript and media: adding interactivity with event-driven JavaScript (such as onmouseover, onmouseout and onclick), and using media files with appropriate standard file formats and compression, then testing and evaluating the website.
An SQA National 5 Computing Science answer on JavaScript and media, covering how event-driven JavaScript adds interactivity using events such as onmouseover, onmouseout and onclick, how media files (graphics, audio and video) use standard file formats and compression to manage file size, and how a website is tested and evaluated.
- Analysis: identifying the purpose, scope and boundaries of a problem and writing functional requirements in terms of inputs, processes and outputs.
An SQA National 5 Computing Science answer on the analysis stage of software development, covering how to identify the purpose, scope and boundaries of a problem and how to write functional requirements in terms of the inputs, processes and outputs a finished program must provide.
- Design techniques: representing a program design with structure diagrams, flowcharts and pseudocode, and designing the user interface with a wireframe.
An SQA National 5 Computing Science answer on design techniques, covering how developers plan a program using structure diagrams, flowcharts and pseudocode, how to read and write each notation, and how a wireframe is used to design the layout of a user interface before coding begins.
- The iterative software development process: analysis, design, implementation, testing, documentation and evaluation, and why the process is iterative rather than strictly linear.
An SQA National 5 Computing Science answer on the software development process, covering the six stages of analysis, design, implementation, testing, documentation and evaluation, what is produced at each stage, and why the process is iterative so that developers loop back to earlier stages when problems are found.