IT Design Tools – Wireframes

There are a different design tools that can be used to design a solution.

  • flow charts
  • mind maps
  • visualisation diagrams
  • wireframes

Here is a Knowledge Organiser for Wireframes

In this lesson, we will focus on Wireframes. These can be used as a tool to design a website

For examples, this is the BBC Bitesize website

The design for this website can look something like this.

This would be a low fidelity wireframe, as it does not show any pictures or logos. We could add more exact details to make a hi-fidelity wireframe

Here is another example of a Wireframe, for a YouTube channel

Your task

1. Create a low-fidelity wireframe for the home page for the BBC website

or you can choose a business, such as Domino’s

2. Make a copy of your wireframe and convert it to a high-fidelity wireframe

A high-fidelity wireframe will include some pictures or a logo or any other graphics that may be used.

High-fidelity wireframe for Domino’s

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Blog at

Up ↑

%d bloggers like this: