Introduction to Web Design: Visual Layout

Active learning helps students grasp visual layout because digital design is best understood through hands-on practice. When students sketch, test, and revise, they immediately see how principles like hierarchy and whitespace shape user experience. This tactile engagement builds lasting understanding that lectures alone cannot achieve.

• Primary 6
• Art
• 4 activities
• 25 min–50 min

Learning Objectives

1. Analyze the use of visual hierarchy elements (size, color, contrast, whitespace) to guide user attention on a given webpage.
2. Design a wireframe for a digital art portfolio that prioritizes user navigation and aesthetic appeal.
3. Evaluate the user-friendliness and visual effectiveness of an existing website based on established design principles.
4. Compare and contrast the layout strategies of two different online art galleries, identifying strengths and weaknesses.
5. Create a simple digital presentation of artwork using a web design tool, applying principles of visual hierarchy.

Project-Based Learning

⏱ 35 min·Pairs

Pair Wireframing: Portfolio Sketches

Pairs brainstorm and sketch wireframes for a one-page art portfolio on paper, labeling hierarchy elements like hero image and navigation. They swap sketches midway to add UX notes. Finalize with colored markers for emphasis.

Prepare & details

Explain how visual hierarchy guides a user's attention on a webpage.

Facilitation Tip: During Pair Wireframing, circulate with a timer to keep partners focused on one section of the portfolio at a time.

Setup: Flexible workspace with access to materials and technology

Materials: Project brief with driving question, Planning template and timeline, Rubric with milestones, Presentation materials

• Apply
• Analyze
• Evaluate
• Create
• Self-Management
• Relationship Skills
• Decision-Making

Project-Based Learning

⏱ 40 min·Small Groups

Small Group Site Critique: Real Websites

Groups of four visit three sample sites on tablets, noting layout strengths and flaws using a shared checklist for hierarchy and UX. Discuss findings, then vote on redesign priorities. Present one improvement idea to class.

Prepare & details

Design a simple digital portfolio layout that effectively showcases artistic work.

Facilitation Tip: For Small Group Site Critique, assign each group a different website feature to analyze so discussions stay focused.

Setup: Flexible workspace with access to materials and technology

Materials: Project brief with driving question, Planning template and timeline, Rubric with milestones, Presentation materials

• Apply
• Analyze
• Evaluate
• Create
• Self-Management
• Relationship Skills
• Decision-Making

Project-Based Learning

⏱ 50 min·Individual

Individual Digital Prototype: Canva Layout

Students use Canva or Google Slides to build a digital portfolio page, applying hierarchy rules to their own art. Export as image for peer review. Include a self-reflection on user flow.

Prepare & details

Critique a website's design for its user-friendliness and aesthetic appeal.

Facilitation Tip: In Individual Digital Prototype, demonstrate Canva’s alignment tools once before letting students experiment freely.

Setup: Flexible workspace with access to materials and technology

Materials: Project brief with driving question, Planning template and timeline, Rubric with milestones, Presentation materials

• Apply
• Analyze
• Evaluate
• Create
• Self-Management
• Relationship Skills
• Decision-Making

Project-Based Learning

⏱ 25 min·Whole Class

Whole Class Usability Test: Gallery Walk

Display student prototypes around room. Class members rotate, testing navigation by timing tasks like 'find contact info.' Provide sticky note feedback on clarity and appeal.

Prepare & details

Explain how visual hierarchy guides a user's attention on a webpage.

Facilitation Tip: During Whole Class Usability Test, assign specific roles like ‘navigator’ and ‘note-taker’ to ensure all students participate.

Setup: Flexible workspace with access to materials and technology

Materials: Project brief with driving question, Planning template and timeline, Rubric with milestones, Presentation materials

• Apply
• Analyze
• Evaluate
• Create
• Self-Management
• Relationship Skills
• Decision-Making

Teaching This Topic

Teach visual layout by modeling your own thinking process aloud. For example, when arranging elements, verbalize your choices: ‘I’m making the title larger because it’s the most important information.’ Avoid relying solely on abstract rules; instead, connect principles to real-world examples students encounter daily. Research shows that when teachers demonstrate cognitive strategies explicitly, students internalize them more effectively.

What to Expect

Successful learning looks like students confidently explaining why certain layouts work better than others. They should use terms like contrast, flow, and whitespace when justifying their designs. By the end, they will present a digital portfolio that balances aesthetics with clear navigation.

Watch Out for These Misconceptions

Common Misconception

During Pair Wireframing, watch for students using too many colors or fonts in their sketches.

What to Teach Instead

Prompt partners to limit their sketches to two colors and two fonts, then discuss how this constraint improves clarity. Guide them to focus on size and contrast for hierarchy instead.

Common Misconception

During Pair Wireframing, watch for students assuming the largest element must always be the most important.

What to Teach Instead

Have partners rearrange their sketches, testing different sizes for the title and artwork. Challenge them to explain which layout best guides the viewer’s eye to the portfolio’s purpose.

Common Misconception

During Whole Class Usability Test, watch for students assuming users will naturally find all information.

What to Teach Instead

Direct testers to observe where peers get stuck during the gallery walk. Ask them to suggest one design change that would make navigation more intuitive, such as adding section labels.

Assessment Ideas

Quick Check

After Small Group Site Critique, present a screenshot of a website and ask students to identify three elements that contribute to its visual hierarchy. Record responses on a shared digital board to reveal common misconceptions.

Peer Assessment

After Pair Wireframing, have partners exchange sketches and provide feedback using a checklist: Is the navigation clear? Is the artwork the main focus? Is there enough whitespace? Partners must suggest one specific improvement before continuing.

Exit Ticket

During Whole Class Usability Test, give students an exit ticket asking them to define ‘User Experience’ in their own words and list one website they find particularly user-friendly, explaining why in one sentence.

Extensions & Scaffolding

• Challenge students who finish early to add an interactive element (like a hover effect) to their Canva prototype.
• Scaffolding: Provide pre-made Canva templates with locked elements for students struggling with the blank canvas.
• Deeper exploration: Have students research the color psychology behind their chosen palette and present findings to the class.

Key Vocabulary

Visual Hierarchy	The arrangement of elements on a page to show their order of importance, guiding the viewer's eye through the content.
User Experience (UX)	The overall feeling a person has when interacting with a website or digital product, focusing on ease of use and satisfaction.
Whitespace	The empty space around and between elements on a page, used to improve readability and create visual separation.
Call to Action (CTA)	A prompt on a website designed to get an immediate response, such as 'View Gallery' or 'Contact Me'.
Wireframe	A basic visual guide or blueprint of a webpage's structure, showing the layout of content and interactive elements without visual design details.