Software Design & Development · Design

SDD4 — Design: Pseudocode and Wireframes

📅 Thu 11 Jun 2026 · P3+P4 (double)
~120 minutes
Learning intentions
Success criteria
Warm up — recap from SDD3
Answer all three questions, then check your answers.
Question 1
What term describes the major numbered steps of a design, before any further detail is added?
Question 2
If a refinement of step 3 is written, what would its first sub-step be numbered?
Question 3
What two labels are used to show data flowing into or out of a step in a design?

Key vocabulary

Pseudocode
A structured, numbered, language-independent way of writing a design's logic using plain English keywords.
Wireframe
A simple labelled sketch of a user interface showing layout, inputs, and outputs — not final visual styling.
Fixed loop
A loop that repeats a set, known number of times (e.g. "for each of 7 days").
Conditional loop
A loop that repeats until (or while) a condition is met, rather than a fixed number of times.
Selection
A construct (If/Then/Else) that chooses between different actions depending on a condition.
Indentation
Consistent spacing used in pseudocode to show which lines belong inside a loop or selection.

From diagrams to pseudocode

A structure diagram (SDD3) and pseudocode express exactly the same design — the difference is notation, not content. Pseudocode writes the top level design, data flow, and refinements as numbered text rather than as boxes and arrows. Because pseudocode is closer to how the final Python code will actually look, it is usually the better choice for writing out a refinement in detail, while a structure diagram is often clearer for showing the overall shape of a design at a glance.

Writing the top level design in pseudocode

The top level design in pseudocode looks almost identical to a structure diagram's top level design — numbered steps with IN/OUT data flow shown alongside each one. Nothing changes about what information is required; only the layout changes from boxes to numbered lines.

Refinements in pseudocode

Where pseudocode becomes essential is in refinements. A refinement written in pseudocode uses specific keywords for loops and selection: Start fixed loop … End fixed loop for a known number of repetitions, Start conditional loop … End conditional loop for a loop that depends on a condition, and If … Then … Else … End If for selection. Every loop and every If must be closed with its matching "End" line — an unclosed loop or selection is one of the most common ways pupils lose marks. Indentation is used consistently to show which lines are inside a loop or a selection, exactly as it will be in the final Python code.

Wireframes: designing the interface

A wireframe is a simple, labelled sketch of what a program's screen will look like — not a finished, styled visual design. Its purpose is to agree on layout, inputs, and outputs with a client before any code is written. A wireframe should clearly label: input fields (where the user types or selects something), buttons (actions the user can trigger), and output or display areas (where the program shows information back to the user). Colour, fonts, and exact visual styling are not part of a wireframe — those come later, if at all, at Higher.

Worked examples

Example 1 — Weekly Rainfall Tracker in pseudocode (recap of SDD3)
1
The same rainfall problem from SDD3 can be written entirely in pseudocode, including a fully worked refinement of step 1.
1Get rainfall readings (OUT: rainfall())
2Calculate total rainfall (IN: rainfall() · OUT: total)
3Find day with highest rainfall (IN: rainfall() · OUT: highest day position)
4Display results (IN: total, highest day position)
1.1Start fixed loop for each of the 7 days
1.2Get rainfall reading for the day (OUT: rainfall(day counter))
1.3End fixed loop
Notice the indentation on line 1.2 — it shows that "Get rainfall reading" happens inside the loop, and 1.3 ("End fixed loop") is not indented because it closes the loop rather than repeating inside it.
Example 2 — Refinement using selection: Exam Pass Rate Checker
1
Scenario: A program reads the exam score out of 100 for each of 28 pupils, and counts how many pupils passed (a score of 50 or more).
1Get exam scores (OUT: score())
2Count passes (IN: score() · OUT: pass count)
3Display pass count (IN: pass count)
2.1Start fixed loop for each of the 28 pupils
2.2If score(pupil) is greater than or equal to 50 Then
2.3Increment pass count
2.4End If
2.5End fixed loop
The If on line 2.2 is closed by End If on line 2.4, and the whole selection sits inside the fixed loop, which is closed by End fixed loop on 2.5. Every opening keyword has a matching closing keyword.
Example 3 — Wireframe: exam score entry screen
1
A wireframe for a simple screen that lets a teacher enter a pupil's score and see whether they passed.
Exam Pass Rate Checker
Input field
Enter score (0–100): [_______]
Check result
Output / display area
Result: PASS
Every element is labelled by its type (input field, button, output area) rather than styled — a wireframe communicates structure and function, not final appearance.
Now you try
A program reads the age of each of 15 pupils in a club and counts how many are aged 14 or under.

Write: a top level design (3 steps) in pseudocode, and a refinement of the counting step using a fixed loop and an If/Then/End If.
⚠️ Common mistakes — examiner feedback
📝 Exam tip

Always close every loop and selection you open, and keep indentation consistent throughout. An examiner reading pseudocode is checking the logic can actually be traced from start to finish — an unclosed loop or a missing indent makes that impossible to verify, even if the intention was clear.

Task Set A — Core questions

Task Set A — Core questions
Work through all questions, then check your answers.
Question 1
What keyword pair is used in pseudocode to close a loop that repeats a known number of times?
Question 2
Which construct would you use in pseudocode to choose between two different actions depending on a condition?
Question 3
What is the name for a simple, labelled sketch of a screen's layout, inputs, and outputs — before any visual styling is added?
Question 4
A pupil writes a refinement: "2.1 If mark is greater than 50 Then / 2.2 Increment pass count" with no further lines. What is missing?
Question 5
What is the term for spacing used consistently in pseudocode to show which lines belong inside a loop or selection?
Question 6
Describe what should — and should not — be included in a wireframe. (3 marks)
Question 7
Which pair of lines correctly opens and closes a loop that repeats a known number of times?
Question 8
In pseudocode, what is the difference between a fixed loop and a conditional loop, in one word describing what a fixed loop's repeat count is?
Question 9
A program reads the ticket price paid by each of 20 pupils on a school trip and calculates the total amount collected. Write a 3-step top level design in pseudocode, and a refinement of the calculation step using a fixed loop. (5 marks)
Question 10
What is the term for the design technique that expresses exactly the same design as a structure diagram, but as numbered text rather than boxes and arrows?

Task Set B — Extension

Task Set B — Extension · Beyond the specification
Longer written answers — no auto-check. Discuss your answers with your teacher.
Extension 1
A school library program reads how many days each of 40 current loans has been out, and counts how many are overdue (more than 14 days). Write a top level design in pseudocode, a refinement of the counting step, and describe a simple wireframe for the results screen. (6 marks)
Extension 2
Explain why pseudocode is often preferred over a structure diagram specifically for writing out a refinement in detail. (3 marks)
Extension 3
A pupil writes: "3.1 Start fixed loop for each pupil / 3.2 If score(pupil) is greater than 80 Then / 3.3 Increment count / 3.4 End fixed loop". Identify the fault and explain how to fix it. (2 marks)
📁 File this in OneNote under:
Higher Computing Science → Software Design & Development → SDD4
📌 Teacher notes — not for pupils

Double period. This lesson closes out the Design strand before Implementation begins in SDD5 — worth stressing this explicitly, since pupils sometimes think pseudocode with loops/If means they've already started "real" programming.

Suggested timing: 10 min warm-up + vocab · 25 min notes + examples 1–2 (whiteboard the loop/If closing pairs explicitly) · 10 min wireframe example 3 · 10 min "now you try" · 45 min Task Set A · remaining time Task Set B / homework.

Common pupil confusion: forgetting to close a loop or If, especially when nesting one inside the other (example 2). Get pupils to physically draw a bracket connecting each opening keyword to its closing partner as a checking technique.

Some pupils will want to design an elaborate, fully-styled wireframe — redirect them back to the labelled-sketch purpose; polish is not assessed at this level.