How do developers plan a program and its user interface before coding?
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.
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 plan a program before coding it: to read and write a design in structure-diagram, flowchart or pseudocode form, and to design the layout of a user interface using a wireframe.
Designing the program logic
Once analysis has fixed the requirements, the developer plans the algorithm. National 5 recognises three common design notations.
A structure diagram is good for showing how a big problem divides into manageable parts. A flowchart is good for showing the flow of control, especially decisions and loops. Pseudocode is good for writing out the exact steps in order. All three describe the same kind of thing - the plan - so a question may ask for any of them.
Reading and writing pseudocode
Pseudocode is the notation you are most likely to write. It uses a small set of structured statements: receiving input, sending output, assigning values, making decisions with IF, and repeating with FIXED or CONDITIONAL loops. Exact keywords vary between schools, but the structure must be clear and indented so the logic is unambiguous.
Designing the user interface with a wireframe
A wireframe lets the developer and the user agree what the interface will look like early, so changes can be made on paper instead of after the program is built. It does not need to be artistic or coloured; boxes labelled "search box", "results list" and "go button" placed where they will appear are enough to communicate the layout.
Why we design before coding
Designing first is faster overall, not slower. A mistake spotted in a flowchart or a wireframe is corrected with a pencil; the same mistake spotted after the program is written may mean rewriting code. Design documents also guide implementation (the pseudocode becomes the code) and support testing (the design tells you what the program is supposed to do at each step).
How this key area is examined
Questions ask you to complete or write a design in pseudocode or as a flowchart, read a given design and say what it does, or describe the purpose of a structure diagram or a wireframe. For pseudocode, write structured, indented steps with clear inputs, processes and outputs; exact keywords matter less than clear, unambiguous logic. For a wireframe question, talk about layout of interface elements, done before coding.
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 style4 marksA program asks for a test mark out of 100 and displays "Pass" if the mark is 50 or more, otherwise "Fail". Write a design for this program using pseudocode.Show worked answer →
Four marks for a clear design that gets the input, the decision and both outputs right.
A correct pseudocode design:
- RECEIVE mark FROM (INTEGER) KEYBOARD
- IF mark >= 50 THEN
SEND "Pass" TO DISPLAY- ELSE
SEND "Fail" TO DISPLAY- END IF
Markers reward getting the input step, the correct condition (mark >= 50), the matching IF and ELSE outputs, and a structured layout with indentation. Exact keywords vary by school, but the logic and structure must be clear and unambiguous.
SQA N5 style2 marksDescribe the purpose of a wireframe in the design of a program.Show worked answer →
Two marks for two points about what a wireframe is and what it is for.
A wireframe is a simple sketch or diagram of the layout of a screen or user interface. It shows where items such as buttons, text boxes, labels and images will be placed, before any code is written.
Its purpose is to plan and agree the look and layout of the interface early, so the developer and user can check the design before time is spent building it. A strong answer names it as a layout/interface design and says it is done before implementation.
Related dot points
- 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.
- 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.
- Computational constructs: assignment, arithmetic, comparison and logical operators, concatenation, predefined functions, and the control structures of selection and iteration (fixed and conditional).
An SQA National 5 Computing Science answer on computational constructs, covering assignment, arithmetic, comparison and logical operators, string concatenation, predefined functions, and the control structures of selection (IF) and iteration (fixed and conditional loops) used to build programs in a high-level language.
- Standard algorithms: input validation, running total within a loop, and traversing a 1-D array, each as a reusable pattern built from selection and iteration.
An SQA National 5 Computing Science answer on the three standard algorithms, covering input validation with a conditional loop, keeping a running total inside a loop, and traversing a one-dimensional array with a fixed loop, with worked code-style examples of each reusable pattern.
- Testing with normal, extreme and exceptional test data; the three kinds of error (syntax, execution and logic); and evaluating software for fitness for purpose, efficiency, robustness and readability.
An SQA National 5 Computing Science answer on testing and evaluation, covering the three categories of test data (normal, extreme and exceptional), the three kinds of error (syntax, execution and logic), and the four criteria for evaluating software: fitness for purpose, efficiency, robustness and readability.