← Course home N5 Computing Science  ·  James Gillespie's
WDD  ·  Web Design & Development

Wireframes and Prototyping

Lesson 2 of 13 Approx 2 hrs

Learning intentions

  • Understand what a wireframe is and why it is used in web design
  • Know the conventions used in National 5 wireframes and be able to apply them
  • Understand what a low fidelity prototype is and how it differs from a wireframe
  • Explain the importance of consistency across pages of a website

Success criteria

  • I can describe what a wireframe shows: text, graphics, video, sounds, hyperlinks, and interactive areas
  • I can draw a wireframe using the correct N5 conventions — including box with X for images, labels for links, and vertical layout only
  • I can distinguish a developer-facing wireframe from a paper-based low fidelity prototype used with end users
  • I can explain what consistency means in web design and identify two features that should be the same on every page
Warm up — what do you already know?

Answer before the lesson begins. These check prior knowledge — it's fine if you're unsure.

1. Before a developer starts coding a website, they create a rough plan showing where elements will appear on each page. What is this plan called?

2. In a wireframe, how is an image placeholder usually represented?

3. At National 5, how should elements be arranged on a wireframe?

Key vocabulary

wireframe
A simple, development-team-facing diagram showing page layout and consistency — where text, images, links, and video will appear before coding begins.
prototype
An early representation of a website or system that can be shown to end users so their feedback can influence the design before full development.
low fidelity
Simple and paper-based — an N5 low fidelity prototype includes fuller content and screen widgets so end users can try tasks, give feedback, and take part in usability testing.
user interface (UI)
The part of a website or app that the user sees and interacts with — buttons, menus, images, text, and layout all form part of the UI.
navigation
The links and menus that help users move between pages of a website. Navigation should be consistent across all pages.
consistency
Using the same layout, navigation, header, and footer on every page of a website, so users always know where to find things.
layout
The arrangement and positioning of elements on a web page. The wireframe shows the planned layout before the page is built.
placeholder
A temporary representation of content in a wireframe — e.g. a box with an X for an image, or "Lorem ipsum" text standing in for real words.
header
The area at the top of a web page, usually containing the site logo, site name, and main navigation. Shown on every page.
footer
The area at the bottom of a web page, often containing contact details, copyright information, and additional links. Shown on every page.

Wireframes and Prototyping

Why design before coding?

A website goes through a clear sequence of stages: analysis → design → implementation → testing → evaluation. The design stage happens before a single line of HTML is written. Getting design wrong wastes time — it is much easier to move a box on a sketch than to rewrite a page of code. The two main design outputs at National 5 are the wireframe and the low fidelity prototype.

What is a wireframe?

A wireframe is a simple diagram used by the development team to plan where each element will appear on a web page and keep layouts consistent across pages. It does not show real images, real colours, or real fonts — it uses placeholders to represent each type of content. A wireframe shows the position of:

  • Text — shown as lines or "Lorem ipsum" filler text
  • Graphics/images — shown as a box with an X drawn through it
  • Video — shown as a box with a "play" triangle or labelled "VIDEO"
  • Audio — shown as a labelled box or audio player icon
  • Hyperlinks — shown as underlined text labels (e.g. "Home | About | Contact")
  • Interactive areas — buttons, form fields, menus — shown as outlines with labels

Here is an example wireframe for a simple homepage:

Site Logo Home About Contact Hero Image Page Heading (H1) Image ▶ Audio player External link → example.com Footer — copyright info & links
Example N5 wireframe — elements stacked vertically. Boxes with X = images. Lines = text. Audio player, navigation, and footer all labelled.

N5 wireframe conventions

At National 5, wireframes follow specific conventions you must know:

  • Elements are arranged vertically only. You do not need to show side-by-side columns — everything stacks one below the other.
  • Images are shown as a box with an X through it. This is the universal wireframe symbol for an image placeholder.
  • Text is shown as horizontal lines (to indicate paragraphs) or short labels (to show headings).
  • Links are shown as underlined text with the link label written (e.g. "Home | About | Contact").
  • Audio and video are shown as labelled boxes (e.g. a box labelled "VIDEO" or showing a play button).
  • Interactive areas (buttons, fields) are shown as outlined rectangles with a text label.

Consistency across pages

Consistency means that certain elements look and work the same on every page of the site. This is essential for a good user experience — if the navigation changes position between pages, users become confused. The elements that must be consistent include:

  • Navigation bar — the same links in the same order, in the same place on every page
  • Header — site logo, site name, and main navigation should be identical on every page
  • Footer — copyright, additional links, contact information — the same across all pages
  • Colour scheme and fonts — the same visual style throughout the site

When drawing wireframes for multiple pages, the header and navigation sections should look identical on each. If the wireframe for the homepage shows a nav bar at the top with "Home | About | Contact", then every other page wireframe must show the same nav bar in the same position.

Header Nav bar Main content Sidebar Footer Desktop vs Header Nav Main content Sidebar Footer ↑ stacks vertically Mobile

Enrichment: a finished responsive page may use side-by-side content on desktop and stack it on mobile. This is not the N5 wireframe convention; N5 wireframes stack elements vertically.

What is a low fidelity prototype?

At National 5, a low fidelity prototype is a paper-based representation of the website interface. It contains fuller example content and recognisable screen widgets — such as buttons, menus, input fields, checkboxes, and page controls — so it represents what an end user would see and interact with. It is not a coded or working website: an end user can point to or tap paper controls, while a facilitator can swap paper screens to represent the result of an action.

The prototype is shown to end users so they can try realistic tasks and provide feedback during usability testing. Its purpose is to:

  • Let end users try tasks using the paper screens and widgets
  • Collect feedback about what users understand, expect, or find confusing
  • Test usability, including whether controls and navigation are clear
  • Spot problems and change the design cheaply before coding begins

A wireframe is mainly development-team-facing: it plans page layout, element positions, and consistency across pages using simple placeholders. A low fidelity prototype is end-user-facing: it is paper-based, contains fuller content and screen widgets, and is used to gather feedback or carry out usability testing. Both are created in the design stage before implementation.

Worked examples

Example 1 — Annotating a wireframe

Task: Identify the elements shown in this page wireframe description and explain what each represents.

Page description: at the top there is a horizontal bar containing "Pet World" and three underlined words. Below that is a wide box with an X through it. Below that is a bold line of text. Below that are three lines of smaller text. At the bottom there is a box labelled "Contact Us".

1
Horizontal bar with "Pet World" and three underlined words → this is the navigation bar / header. The three underlined words are hyperlinks (internal links to other pages).
2
Wide box with an X through it → this is an image placeholder. A real image of a pet, shop, or banner will go here in the finished site.
3
Bold line of text → this represents a heading (probably an H1 or H2 element in HTML).
4
Three lines of smaller text → this represents a paragraph of body text.
5
Box labelled "Contact Us" → this is an interactive button or labelled hyperlink — clicking it will take the user to the contact page.
Example 2 — Drawing a wireframe from a brief

Brief: "Draw a wireframe for the homepage of Meadowview Leisure Centre. The page should have: a header with the site name and three navigation links; a large banner image; a short welcome paragraph; a video about the centre; and a footer."

1
Header (top): Draw a wide rectangle across the full width. Inside, write "Meadowview Leisure Centre" on the left, and three underlined labels on the right: "Home | Membership | Classes".
2
Banner image (below header): Draw a large wide rectangle spanning the full width. Draw an X through it. Label it "Banner image".
3
Welcome paragraph: Draw 3–4 horizontal lines below the image to represent body text. Label the first line in bold as "H1: Welcome".
4
Video (below paragraph): Draw a medium rectangle. Inside, draw a triangle (▶) or label it "VIDEO".
5
Footer (bottom): Draw a narrow rectangle across the full width. Label it "Footer — copyright & links".
Example 3 — Critiquing a wireframe

Scenario: A pupil produces wireframes for two pages of a school website. On the homepage, the navigation bar is at the top. On the "About" page, the navigation bar is on the left side and there is no footer.

1
Problem 1 — inconsistent navigation position. The nav bar is at the top on the homepage but on the left on the About page. This breaks consistency — users expect navigation to be in the same place on every page.
2
Problem 2 — missing footer. The homepage has a footer but the About page does not. The footer (copyright, links) should appear on every page for consistency.
3
What to fix: Redraw the About page wireframe with the navigation bar at the top (matching the homepage) and add a footer at the bottom of every page wireframe.
Now you try

Scenario: "A pet shop called Pawsome Pets needs a website. The homepage should have: a header with the site name ("Pawsome Pets") and navigation links to Home, Dogs, Cats, and Fish; a large banner image; a heading "Welcome to Pawsome Pets"; two paragraphs of text; a photo of a dog; an audio clip of a dog barking (with a play button); and a footer."

  1. Draw a wireframe for the Pawsome Pets homepage using the correct N5 conventions. Use boxes with X for images, horizontal lines for text, and labelled boxes for audio.
  2. The Dogs, Cats, and Fish pages should have the same layout. Write one sentence explaining why the header and navigation must look the same on those pages.

Part 1 — Wireframe (top to bottom):

  1. Header bar (full width): "Pawsome Pets" on left, underlined links "Home | Dogs | Cats | Fish" on right
  2. Large box with X (full width): labelled "Banner image"
  3. Bold line: "H1: Welcome to Pawsome Pets"
  4. Two groups of horizontal lines: "Paragraph 1 text" and "Paragraph 2 text"
  5. Medium box with X: "Photo of dog"
  6. Smaller box with ▶ symbol: "Audio: dog barking"
  7. Footer bar (full width): "Footer — copyright & links"

Part 2 — Consistency: The header and navigation must look the same on every page so users always know where they are on the site and can easily find the links to navigate to other pages.

Common mistakes
✕
Drawing a detailed image instead of a box with an X. A wireframe does not use actual images — it uses a rectangle with an X through it. Drawing a real picture (or even a detailed sketch of what the image might look like) shows a misunderstanding of wireframe conventions.
✕
Arranging elements side by side at N5. At National 5, all elements are stacked vertically. You do not need to show columns, sidebars, or any two elements sitting beside each other. The examiners know this is a simplification — it is the convention at this level.
✕
Forgetting to label elements. An X-box without a label is ambiguous — is it a photo? A banner? A video? Always add a brief label: "Banner image", "Staff photo", "Video: tour of the building". Labels make your wireframe unambiguous.
✕
Drawing wireframes for each page with different navigation. If your home page wireframe has "Home | About | Contact" in the header, every other page wireframe must show the same three links in the same order in the header. Inconsistent navigation across wireframes is a design error.
✕
Confusing a wireframe with a low fidelity prototype. A wireframe is used by the development team to plan layout and consistency with simple placeholders. An N5 low fidelity prototype is paper-based, includes fuller content and screen widgets, and is shown to end users for feedback and usability testing.
Exam tip

In wireframe questions, the SQA often asks you to "draw" or "complete" a wireframe based on a description. Remember these key points:

  • Image = box with X through it. Never draw the actual image — a rectangle with a diagonal X is the correct convention.
  • Always show navigation. A header with navigation links is expected on every page wireframe.
  • Vertical layout only. Stack elements top to bottom. Do not attempt to show a two-column layout.
  • Label everything. Text boxes, image boxes, audio, and video should all have a brief label.

If asked to describe the difference, contrast both audience and purpose: a wireframe helps the development team plan layout and consistency, while a paper-based low fidelity prototype uses fuller content and screen widgets so end users can give feedback and take part in usability testing.

Task Set

Questions 1–4 are auto-checked. Questions 5–10 are self-marked — write your answer, then reveal the model answer to check. Questions 5 and 7 ask you to draw wireframes: create them on paper or in draw.io, then upload or paste below.

For diagram questions (Q5, Q7): create your wireframe in draw.io, then either (a) click Upload to select the saved PNG, or (b) in draw.io use Edit → Copy as Image, then click Paste from clipboard. Your diagram will appear inline and be included when you export.

1. What is the main purpose of a wireframe? TYPE 1

2. In a wireframe, which of the following correctly represents an audio player? TYPE 1

3. Which of the following best describes a low fidelity prototype? TYPE 1

4. Why is it important that navigation appears in the same position on every page of a website? TYPE 1

5. A web developer is building a homepage for a local library. The page will contain: a header with the library's name and links to Home, Books, Events, and Contact; a large banner image; a heading "Welcome to Millbank Library"; three paragraphs of text; a video showing a tour of the library; a link to the local council website; and a footer. Draw a wireframe for this page using correct N5 conventions. TYPE 2

From top to bottom:
1. Header bar (full width): "Millbank Library" on left; underlined links "Home | Books | Events | Contact" on right
2. Large box with X (full width): labelled "Banner image"
3. Bold line: "H1: Welcome to Millbank Library"
4. Three groups of horizontal lines labelled "Paragraph 1", "Paragraph 2", "Paragraph 3"
5. Medium box with ▶ or labelled "VIDEO: Library tour"
6. Underlined text: "External link → Local Council website"
7. Footer bar (full width): "Footer — copyright & contact"

Key marks: correct use of X-box for images, ▶ or label for video, underlined text for links, consistent header with navigation.

6. Describe two features that should appear on every page of a website to ensure consistency. (2 marks) TYPE 2

Any two of the following (1 mark each):

• Navigation bar — the same links in the same position and order on every page, so users always know how to move around the site.
• Header — the site logo and name should appear in the same place at the top of every page so users always know which website they are on.
• Footer — copyright information, additional links, and contact details at the bottom of every page.
• Colour scheme and fonts — the same visual style (colours, typography) throughout the site, so it feels coherent and professional.

7. The Millbank Library website also has a Books page. The Books page contains: the same header and navigation as the homepage; a heading "Our Book Collection"; an image of bookshelves; a paragraph about the collection; and the same footer as the homepage. Draw the wireframe for the Books page. Make sure it is consistent with the homepage you drew in Q5. TYPE 2

From top to bottom:
1. Header bar (IDENTICAL to homepage): "Millbank Library" + "Home | Books | Events | Contact"
2. Bold line: "H1: Our Book Collection"
3. Medium box with X: "Image: bookshelves"
4. Group of horizontal lines: "Paragraph — about the collection"
5. Footer bar (IDENTICAL to homepage): "Footer — copyright & contact"

Key mark: the header and footer must be identical to the homepage wireframe for full marks on consistency.

8. State one advantage of creating a low fidelity prototype before building the actual website. (1 mark) TYPE 2

Any one of the following:

• It allows end users to try realistic tasks and give feedback before any coding begins.
• It reveals usability problems, such as controls or navigation that users find confusing.
• It is quicker and cheaper to change a paper prototype after feedback than to rewrite a coded website.

9. Describe the difference between a wireframe and a low fidelity prototype. In your answer, refer to purpose and level of detail. (2 marks) TYPE 2

A wireframe is mainly used by the development team to plan page layout and consistency. It shows the positions of elements using simple placeholders, such as boxes with X for images and lines for text.

An N5 low fidelity prototype is a paper-based representation with fuller content and recognisable screen widgets. It is shown to end users so they can try tasks, give feedback, and take part in usability testing.

Both are design-stage outputs created before implementation begins.

10. A developer shows two wireframes to the client: the homepage has navigation at the top, but the About page has navigation on the left. Identify this problem and explain how to fix it. (2 marks) TYPE 2

Problem: The navigation bar is in a different position on each page — this breaks consistency. Users expect the navigation to be in the same place on every page, so moving it between pages will confuse them.

Fix: Redraw the About page wireframe so that the navigation bar appears in the same position as on the homepage (at the top of the page), with the same links in the same order.
Teacher notes — Shift+T to hide

Suggested timing: 2 hours. Warm up 5 min; vocabulary + notes 20 min; worked examples (annotate live) 15 min; "now you try" wireframe 15 min; task set 50 min; review/compare wireframes 15 min.

Key misconception: Pupils often draw detailed images in their wireframes rather than X-boxes. Show the difference explicitly on the board before pupils start Q5. The convention exists because wireframes are for planning, not for showing what things will look like.

Consistency activity: Before the task set, show pupils two versions of a wireframe on the board — one with consistent navigation, one with a changing nav bar. Ask them to spot the problem. This primes them for Q10 and reinforces the concept before they encounter it in a task.

Wireframe tools: draw.io (app.diagrams.net) is the recommended free tool. The "Extras → Edit Diagram" feature lets pupils paste shapes quickly. Alternatively, pupils can draw wireframes by hand, photograph them, and upload. The diagram upload widget in Q5, Q7 accepts PNG and JPG.

SQA command words: "Draw a wireframe" (marks for correct elements in correct positions, X-boxes for images, consistent nav); "Describe the difference between" (needs two points and a contrast); "State one advantage" (one accurate point, no explanation required).

Extension: Ask pupils to add a third page to their Millbank Library wireframes — Events page — then peer-assess each other's work for consistency across all three pages.