1
Project phase 1
Plan the work
State the goal, audience or user, and the evidence a strong result needs. Explain how Layout changes your plan.
Offline-ready notes · progress saves on this device
Lesson 1 of 2
Layout, Grids & Visual Hierarchy
Read the overview in
English overview
Treat graphic design as intentional communication by using layout, grid systems, alignment, spacing, scale, and focal points to guide the viewer in a deliberate order.
Four clear stages
Learn → Project → Check → Finish
- 1LearnRead the lesson and examplesUnderstand the examples before beginning the project.Do this now
- 2ProjectRedesign a poster for five-second clarityPlan it, create it, then prove it meets the definition of done.Next
- 3CheckAnswer all 30 questionsCorrect weak spots using the explanation after each answer.Next
- 4FinishMark the lesson completeFinish the course and review your progress tree.Next
Course outlineDatabase Management & Graphic Design
Detailed lesson
Learn the ideas, then use them.
Read the classroom walkthrough below. The project that follows turns the lesson into a concrete result.
Lesson project · Visual design
Redesign a poster for five-second clarity
A revised poster using a grid, focal point, aligned edges, purposeful contrast, and tested reading order.
0%0 of 3 checks
2
Project phase 2
Create the deliverable
Rebuild a crowded poster on paper or in Canva using one grid, one focal point, aligned edges, and deliberate empty space. Ask a partner to name the first three things they notice.
3
Project phase 3
Prove and improve
Use Grid system and Visual hierarchy to check the result. Record one piece of evidence, one correction, and one improvement you would make next.
Complete walkthroughDetailed notes, examples, and guided practice
Why this lesson matters
Treat graphic design as intentional communication by using layout, grid systems, alignment, spacing, scale, and focal points to guide the viewer in a deliberate order.
The goal is not to memorize vocabulary. By the end of the lesson, you should be able to use the ideas in a realistic situation, explain the reason for your choices, and check whether the result actually works for the intended person or task.
Learning objectives
- Explain Layout in your own words.
- Apply Grid system to a realistic classroom or community example.
- Connect Layout with Visual hierarchy when making a decision.
- Complete the practice task and reflect on one improvement.
Core ideas
1. Layout
The planned arrangement of text, images, and empty space that determines how a viewer moves through information.
In practice: Look for this idea while you complete the lesson task. Pause before each major step and explain how Layout changes what you choose, create, or check.
2. Grid system
An invisible set of columns, rows, or baselines that creates alignment, rhythm, and consistency across a design.
In practice: Look for this idea while you complete the lesson task. Pause before each major step and explain how Grid system changes what you choose, create, or check.
3. Visual hierarchy
The order of attention created through scale, contrast, spacing, position, and grouping so important content is seen first.
In practice: Look for this idea while you complete the lesson task. Pause before each major step and explain how Visual hierarchy changes what you choose, create, or check.
How the ideas connect
Start with Layout to understand the foundation of the lesson. Use Grid system to turn that understanding into an action. Then apply Visual hierarchy to check the quality, safety, or usefulness of the result. The three ideas are strongest when you can explain their relationship rather than treating them as separate definitions.
Guided walkthrough
- Name the goal. In one sentence, write what you are trying to understand, create, or improve.
- Make a prediction. Before touching a device, use Layout and Grid system to predict what a strong result should look like.
- Complete the task. Rebuild a crowded poster on paper or in Canva using one grid, one focal point, aligned edges, and deliberate empty space. Ask a partner to name the first three things they notice.
- Check the outcome. Use Visual hierarchy to inspect the result. Ask what worked, what did not, and what evidence supports your judgment.
- Explain and revise. Tell a partner what you changed and why. Make one small improvement, then compare the new result with the first one.
Worked classroom scenario
Imagine two learners sharing one device. The first learner is the driver and performs the steps; the second is the navigator and reads the goal, predicts the next step, and checks the result. Halfway through the task, switch roles. Both learners should be able to explain how Layout, Grid system, and Visual hierarchy appeared in the work.
If no device is available, complete the same reasoning on paper: sketch the screen or result, label each decision, and describe what you would test when a device becomes available.
Common mistakes and fixes
- Rushing into the tool: Write the goal and prediction first so every click or step has a reason.
- Copying without understanding: After each major step, explain it in your own words to a partner.
- Accepting the first result: Compare the outcome with the goal and make at least one deliberate improvement.
- Letting one person control a shared device: Rotate driver and navigator roles so both learners think and practice.
Independent practice
Rebuild a crowded poster on paper or in Canva using one grid, one focal point, aligned edges, and deliberate empty space. Ask a partner to name the first three things they notice.
For an extra challenge, adapt the task for a different audience or community need. Write two sentences explaining what changed and which lesson idea guided your decision.
Check your understanding
- How would you explain Layout to someone new to the topic?
- What is one realistic example of Grid system outside this classroom?
- When might Visual hierarchy prevent a weak, unsafe, or confusing result?
- How are Layout and Grid system connected?
- What evidence would convince you that your practice result works?
- If you repeated the activity tomorrow, what would you improve first and why?
Key takeaway
Treat graphic design as intentional communication by using layout, grid systems, alignment, spacing, scale, and focal points to guide the viewer in a deliberate order.
You are ready to move on when you can explain the three core ideas, complete the practice without copying, and describe one improvement using evidence from your result.