lesson 5.5 - creating initial designs: visualisation & requirements
Discover how to turn wild ideas into professional wireframes and design specifications in BTEC DIT. Let's start sketching your path to Distinction!
It is time to get creative! You have planned your project, figured out exactly who your audience is, and listed all the strict requirements. Now, we finally get to draw what this user interface is actually going to look like. Grab your pencils, because today we are turning your raw ideas into professional wireframes and mapping out the exact hardware and software needed to build them!
Learning Outcomes
The Building Blocks (Factual Knowledge)
The Connections and Theories (Conceptual Knowledge)
The Skills and Methods (Procedural Knowledge)
Recall the purpose of producing an initial design in the project lifecycle.
Describe the mandatory components of a design specification, including hardware and software requirements.
The Connections and Theories (Conceptual Knowledge)
Analyse how a wireframe accurately reflects the specific user and accessibility requirements gathered in a project proposal.
Evaluate the effectiveness of a detailed design specification in communicating technical ideas to a client.
The Skills and Methods (Procedural Knowledge)
Apply user interface design principles to sketch a clear, annotated wireframe visualisation.
Create a formal design specification detailing the hardware, software, and visual requirements for a digital product.
Digital Skill Focus: Use digital or physical tools to sketch user interface wireframes and document comprehensive technical specifications clearly.
Creating Initial Designs: Bringing Ideas to Life
Once you have established the project purpose, identified your target audience, and documented the requirements and constraints, it is time to start visualising the final product. An initial design is a critical step in the project lifecycle. It acts as a bridge between abstract ideas and the final digital product, allowing designers, clients, and developers to agree on the structure before any expensive coding begins.
Visualisation Techniques
To communicate your interface ideas, you must create visual representations. These are not fully working products, but structural blueprints.
Wireframes: A basic, low-fidelity, black-and-white sketch of a user interface. It focuses purely on layout, showing where images, text, and navigation buttons will go without worrying about specific colours or fonts.
Storyboards: Often used for video, animation, or navigating through multiple screens in an app. They show a sequence of events or screen transitions, explaining the user journey step-by-step.
Sketches: Quick, informal drawings used during early brainstorming to get ideas onto paper rapidly.
The Design Specification
A visual sketch is not enough on its own. It must be accompanied by a formal design specification. This document details exactly what is needed to make the design a reality, ensuring the final product meets all user and system requirements.
1
Hardware Requirements
You must specify the physical equipment needed to develop and run the interface.
Input Devices: Will the user interact via a touch screen, a physical keyboard, a mouse, or a microphone for voice commands?
Output Devices: Does the system require a high-definition monitor, a speaker for audio feedback, or a haptic motor for physical vibrations?
Processing & Storage: Does the device need a powerful processor to render 3D graphics, or substantial memory to store large offline datasets?
2
Software Requirements
You must also define the digital tools and platforms involved.
Operating System (OS): Is the app being designed for iOS, Android, Windows, or is it a web-based interface accessible via a browser?
Application Software: What software will be used to build the product (e.g., spreadsheet software for a dashboard, or a specific IDE for an app)?
By combining clear visualisations with a robust design specification, you ensure that the final digital product is functional, accessible, and exactly what the client ordered.
Task Wireframe Wizards: The Museum Kiosk
You have just been hired to design the interface for a new interactive digital kiosk at the local history museum. You must translate the client's needs into a clear visual design and technical specification!
The Client Brief
The museum needs a single-screen interface for a physical kiosk located in the main lobby. Visitors must be able to search for specific historical exhibits, view a digital map of the building, and play audio descriptions of the most popular artefacts.
The museum needs a single-screen interface for a physical kiosk located in the main lobby. Visitors must be able to search for specific historical exhibits, view a digital map of the building, and play audio descriptions of the most popular artefacts.
1
Get Organised!
Grab a blank piece of paper, a pencil, and a ruler. If you need some inspiration before you begin, check out some interactive kiosk UI wireframes online.
2
Sketch the Wireframe
Draw a large rectangle to represent the kiosk screen. Sketch out the layout for the interface. You must include:
A search bar.
A map display area.
Buttons or controls to play the audio descriptions.
Keep it neat, use simple boxes and lines (no detailed pictures or colours!), and add short text labels to explain what each box is.
If you are unsure exactly what this sketch should look like, you can ask Google's AI for advice:
Act as an expert UI designer. Explain the difference between a low-fidelity wireframe and a high-fidelity prototype. Keep the response under 80 words. The audience is 15-year-old Key Stage 4 students. Use an encouraging and clear academic tone. Do not use bullet points. NO intro, NO outro, NO deviation from the topic, NO follow-up questions.
3
Write the Design Specification
Next to your wireframe, create a mini design specification. Write down two headings: Hardware Requirements and Software Requirements.
Under Hardware, list the physical input and output devices the kiosk machine will need to make your design work (e.g., how will they type their search? How will they hear the audio?).
Under Software, suggest an Operating System that the kiosk might run on.
Outcome: A neat, annotated wireframe sketch of the museum kiosk interface, accompanied by a clear list of the hardware and software required to build and run it.
Application to the Component Sample PSA
Component 1: Majestic Cinema
In your Component 1 assessment, you will be required to produce your own initial designs for the Majestic Cinema booking system. You will need to draw out clear, annotated wireframes or storyboards showing exactly how the interface will look. Crucially, you must also write a formal design specification that explicitly states what hardware (e.g., touch screen for a mobile app, or mouse and keyboard for a desktop PC) and software (e.g., iOS, Android, or Windows) is required to run your chosen solution.
Component 2: Pedal Power Cycles
For Component 2, before you start building your data dashboard in spreadsheet software, you must plan it. You will need to sketch a wireframe of the dashboard layout, deciding where the pie charts, bar charts, and data tables will sit on the screen to make it as easy as possible for the store manager to understand the electric bike sales data at a glance.
Out of Lesson Learning
⭐ The Majestic Hardware Hunt
Imagine the Majestic Cinema wants to set up automated ticket machines in their lobby. Look around your home and find a digital device that uses an input or output method that would be useful for a cinema kiosk (e.g., a touchscreen on a tablet, or a receipt printer). Write down the name of the device and briefly explain how its specific hardware features could be used in the cinema.
Imagine the Majestic Cinema wants to set up automated ticket machines in their lobby. Look around your home and find a digital device that uses an input or output method that would be useful for a cinema kiosk (e.g., a touchscreen on a tablet, or a receipt printer). Write down the name of the device and briefly explain how its specific hardware features could be used in the cinema.
⭐⭐ The Pedal Power Layout Sketch
Grab a piece of scrap paper and sketch a quick, low-fidelity wireframe for the Pedal Power Cycles dashboard. You must include a clear title, a space for a pie chart showing 'Sales by Bike Type', a space for a bar chart showing 'Sales by Month', and a small navigation menu. Label your sketch clearly using annotations.
Grab a piece of scrap paper and sketch a quick, low-fidelity wireframe for the Pedal Power Cycles dashboard. You must include a clear title, a space for a pie chart showing 'Sales by Bike Type', a space for a bar chart showing 'Sales by Month', and a small navigation menu. Label your sketch clearly using annotations.
⭐⭐⭐ The Mobile vs. Desktop Pitch
The manager at Majestic Cinema cannot decide whether the new booking system should be a mobile application or a desktop website. Write a short, persuasive paragraph advising them on which platform to choose. You must justify your choice by discussing the specific hardware and software requirements of your chosen platform and how they benefit the user.
The manager at Majestic Cinema cannot decide whether the new booking system should be a mobile application or a desktop website. Write a short, persuasive paragraph advising them on which platform to choose. You must justify your choice by discussing the specific hardware and software requirements of your chosen platform and how they benefit the user.
Last modified: April 29th, 2026
