← 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 describe the difference between a wireframe and a low fidelity prototype
  • 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 diagram showing where elements (text, images, links, video) will appear on a web page — drawn before any coding begins.
prototype
An early model of a website or system, built to test ideas before full development. A prototype may look like the real thing but have limited or no functionality.
low fidelity
Simple and basic — a "lo-fi" prototype is a rough early version with little or no interaction, used to provoke discussion and test ideas quickly. Often hand-drawn or on paper.
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 that shows where each element will appear on a web page. 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

The same content shown in desktop and mobile layouts — design for both

What is a low fidelity prototype?

A prototype is an early working model of a website. A low fidelity prototype (or "lo-fi prototype") is a rough, simple version — it might be drawn on paper, created in a simple tool, or be a very basic on-screen mockup. It has little or no real functionality; links may not actually work, and images may just be boxes. The purpose is not to build a finished site but to:

  • Show clients or users what the site might look like
  • Get feedback early, before spending time on full development
  • Test whether the layout and navigation make sense to real people
  • Spot problems and make changes cheaply (changing paper is free; rewriting code takes time)

The difference between a wireframe and a low fidelity prototype can be subtle. Think of the wireframe as the layout diagram, and the prototype as a slightly more developed version that shows how pages link together. 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. Both are design-stage outputs. A wireframe shows the layout of a single page. A low fidelity prototype is slightly more developed — it may show how pages link together and how the site will feel to use, but still with no real styling or complete functionality.
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 between a wireframe and a low fidelity prototype, remember: both are design-stage tools; a wireframe is a layout diagram for a single page; a prototype is a slightly more developed model that may show how pages link together, but still has little or no real interactivity.

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, 7, and 9 ask you to draw wireframes: create them on paper or in draw.io, then upload or paste below.

For diagram questions (Q5, Q7, Q9): 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 the client or end users to give feedback on the design before any coding begins, so problems can be fixed cheaply and quickly.
• It is much easier and faster to change a paper prototype than to rewrite HTML and CSS code.
• It helps the development team agree on the layout and structure of the site before committing to implementation.

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 a layout diagram for a single page showing where elements such as text, images, links, audio, and video will be positioned. It uses placeholder conventions (boxes with X for images, lines for text) and shows no real colours or fonts.

A low fidelity prototype is a slightly more developed early model that shows how pages link together and gives an impression of how the site will feel to use. It is still rough and simple — with little or no real interaction — but goes further than a wireframe by simulating the experience of navigating the site.

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.