The Blueprint: Defining Requirements and Considering Storage
Description: This page covers the crucial factors of user requirements—what the interface must do and how well it must do it—and how the simple constraint of storage space can dramatically affect UI design choices.
(Image: A designer at a desk with sketches, wireframes, and a project brief checklist, clearly planning out the features of an app.)
Before a single line of code is written or a pixel is placed, a designer must understand the rules of the game. In UI design, these rules are called user requirements. They are the blueprint for a successful project, defining what the client needs and what the user expects. Alongside this, a very practical consideration can make or break a project: storage.
What are User Requirements? ✅
User requirements are a formal list of the functions and characteristics that a user interface must have. Getting these right is the most important step in any project. We split them into two distinct categories:
1. Functional Requirements (What it DOES)
These are the essential actions the interface must be able to perform. They are the 'verbs' of the project. If a functional requirement is not met, the project is a failure.
For our Majestic Cinema project, examples include:
The system must allow users to view a list of films currently showing.
The system must provide a way to book tickets.
The system must display information about the cinema's facilities.
2. Non-Functional Requirements (HOW WELL it does it)
These requirements don't describe an action, but a quality, constraint, or characteristic of the interface. They are the 'adjectives' that define the user experience.
For our Majestic Cinema project, examples include:
The layout must be consistent across all four screens.
The language used must be clear and easy to understand.
The ticket booking process must be simple and intuitive.
The design must be accessible to users with disabilities.
(Animation: A simple animation showing a basic wireframe of a website. A "Functional" label points to a 'Buy Now' button. A "Non-Functional" label points to a note that says "Layout must be clean and simple".)
The Storage Factor 💾
It's easy to forget, but every digital asset—every image, every video, every font, every line of code—takes up physical storage space on a device. The combined size of these assets determines the overall size of an application or website.
Heavy Interfaces: UIs that use very high-resolution photos, background videos, complex animations, and custom fonts can be very large, sometimes taking up several gigabytes (GB) of storage. This is common in high-end video games.
Lightweight Interfaces: UIs that use simple graphics (or no graphics at all), standard system fonts, and efficient code can be tiny, taking up only a few megabytes (MB).
Why does this matter?
Device Limitations: Many users, especially those in developing countries or with older models, have devices with very limited storage. If an app is too big, they simply cannot install it.
Download Times: A larger app or website takes longer to download, especially on a slow mobile data connection. Users are impatient and may give up if it takes too long.
Performance: Loading large assets into memory can slow down the performance of the UI, making it feel laggy.
A smart designer must make a trade-off. They might want to use a beautiful, high-quality video on the homepage, but they must consider if the negative impact on storage, download speed, and performance is worth it. For our Majestic Cinema project, we need to choose images that are good quality but also optimised (compressed) to keep the overall size of the interface low.
(Video: Embed a short video explaining how to "optimise images for the web", showing the difference in file size between an uncompressed and a compressed image.)