Visual & Performing Arts · 12th Grade · Visual Storytelling and Media Arts · Weeks 28-36

Web Design and User Experience (UX)

Understanding the principles of designing effective and engaging interactive digital interfaces.

• Common Core State Standards
• NCAS: Creating MA.Cr3.1.HSAdv
• NCAS: Producing MA.Pr6.1.HSAdv

About This Topic

Web design and UX sit at the intersection of visual art, communication theory, and human psychology. In US 12th grade media arts courses, this topic introduces students to the principles that make digital interfaces effective , information hierarchy, visual flow, accessibility standards, and the psychological principles behind intuitive navigation. Understanding these principles is increasingly essential for students entering college programs or careers in design, marketing, or technology.

Students learn that good UX is invisible: when users can accomplish their goals without thinking about the interface, the design has succeeded. They examine how color psychology, Fitts's Law, and Gestalt principles of visual organization translate directly into design decisions on websites and apps they use every day. They also engage with WCAG (Web Content Accessibility Guidelines) standards, understanding accessibility not just as compliance but as a core value of inclusive design practice.

Active learning is particularly effective for this topic because UX is fundamentally empirical , designs need to be tested with real users. Peer usability testing, where students navigate each other's wireframes and report their experience, replaces abstract speculation with direct evidence about what actually works and what confuses people.

Key Questions

1. Explain how user interface (UI) design impacts user experience (UX).
2. Analyze the psychological principles behind effective website navigation.
3. Design a wireframe for a website that prioritizes user accessibility.

Learning Objectives

• Analyze how color theory and typography choices influence user perception and task completion on a given website.
• Evaluate the effectiveness of website navigation structures based on established usability heuristics and psychological principles.
• Design a functional wireframe for a mobile application that adheres to WCAG 2.1 AA accessibility standards.
• Critique the user interface of a popular e-commerce website, identifying areas for improvement in user flow and information architecture.
• Synthesize principles of visual hierarchy and Gestalt psychology to create a low-fidelity prototype for a news aggregator website.

Before You Start

Digital Media Fundamentals

Why: Students need a basic understanding of digital file types, resolution, and image editing to grasp the creation of digital assets for web design.

Principles of Visual Design

Why: Foundational knowledge of color theory, typography, layout, and composition is essential for creating aesthetically pleasing and effective user interfaces.

Key Vocabulary

User Interface (UI)	The visual elements and interactive components of a digital product that a user directly interacts with, such as buttons, menus, and layouts.
User Experience (UX)	The overall feeling and satisfaction a user has when interacting with a digital product, encompassing usability, accessibility, and desirability.
Wireframe	A basic visual guide representing the skeletal framework of a website or application, focusing on layout, content placement, and functionality without visual design elements.
Information Architecture (IA)	The practice of organizing, structuring, and labeling content in an effective and sustainable way to help users find information and complete tasks.
Usability Heuristics	A set of general principles for user interface design, often used as a checklist to evaluate the ease of use of a system.
WCAG	Web Content Accessibility Guidelines, a set of standards for making web content more accessible to people with disabilities.

Watch Out for These Misconceptions

Common Misconception

Good web design is primarily about making things look visually impressive.

What to Teach Instead

Visual appeal is one element of web design, but UX prioritizes function over aesthetics. A beautiful website that is confusing to navigate fails its users. Peer usability testing, where students experience first-hand what confuses them in a design, is the most effective way to shift students from aesthetic to functional thinking about digital interfaces.

Common Misconception

Accessibility features are only necessary for users with disabilities.

What to Teach Instead

Accessible design improves the experience for all users , high-contrast text is easier to read in sunlight, clear navigation benefits users with slow connections, and descriptive labels help everyone understand their options. Reviewing real WCAG guidelines with a class and finding their impact in apps students already use makes accessibility feel practically relevant rather than purely technical.

Active Learning Ideas

Usability Audit: Navigate a Peer's Wireframe

Students are assigned a different peer's hand-drawn wireframe to navigate, completing a structured task such as finding the contact page or locating pricing information. They annotate what confused them and what worked well, then the class reconvenes to identify patterns in where UX succeeded or failed across the different designs.

35 min·Pairs

Think-Pair-Share: App Comparison Analysis

Students individually select two competing apps serving the same function , two music streaming services or two food delivery apps , and identify three specific UX differences. Pairs compare observations before the class builds a shared list of UX principles illustrated by concrete examples from apps they actually use.

30 min·Pairs

Accessibility Redesign Challenge

Working in small groups, students receive a screenshot of a real website with documented accessibility issues (contrast ratio, missing alt text, unclear navigation labels). They mark up the screenshot with specific changes that would improve WCAG compliance, then present their recommendations to the class with justifications grounded in accessibility standards.

45 min·Small Groups

Wireframe Sprint with Live Testing

Pairs design a wireframe for a school event registration page, starting with user goals before moving to visual layout. They present their wireframe to a second pair who tries to complete the registration task and reports back on where they succeeded or got stuck, giving designers direct feedback to incorporate.

60 min·Pairs

Real-World Connections

• UX/UI designers at companies like Google and Apple research user behavior to refine the interfaces of their operating systems and applications, aiming for intuitive interactions that feel natural to billions of users.
• Web developers at Amazon use A/B testing on product pages and checkout flows to optimize conversion rates, directly impacting sales by making the purchasing process smoother and more trustworthy.
• Information architects at major news organizations, such as The New York Times, structure complex websites to ensure readers can easily find articles, navigate between sections, and discover related content.

Assessment Ideas

Peer Assessment

Students exchange their wireframes for a specific website task. Each student provides feedback using these prompts: 'What was easy to understand about this layout? What part of the task was confusing? Suggest one specific change to improve clarity.'

Exit Ticket

Ask students to write down two specific UI elements on a website they used today and explain how their design contributed to a positive or negative UX. Then, have them list one principle from the lesson that could improve that element.

Quick Check

Present students with three different website navigation menus. Ask them to identify which menu best follows principles of clear labeling and logical grouping, and to explain their reasoning in one to two sentences.

Frequently Asked Questions

What is the difference between UI design and UX design?

UI (User Interface) design focuses on the visual elements of an interface: buttons, typography, color, and icons. UX (User Experience) design is broader, addressing the entire experience a user has while trying to accomplish a goal. Good UI contributes to good UX, but UX also involves research, testing, and information architecture decisions that happen before any visual design begins.

How can active learning help students understand UX design principles?

UX principles are only legible through use. When students navigate each other's wireframes and describe where they got confused, they experience UX as a lived problem rather than an abstract definition. The usability audit format gives this experience a structure that generates specific, actionable feedback and makes the session feel more professional than purely subjective critique.

What free tools can students use to create wireframes in class?

Figma (free for education), Canva, Whimsical, and Miro all support wireframing. For classes with limited tech access, paper wireframing is equally valid for learning the core principles. The goal is thinking through user flows and information hierarchy, which works just as well on paper as on screen and keeps the focus on design thinking rather than software skills.

How does web design connect to NCAS standards for 12th grade media arts?

The advanced media arts producing standard (MA.Pr6.1.HSAdv) specifically addresses designing interactive digital media, which web design projects meet directly. These projects also build skills in visual composition, information literacy, and functional communication , competencies that appear across 12th grade college and career readiness frameworks in multiple subject areas.