Art · Primary 6

Active learning ideas

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.

• MOE Syllabus Outcomes
• MOE Primary Art Syllabus 2018: Content, Media, 2D (Digital Media)
• MOE Primary Art Syllabus 2018: LO2, Communicate ideas, thoughts and feelings through the creation of artworks
• MOE Primary Art Syllabus 2018: Content, Elements of Art and Principles of Design, Balance and Unity

• 25–50 min
• Pairs → Whole Class
• 4 activities

Activity 01

• 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.

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.

What to look for

Present students with a screenshot of a website. Ask them to identify three elements that contribute to its visual hierarchy and explain how they guide the viewer's eye. Record responses on a shared digital board.

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

Activity 02

• 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.

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.

What to look for

Students share their digital portfolio wireframes (or sketches). Partners provide feedback using a checklist: Is the navigation clear? Is the artwork the main focus? Is there enough whitespace? Partners suggest one specific improvement.

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

Activity 03

• 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.

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.

What to look for

On an exit ticket, ask students to define 'User Experience' in their own words and list one website they find particularly user-friendly, explaining why in one sentence.

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

Activity 04

• 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.

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.

What to look for

Present students with a screenshot of a website. Ask them to identify three elements that contribute to its visual hierarchy and explain how they guide the viewer's eye. Record responses on a shared digital board.

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

A few notes on teaching this unit

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.

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

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

  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.

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

  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.

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

  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.

---

Methods used in this brief

• Project-Based Learning