Introduction to Web Design and UX
Courses and Programs · Case study
A first web design course built for designers. Students take a ready-made client brand from a style tile to a published, responsive, accessible website, test it with real people along the way, and finish by turning their hand-built design into a small generator for one more page.
Goal
Teach students to design websites that express a brand and serve the people who use them, and to defend every decision with evidence from usability and accessibility testing. The course centers visual design for designers, then subjects each visual choice to empirical testing with real people.
The term is a single authentic project: a published, responsive, five-to-seven-page website for a fictitious client that Gemini role-plays. Because this is not a branding course, each student chooses one of four ready-made brand kits (logo, colors with hex values, a Google Fonts pairing, voice, photo style and key messages); Graphic Design and Digital Media Arts students may bring a brand of their own with approval. Gemini plays the owner and supplies the brief and the interview answers; the student supplies the research questions, the structure, every visual and the defense.
Audience
A first-year course that assumes no prior web or coding experience. No coding is required: every student builds and publishes in Google Sites, and a code option is available. A short See the Code lesson shows the HTML and CSS that Sites writes, so students understand what the accessibility checks are reading. It serves four programs.
| Program | What the course gives them |
|---|---|
| Graphic Design | An identity system carried onto responsive layouts, interface components, and accessible color |
| Digital Media Arts | Imagery, video, and motion placed on the web at the right size, with captions |
| Animation | Motion and illustration used for interface feedback and storytelling, kept accessible |
| Web Design certificate | The design and UX foundation for the certificate, with a hand-coded path for students who want it |
Process
Backward design set the sequence: the final website and case-study rubric was written first, with one criterion per competency, and each of the twenty-four process steps builds a skill that rubric assesses. Research precedes form: discovery, personas and content come before any visual, so students design around real content rather than placeholder text. Proto-personas are labeled as assumptions and checked in two rounds of usability testing with adult participants. Gemini never stands in for a test participant.
Deliverable options in development with the STEAMworks XR lab include a laser-cut sign with an NFC tag that opens the student’s site, laser-cut cardboard device frames for paper prototyping, and supervised drone photography for client imagery.
The arc of the semester
| Weeks | Phase | Signature work |
|---|---|---|
| 1 to 2 | Getting started and discovery | Module 0 setup, the AI Primer and the syllabus quiz; then a brand kit, a Figma warm-up and a discovery interview with the Gemini client that yields measurable website objectives |
| 3 to 5 | Research and structure | Proto-personas, competitor analysis, journey map and user flows, card sort, sitemap, content strategy and copy deck, wireframes |
| 6 to 7 | Visual design | A brand-to-web style tile and web images from the kit, responsive mockups, and Website Design Proposal |
| 8 to 9 | Interface and evidence | Components with states, an interactive prototype, Usability Test Round 1 |
| 10 to 13 | Build, test, refine | An accessibility review with the See the Code lesson, the Sites build, an AI-coded interactive element, a search and performance pass, Test Round 2, refinement |
| 14 to 15 | Generator and publication | A design system and two AI agents produce one campaign landing page; a recorded client presentation and defense; Final Website and Case Study |
Outcomes
The six course competencies, each mapped to module objectives written with the revised Bloom’s taxonomy and to criteria in both projects. A student can:
- Analyze target audiences, user needs, competitor websites, and website objectives.
- Develop website structures using customer journeys, user flows, content strategies, sitemaps, and wireframes.
- Produce graphics and visual concepts for web publication using typography, color, and imagery.
- Design responsive website interfaces using visual design, navigation, and usability principles.
- Evaluate website designs for usability, accessibility, and user experience.
- Produce an interactive, multi-page website for publication using contemporary web design and publishing tools.
Pacing and interaction
About eight hours a week across fifteen modules (Module 0 Getting Started, then fourteen project modules), each in the same order. Two noon deadlines a week; project steps are posted to Discord the day before for structured peer critique (I notice, Because, What if). Formative feedback on the discovery and test-plan steps returns within 48 hours, before the next step depends on it. Office hours are held twice a week and recorded.
AI in This Course
Gemini is used with the Maricopa (Google Workspace for Education) account only, under which student data is not reviewed by people, not used to train models and not used for ads. Gemini writes, role-plays and writes code from the student’s design; it never designs, and no AI-generated image, logo, icon, mockup or layout is accepted in any assignment.
| Tool and feature | What students do with it | Where in the course | What it is not allowed to do |
|---|---|---|---|
| Gemini app, client role-play | Generate a unique fictitious business and brief from the Client Prompt Kit; interview the owner in character; ask the client to react to mood boards and the design proposal | Client Discovery; Website Design Proposal; campaign brief | Write or improve the student’s discovery questions; imitate a real business, person or designer’s style |
| Gemini app, drafting | Draft proto-persona text, a copy deck, alt text, page titles and search descriptions, each rewritten by the student with the draft and edit submitted side by side | Proto-Personas; Copy Deck; Web Images; Search Pass | Invent research data, statistics or competitors that go unchecked; write rationales, critique or reflections |
| Gemini app, fact-checking practice | Ask the client about its market and mark each claim Verified, Fictional or Fabricated; summarize competitor sites already reviewed and flag what cannot be confirmed | Module 2; Competitor Analysis | Replace the student’s own use of each competitor site on a phone and a desktop |
| Gemini app, test critique | Critique usability tasks for leading wording | Usability Test Plan | Stand in for participants or generate findings |
| Gemini Notebook | Organize the client brief, interview and sources; organize de-identified session notes | Throughout; both usability test rounds | Receive identifiable participant data; write findings that did not come from sessions |
| Gemini Canvas | Build the interactive element (an estimator, filter, quiz or finder) from the student’s Figma mockup and a written specification, then export it to Google Sites; on the code option, help write HTML, CSS and small JavaScript | Module 10, Interactive Element; optional code option from Module 9 | Choose the interface styling; ship without the student’s accuracy and keyboard tests |
| Gemini agents (saved instructions) | A content agent drafts campaign copy from the brand kit; a brand checker marks each draft against the student’s written rules, and the student checks the checker | Module 13, Design System and Two Agents; Campaign Landing Page | Lay out the page, choose or make images, or publish a word the student has not approved |
| Gemini in Docs and Sheets | Drafting support inside the copy deck and planning documents | As logged | Stand in for an accessibility check |
How AI Supports Learning Here
- AI as client. Role-play gives every student a distinct, responsive stakeholder without recruiting a real business. Students practice discovery interviewing, quote the answer behind each follow-up, and translate answers into measurable objectives.
- AI as unreliable narrator. Because the client invents freely, students classify its claims as verified, fictional or fabricated, building source evaluation into research.
- Draft and edit. Students record the reading level of Gemini’s copy and of their edit, and compare drafted and rewritten alt text, so the editorial judgment is visible and assessable.
- AI as developer, student as designer. Students specify inputs, outputs, rules and style-tile values before prompting, then verify the result with known-answer test cases, a keyboard-only pass and a screen reader. AI-written code is treated as a draft that must earn its place.
- Read it like a critic. The AI Primer in Module 0 has students ask Gemini a career question, mark what is generic or overstated, then rewrite the prompt with a role, task, context and format. The course addresses the costs as well, including bias and energy use (data centers drew about 1.5% of global electricity in 2024, per the International Energy Agency).
- Hand first, generator last. Students build the whole site by hand before Module 13, then turn it into a design system with two agents and use it once, for a campaign landing page. The grade rests on the rules, the agent testing and the student’s edits.
- AI-use log. Every submission logs the tool, the request, what was kept, what was changed and why; “None” is a valid entry. The log doubles as evidence that each output was checked for accuracy and accessibility.
Guardrails
- Account and data. Maricopa account only, under the district’s Gemini for Education terms; no other AI tool. The instructor never places student work in a public AI tool.
- Research ethics. Card sorts and usability tests use adult participants, a scripted consent read word for word, coded notes (P1 to P3), and no sensitive data. Identifiable participant data never enters an AI tool, and AI never generates participants, quotes or results.
- Never AI-made. Logos, type, color, layouts, imagery and interfaces are the student’s. Imagery is the student’s own or licensed for reuse and logged.
- Authorship of code. Code built with Gemini Canvas counts as the student’s work when the design is theirs, the log shows the prompts and revisions, and the student can explain it in the defense.
- Students under 18. If a Gemini feature is blocked, the student does not switch accounts or tools; the instructor supplies a written client brief, interview answers or copy drafts, and the assignment is graded the same way.
What Students Build
- An AI-built interactive element. A Gemini Canvas app mocked up first in the Figma prototype, specified in a written prompt with the style-tile values, tested against at least five known answers, checked for keyboard access and labels, and exported to Google Sites. If it cannot be made accessible, a plain-text alternative sits on the same page.
- A campaign landing page. One more page for the same client, built from the student’s own Figma styles and components, with copy drafted by a content agent, checked by a brand checker and approved word by word, and images from a licensed source.
- A published website. Five to seven pages in Google Sites with a custom theme and an accessibility statement naming WCAG 2.1 AA, what was tested and known limits.
How to Adapt This
- Use AI as a role-played client. Have students write their questions in a Google Doc before the conversation, so version history proves authorship, and grade the questions and objectives rather than the answers.
- Require a specification before AI writes code. A written prompt with inputs, outputs, rules and style values, followed by known-answer tests and a keyboard check, turns code generation into a design and verification exercise.
- Grade the edit. Ask for the AI draft and the student’s revision side by side, with a measurable change such as reading level.
Technology
- Canvas: modules, rubrics, grades and submissions.
- Google Sites: the build and publishing platform, with a custom theme and the Embed tool for the interactive element and code option.
- Google Docs, Sheets and Drive: discovery questions with version history, the copy deck, comparison grids and findings tables.
- Figma (education plan), with Penpot as an equal alternative: wireframes, mockups, components with states and the interactive prototype.
- FigJam, draw.io or Excalidraw: journey maps, user flows, sitemaps and the card sort.
- Adobe Illustrator and Photoshop: logo, icons and image preparation for the web.
- Google Meet: remote usability sessions with screen sharing.
- OBS Studio or a Meet recording: recorded explanations, the client presentation and the reflection.
- WAVE, the WebAIM Contrast Checker, NVDA and VoiceOver: accessibility checks before testing with people.
- Realtime Colors, Squoosh, PageSpeed Insights and Google Analytics: color testing, image compression, performance and analytics (where the district allows).
- View page source and the MDN Playground: the See the Code lesson.
- Unsplash and a course image bank: licensed photos, logged with their sources.
- Visual Studio Code: an optional editor on the code option.
- Discord: the course channel on the Digital Media Arts server for questions and critique, with a Canvas discussion as the alternative.
The course is the gateway to UX Design for Interactive Media, and the two share one vocabulary.
How the Course Was Tested
Before launch, the course went through synthetic student walk-throughs, a quality-rubric review, and an alignment and AI-exposure audit. A synthetic review panel (a senior web and UI designer, graphic design faculty, a web accessibility specialist and an instructional designer) also reviewed the draft. No real students were involved in testing. Every course in the program goes through the same build and review method.
Synthetic Student Walk-Throughs
The testers are synthetic students: AI agents, each built from one persona in the Student Journey Barriers Study. Each agent worked through the course module by module as that student and logged every point where it got stuck or could not finish. A fixer pass applied the findings, and a second round re-ran all eight agents against the revised course.
| Persona | Tested for | How the course addresses it |
|---|---|---|
| Phone-only student | Whether each step can be completed on a phone | States that Figma and Adobe work need a computer, and routes students to laptop and hotspot loans |
| Screen reader or low vision | Tool access and image-only evidence | An approved equivalent for Figma tasks (Penpot or a structured Google Doc), a different recorder, alt text on every Discord image |
| Rural, limited data | Bandwidth and recruiting participants | Hotspot loans, remote sessions over Meet, recorded office hours |
| Student with ADHD | Clarity, chunking, competing deadlines | Identical module order, one deadline in Week 1, a milestone table in the Final Project Guide |
| Online working parent | Time and schedule flexibility | Asynchronous design, recorded office hours, a 24-hour late window |
| Student under 18 | Blocked Gemini features and research ethics | Instructor-written briefs at the same grade; adult participants only, with a parent or guardian welcome at any session |
| Spanish-dominant student | Reading load and vocabulary | A course glossary, tutoring and writing centers linked from Getting Started (Module 0) |
| Student with dyslexia | Text-heavy evidence | Recorded explanations, a recorded final reflection by default, audio with a transcript accepted |
Changes recorded from the review passes include a dated schedule, feedback timed to arrive before the next step depends on it, a rule that no AI-generated visual is accepted in any assignment, recorded explanations on discovery and the final reflection, and seat time balanced to about 120 hours.
Quality and Alignment Reviews
The course was reviewed against the SUNY OSCQR online course quality rubric, and every objective was audited against the revised Bloom’s taxonomy (Anderson and Krathwohl, 2001) so that each sits at or below its parent competency and is measured by a graded item.
Every Assessment Checked for AI Resistance
Every graded assessment was audited for AI exposure, asking whether a student could hand the task to an AI and pass. The design answers are process evidence and versioned drafts, work tied to the student’s own client and test participants, recorded explanation, peer critique on Discord, the AI-use log, and the rule that Gemini never designs.
| Assessment | What makes it hard to outsource |
|---|---|
| Client Discovery | Questions written before the interview with version history; follow-ups quoting the client; a two-minute recorded explanation; the chat share link |
| Competitor Analysis | A phone screenshot of a heuristic problem the student hit while using each site |
| Usability Tests, Rounds 1 and 2 | Photographed handwritten session notes; findings traced to observed sessions |
| Interactive Element | Known-answer test cases, a keyboard and screen-reader check, and a 150-word explanation for the defense |
| Website Design Proposal | A recorded walkthrough of the student’s own research, structure and mockups, with client and peer response |
| Final Website and Case Study | A recorded client presentation and a live defense; an unexplained decision caps the build criterion until a follow-up conversation |
| Design System and Two Agents | Agent drafts, checker verdicts and the student’s own check side by side, with first and final instruction versions |
| Final Reflection | A recorded reflection by default, tied to artifacts from the student’s own process |
Accessibility
Designed with Universal Design for Learning to WCAG 2.1 AA, with captioned instructor video, free alternatives for any tool a student cannot run, and approved equivalents for assistive-technology users. Accessibility is also course content: students check their own sites with automated tools, a contrast checker and a screen reader before testing with people. Student work carries hand-corrected captions, corrected transcripts, alt text and tagged documents, worth about 10 percent of each media rubric.
Status
Designed and fully built: fifteen modules, twenty-four process steps, eight exercises and two projects. Offered every spring and fall.
Course materials are shared under CC BY-NC-SA 4.0: faculty may adapt them with credit, for noncommercial use, under the same license.