lesson 3.5 - design principles: layout (consistency, placement, grouping)
Squint your way to a better UI! Learn how Consistency, Placement, and Grouping turn messy screens into professional masterpieces. Warning: May cause excessive blinking.
Ever opened an app and felt instantly lost? Or maybe you've used one that felt so natural you didn't even have to think? That's not magic—it's Layout Design! Today, we're going to dive into the world of Consistency, Placement, and Grouping. We’ll even learn a secret designer trick called the Squint Test to see if your designs actually make sense. Get ready to turn your messy screens into masterpieces of Usability!
Learning Outcomes
The Building Blocks (Factual Knowledge)
The Connections and Theories (Conceptual Knowledge)
The Skills and Methods (Procedural Knowledge)
Recall the definitions of layout Consistency, Placement, and Grouping.
Describe the purpose of keeping a Layout close to user expectations.
Analyse how Proximity is used to group related tasks together on a screen.
The Connections and Theories (Conceptual Knowledge)
Describe how Consistency across an interface reduces learning time for the user.
Explain the relationship between Visual Hierarchy and the Placement of important items.
Evaluate a design using the Squint Test to determine if the Visual Weight is balanced.
The Skills and Methods (Procedural Knowledge)
Apply Design Principles to arrange components in a logical Layout.
Create a Wireframe that demonstrates effective Grouping of related input controls.
Evaluate and Justify the positioning of primary Navigation elements based on User Requirements.
Digital Skill Focus: C.3.6 User-Centred Design — Developing Wireframes that focus on Structure and Placement to meet the needs of the end user.
The Art of the Layout
When you look at a screen, your brain is doing a lot of work! A great layout helps the user find what they need without getting a headache. To do this, we use three big ideas:
1
Consistency
Consistency means making sure things look and act the same way across every screen. If your "Back" button is a blue arrow on the home screen, it shouldn't become a red square on the next page! Keeping things consistent improves Usability because users don't have to re-learn how to use your app every time they click a button.
2
Placement
Where you put things matters! Placement is about putting the most important information where people look first (usually the top left in the 'West' of the page). We call this creating a visual hierarchy. By giving important items more visual weight (making them bigger or brighter), we guide the user's eyes to the right place. This helps with navigation and makes the design feel like an intuitive design.
3
Grouping
Grouping is the secret to an organised screen. By using proximity - putting related items close together - we tell the user "these things do the same job." For example, all your social media share buttons should be grouped together. This reduces cognitive load, meaning the user doesn't have to hunt around for what they need.
4
The Secret Weapon: The Squint Test
How do you know if your layout actually works? You use the Squint Test! By blurring your vision, you stop seeing the words and start seeing the structure. If the most important parts of your wireframe still stand out when blurry, you've nailed it!
Task The Designer's Secret Weapon
Ever wondered how pros check if their designs are easy to use? They don't just look at them—they blur them! Today, you are going to build your own digital tool to do exactly that and then use it to fix the Majestic Cinema interface.
1
Get Organised: Build Your Squint Tool!
Follow these steps carefully to add the "Squint Test" button to your browser bar.
1
Copy this exact code:
javascript:(function(){document.body.style.filter = document.body.style.filter === 'blur(5px)' ? '' : 'blur(5px)';})()
2
In Chrome or Edge, press CTRL + Shift + B to show your bookmarks bar.
3
Right-click an empty space on the bar and select Add Page.
4
Name it "Squint Test" and paste the code you copied into the URL box.
5
Save it! Now, click that button on any website to see its structure disappear into blobs. Click it again to unblur!
2
Watch & Learn
Before you start auditing, watch this short video to see the squint test in action. There are questions at various points during the video which you must answer.
3
The Great Blur Audit
Visit a few different websites (try a movie site, a news site, and your school website). Use your Squint Test button on each.
Which elements stand out first? (This is your visual hierarchy).
Do related elements group together visually?
Is the "Call to Action" (like a 'Buy' button) still distinct when blurred?
4
Design for Majestic Cinema
Create a wireframe for the Majestic Cinema "Ticket Selection" screen.
Use consistency: keep your "Home" button in the same place as your previous designs.
Use placement: make the movie poster the first thing the eye sees.
Use grouping: use proximity to keep all the different ticket prices in one logical block.
Use whitespace: separate your groups using whitespace (remember, this doesn't have to be white.)
Outcome: A working Squint Tool and a cinema wireframe that passes the blur test with clear groups.
Application to the Component Sample PSA
Majestic Cinema: The Layout Masterclass
In your Component 1 PSA (Majestic Cinema), you will be tasked with designing a series of screens for a ticket booking system. Applying today's lesson is vital because:
ConsistencyI have no idea what this means: Your "Home" and "Help" buttons must be in the exact same PlacementI have no idea what this means on every screen (e.g., the seat selection, film details, and payment screens) so elderly patrons don't get confused.
GroupingI have no idea what this means: On the "Film Times" screen, you must use ProximityI have no idea what this means to group the time, screen number, and price for a single movie together. If they are scattered, the user will find it hard to process the information.
PlacementI have no idea what this means: The "Book Now" or "Pay" button is your Call to Action. It needs high Visual WeightI have no idea what this means, meaning it should be placed in a prominent position where the eye naturally lands after selecting tickets.
By passing your designs through the Squint Test, you can ensure that even in a busy, dimly lit cinema foyer, your interface remains intuitive and easy to use.
Out of Lesson Learning
⭐ The Consistency Detective
Open the website of a major cinema (like Odeon or Cineworld). Navigate through three different pages: the home page, a movie description page, and the booking page. Look at the main navigation menu at the top. Is it in the same place on every page? Does it use the same colours and fonts? If you find a button that moves or changes style, explain how that might slow down a user who is trying to book tickets quickly.
Open the website of a major cinema (like Odeon or Cineworld). Navigate through three different pages: the home page, a movie description page, and the booking page. Look at the main navigation menu at the top. Is it in the same place on every page? Does it use the same colours and fonts? If you find a button that moves or changes style, explain how that might slow down a user who is trying to book tickets quickly.
⭐⭐ The Majestic Mock-up
Sketch a quick layout for the Majestic Cinema "Member Login" screen. On this screen, you need a box for "Username", a box for "Password", a "Login" button, and a "Forgot Password?" link. Apply the principle of Grouping to make sure these four items look like one single task. Use the Squint Test on your sketch by blurring your eyes. If the login area doesn't look like a single, clear block, move the items closer together until it does.
Sketch a quick layout for the Majestic Cinema "Member Login" screen. On this screen, you need a box for "Username", a box for "Password", a "Login" button, and a "Forgot Password?" link. Apply the principle of Grouping to make sure these four items look like one single task. Use the Squint Test on your sketch by blurring your eyes. If the login area doesn't look like a single, clear block, move the items closer together until it does.
⭐⭐⭐ The Hierarchy Architect
The manager of Majestic Cinema wants a "Special Offers" screen. It needs to show a massive 50% discount on popcorn, a small reminder about "No Smoking", and a list of upcoming films. Use your knowledge of Visual Hierarchy and Placement to plan this layout. Write a short justification explaining where you would place the popcorn offer versus the no-smoking sign. Why does the popcorn offer need more Visual Weight, and how does your placement help the cinema make more money while still following safety rules?
The manager of Majestic Cinema wants a "Special Offers" screen. It needs to show a massive 50% discount on popcorn, a small reminder about "No Smoking", and a list of upcoming films. Use your knowledge of Visual Hierarchy and Placement to plan this layout. Write a short justification explaining where you would place the popcorn offer versus the no-smoking sign. Why does the popcorn offer need more Visual Weight, and how does your placement help the cinema make more money while still following safety rules?
Last modified: January 18th, 2026
