Visual & Performing Arts · 9th Grade · The Digital Frontier: Media Arts and Design · Weeks 19-27

Interactive Media and Web Design Basics

An introduction to the principles of user experience (UX) and user interface (UI) design for interactive digital platforms.

• Common Core State Standards
• NCAS: Creating MA.Cr1.1.HSProf
• NCAS: Producing MA.Pr5.1.HSProf

About This Topic

User experience (UX) and user interface (UI) design sit at the intersection of visual art, psychology, and technology, and they shape the digital products students use every day. This topic introduces ninth graders to the core principles of interactive design: visual hierarchy, navigation logic, accessibility, and responsive feedback. NCAS Creating MA.Cr1.1.HSProf asks students to generate and organize artistic ideas, and wireframing -- sketching a digital layout before building it -- is one of the most direct applications of that standard in a media arts context.

The distinction between UX (how a product functions and feels) and UI (how it looks visually) helps students see design as a two-part problem. A beautiful interface that confuses users fails. A clear interface with poor visual execution also falls short. Students who understand both dimensions develop the ability to critically evaluate the digital products they encounter daily, and that analytical awareness is a form of visual literacy that NCAS Responding standards explicitly require.

This topic benefits most from active learning because design judgment is built through making and critiquing rather than reading about principles. When students wireframe an actual app, test a poorly structured website for usability, or evaluate peer mockups for clarity and navigation logic, they develop the empathy-driven thinking that distinguishes strong designers from those who only think about aesthetics.

Key Questions

1. How does effective UI/UX design enhance user engagement and accessibility?
2. Compare the design principles for static images versus interactive web elements.
3. Construct a basic wireframe for a website or app, justifying your layout and navigation choices.

Learning Objectives

• Analyze the relationship between user interface elements and user experience outcomes in a given digital product.
• Compare the design principles for static visual elements versus interactive web components, identifying key differences in user interaction.
• Construct a basic wireframe for a website or app, justifying layout and navigation choices based on UX/UI principles.
• Evaluate the accessibility of a digital interface for users with different needs, identifying potential barriers.
• Explain how visual hierarchy and navigation logic contribute to user engagement and task completion.

Before You Start

Introduction to Digital Art and Design Tools

Why: Students need basic familiarity with digital creation tools and concepts before applying them to interactive design.

Principles of Visual Composition

Why: Understanding concepts like balance, contrast, and alignment is fundamental to creating effective user interfaces.

Key Vocabulary

User Experience (UX)	The overall feeling and satisfaction a user has when interacting with a product, system, or service. It focuses on usability, accessibility, and desirability.
User Interface (UI)	The visual elements and interactive components of a digital product that users engage with, such as buttons, menus, and layouts. It is the aesthetic and interactive layer.
Wireframe	A basic visual guide or blueprint of a website or app's structure and layout. It focuses on content placement and functionality, not visual design.
Visual Hierarchy	The arrangement and presentation of design elements to guide the viewer's eye through content in order of importance. This helps users scan and understand information quickly.
Accessibility	The practice of designing products, devices, services, or environments for people with disabilities. In web design, this means ensuring everyone can perceive, understand, navigate, and interact with digital content.

Watch Out for These Misconceptions

Common Misconception

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

What to Teach Instead

Visual aesthetics are one layer of design, but usability, accessibility, and clear information architecture are equally important and must come first. A visually striking site that confuses users about where to click has failed as a design. Usability testing exercises where students try to complete a simple task on a deliberately poorly structured site make this concrete and unforgettable.

Common Misconception

UX and UI design are the same discipline.

What to Teach Instead

UX (user experience) focuses on the entire user journey: how intuitive is the navigation, how easy is the product to use, does it solve the user's problem efficiently? UI (user interface) focuses on the visual layer: typography, color, icons, spacing. Strong products need both, but they involve different thinking modes and often different specializations in professional practice.

Common Misconception

Design choices are mostly subjective -- there are no real right or wrong answers.

What to Teach Instead

While aesthetics involve judgment, UX decisions can be tested objectively. If users consistently fail to find the navigation menu, that is a measurable design failure regardless of how attractive the layout looks. Peer usability tests where students observe classmates trying to complete a task in their wireframe reveal that design choices have real, observable consequences.

Active Learning Ideas

Usability Test: The 5-Second Rule

Show students a screenshot of an unfamiliar website for exactly five seconds, then ask them to write: what the site is for, what they should do first, and what drew their eye. Groups compare answers to identify which design elements created clear hierarchy -- or failed to. The debrief introduces visual hierarchy, contrast, and call-to-action placement as concrete design tools.

20 min·Small Groups

Think-Pair-Share: Static vs. Interactive Design

Provide students with a printed poster and a screenshot of an app home screen covering the same topic. In pairs, students identify three design decisions that differ specifically because one is static and one requires tapping, navigation, and loading states. Partners present their most interesting finding before a class synthesis on what interactivity demands from a designer.

25 min·Pairs

Studio Challenge: Wireframe Design

Students wireframe a 3-screen app for a school-relevant purpose (a lunch menu browser, a library reservation system, a homework tracker). They must show navigation between screens and annotate three specific design decisions with UX reasoning, explaining why a given element is placed where it is based on user needs rather than personal preference.

50 min·Individual

Gallery Walk: Accessibility Audit

Post printouts of eight different website home pages with varying levels of visual accessibility (low contrast, unclear navigation, text-heavy layouts, hidden CTAs). Students circulate and mark each with color-coded sticky dots for usability strengths and weaknesses, using a short checklist of accessibility principles. Debrief identifies which design choices consistently create barriers for users.

30 min·Small Groups

Real-World Connections

• UX/UI designers at companies like Google and Apple create the interfaces for popular apps like Google Maps and the iOS operating system, ensuring millions of users can easily navigate and utilize complex features.
• Web developers at non-profit organizations, such as the World Wildlife Fund, use UX/UI principles to design websites that are accessible and engaging for diverse audiences, encouraging donations and support for conservation efforts.
• Game designers for studios like Nintendo meticulously craft the user interface and experience for video games, balancing intuitive controls with immersive gameplay to keep players engaged for hours.

Assessment Ideas

Exit Ticket

Provide students with a screenshot of a popular app's main screen. Ask them to write two sentences identifying one UI element and one UX consideration evident in the design, and one sentence explaining how they contribute to the user's interaction.

Peer Assessment

Students will exchange their basic wireframe sketches. Instruct them to provide feedback using these prompts: 'Is the navigation clear? (Yes/No, explain why)', 'Is the purpose of each section obvious? (Yes/No, explain why)', and 'Suggest one change to improve usability.'

Quick Check

Present students with two different website homepage designs for the same hypothetical product. Ask them to select the design they believe offers a better user experience and write 2-3 sentences justifying their choice, referencing visual hierarchy or navigation logic.

Frequently Asked Questions

What is the difference between UX and UI design?

UX design focuses on how a digital product works from the user's perspective -- the flow, logic, and ease of navigation. UI design focuses on how it looks visually -- typography, color palette, icons, and layout. Both are essential for a successful product, but they involve different thinking modes: UX is structural and empathy-driven, UI is visual and aesthetic. Many designers practice both, but understanding the distinction helps students approach design problems more systematically.

What is a wireframe in web design?

A wireframe is a low-fidelity sketch or diagram showing the placement of content and navigation elements without visual styling. It lets designers test structure, hierarchy, and flow before investing time in visual design or code. Wireframes can be hand-drawn or created digitally in tools like Figma or Balsamiq. Starting with wireframes prevents the common mistake of falling in love with visual details before the underlying structure is sound.

How do designers know if a UX design is working?

Designers test their work by observing real users try to complete specific tasks without any guidance. They watch for hesitation, confusion, or errors. Even informal usability tests -- asking a classmate to use a prototype for five minutes without explanation -- generate useful data. The goal is identifying friction points before they become embedded in a live product, which is why testing at the wireframe stage is far cheaper than fixing problems after launch.

How does active learning support understanding of UX and UI design?

Design principles become intuitive only through making and critique. When students wireframe, test each other's prototypes, or run usability audits on real websites, they build the habit of thinking from the user's perspective rather than the creator's. This empathy-driven process is the core of UX thinking and cannot be taught through lecture alone -- it requires repeated cycles of design, test, and revise that active learning structures are built to support.