Introduction to Web Design and UX

Technology Setup (10 points, Process Work)

This assignment measures Module Objective 0.1, which supports Course Competency 6.

You need a Mac or Windows computer. A Chromebook, phone or tablet will not work, because the course uses Adobe apps. If you need a computer, GCC lends Macs and PCs: request one with a Student Technology Request.

Set up these core accounts in Week 1. Apps used only in this course are set up in the module where you first use them.

Submit one Google Doc, Google Slides page or Miro board with:

1. Proof that each core account works (screenshots, or a short written note for screen-reader users).
2. A link to a 10-second test recording with your voice and something from your work, shared unlisted.
3. Your Discord introduction (your name and how to say it, your program, one thing you want to learn, and two examples of past work with alt text or a description) and three comments on classmates’ introductions.

Grading (10 points): core accounts 4; test recording 3; Discord introduction 2; three comments 1.

AI: none; log “No AI used.”

Syllabus and Course Overview Quiz (5 points, Exercises)

Every question is answered in the syllabus. Questions include:

1. When is work due, and what happens if it is late? (Noon, Arizona time, on Thursdays and Sundays. Work up to 24 hours late loses 10%; after that it is not accepted.)
2. Where do private questions, course questions and critique go? (Private questions go to your instructor in the Canvas Inbox. Course questions and critique go in the course channel on the Digital Media Discord, or in the matching Canvas discussion if you cannot use Discord.)
3. When is using AI in this course not cheating? (When the use is assigned, recorded in your AI-use log, and you are graded on your own thinking and work.)
4. Which account must you use for Gemini, and why? (Your Maricopa account. Google states that what you enter there is not reviewed by people or used to train AI models.)

5. What does AI do in this course, and what does it never do? (It helps with research, writing, feedback, planning and code. It never designs.)

One question asks for your Discord screen name, so your critique comments are credited to you.

Private question (0 points): Will you be under 18 at any point this semester? (Yes or No) This is not scored. It only decides which tool options you get, and only your instructor sees your answer.

AI Primer (10 points, Process Work)

What this is. Your first time using Gemini in this course, and it takes about an hour. No experience with AI is needed. Complete Technology Setup first.

What Gemini is. Gemini is an AI chat tool from Google. You type a request, called a prompt, and it writes an answer. It learned from an enormous amount of text written by people, so it can sound knowledgeable about almost anything. It does not know you, and it has never been where you have been.

Why this assignment. Some assignments in this course use Gemini for research and feedback. Before you use it for that, you will see for yourself what it does well, where it falls short, and what you bring that it cannot.

Your work stays yours. You use Gemini through your Maricopa account, so what you enter is not reviewed by people and is not used to train AI models. See AI in This Course for Google’s exact wording.

This assignment measures Module Objective 0.2, which supports Course Competency 6.

Part 1: Sign in

1. Open Chrome and go to gemini.google.com.
2. If you see Sign in in the top right corner, click it. Sign in with your Maricopa account: your MEID followed by @maricopa.edu, then your MEID password on the Maricopa sign-in page.
3. Check the top right corner. It should show your Maricopa account. If it shows a personal Gmail account, click the picture and switch to your Maricopa account.

If Gemini does not open or says it is not available for your account (this can happen for students under 18), message your instructor in Canvas Inbox. You will receive an equal option with the same grade.

Part 2: Ask the question

4. Click the box at the bottom that says Ask Gemini.
5. Type Do I need to learn AI to get a good job in the digital media industry? and press Enter.
6. Copy your prompt and Gemini’s answer into a Google Doc.

Part 3: Read it like a critic

7. In your Doc, mark:
   • one point you agree with;
   • one point that sounds generic, overstated or like a sales pitch;
   • one question you would rather ask a working professional in the field.
8. Gemini is made by Google, a company that sells AI. Write one sentence on how that might shape its answer.

Part 4: Give it better directions

A stronger prompt tells Gemini four things: a role (who it should act as), a task (what to do), context (who it is for and why) and a format (how the answer should look). Example: You are a hiring manager at a small design studio in Phoenix. List the skills you look for in a new junior designer, and say honestly where AI skills rank among them. I am a first-year community college student. Use a short ranked list.

9. Rewrite your prompt using all four parts, and add one detail about yourself: the kind of work you want to do. Press Enter.
10. Copy the new prompt and answer into your Doc. Write one sentence on how the answer changed.

Part 5: Reflect

11. In four to six sentences: Did either answer change how you think about AI and your career? Where might a tool like this help you in your own work, and where would you not want to use it?

Part 6: Start your AI-use log

12. At the bottom of your Doc, add a table with three columns: Tool, What I asked, and What I kept, changed or rejected. Add one row for this assignment. Every assignment in this course has a row like this, so your instructor can see how you used AI and what was your own.

Submit the link to your Google Doc.

Grading (10 points): critic’s mark-up 3; revised prompt with your own detail 3; reflection 2; AI-use log row 2.

Figma Warm-Up: A Three-Page Site

Objectives

• 1.2 Produce a simple three-page website layout in Figma with consistent navigation, readable text and named layers.

This assignment measures Module Objective 1.2, which supports Course Competency 4.

10 points, Exercises.

Overview

You will make three desktop pages in Figma for Sidewalk Sips, a fictitious neighborhood coffee cart: Home, About and Contact. Your instructor gives you all the words and photos, so you can focus on learning the tool. Plan on one sitting of about 2.5 hours. You do not need components, auto layout or prototyping yet; those come in Modules 4 and 7. This is an exercise, so there is no Discord critique.

AI: none. This is hands-on practice in Figma. Your AI-use log for the Figma Warm-Up says “None.”

Instructions

1. Make your Figma account. Go to Figma for Education and sign up with your Maricopa email. Figma asks college students to confirm they are 18 or older for the education plan. If you cannot get it, sign up for the free Starter plan instead; it has everything this exercise needs. Still stuck? Your instructor can share a starter file for you to copy, or approve Penpot.
2. Get the content. Open the Figma Warm-Up Content Pack, a Google Doc linked in the Canvas assignment. It has the headline, the words for each page, the menu labels, the contact details and links to six photos. Download the photos you want to use. Use the words as they are; this exercise is about layout, not writing.
3. Start a file. In Figma, choose Create (or the plus sign), then Design. Name the file “Your Last Name Figma Warm-Up.”
4. Make three frames. A frame is one page. Press F for the Frame tool, then choose Desktop in the panel on the right. Make three desktop frames side by side. Double-click each frame’s name and rename them Home, About and Contact.
5. Build the menu bar on Home. Press R for the Rectangle tool and draw a bar across the top of the frame. Press T for the Text tool and type the business name on the left and the menu labels from the content pack (Home, About and Contact) on the right.
6. Add the words. With the Text tool, place the headline and paragraph on Home, the About paragraph on About, and the contact details, including the email hello@sidewalksips.example, on Contact. Make headlines large and body text at least 16 pixels. Use dark text on a light background, or light text on a dark one, so it is easy to read.
7. Place the photos. Drag photos from your computer into a frame. Put at least one photo on each page. The content pack has alt text for each photo; use it when you write your page alt text. To resize a photo without stretching it, hold Shift while you drag a corner.
8. Line things up. Select two or more layers, then use the alignment buttons at the top of the right panel (align left, align center, align top). Keep the same space at the left edge of every page.
9. Group and copy the menu bar. Select the bar and its text and press Ctrl + G (Command + G on a Mac) to group them. Name the group Menu. Copy it, select the About frame and paste, then do the same on Contact. Check that the menu sits in the same spot on all three pages.
10. Name your layers. In the Layers panel on the left, double-click each layer and give it a plain name, such as Headline, Hero photo or Contact email. No “Rectangle 4.”
11. Share a view link. Click Share, set the link so anyone with the link can view, and copy it. Open the link in a private browser window to make sure it works.
12. Export each page. Select a frame, find Export at the bottom of the right panel, choose PNG and click Export. Do this for all three frames.
13. Submit in Canvas: the view link, the three PNG files, and alt text for each PNG: one or two sentences that say what the page shows.

Accessibility: check that your text is easy to read against its background, and write alt text for every PNG you submit.

Rubric

Client Brand Kits (course page)

Objectives

• Choose one ready-made brand for your client and use it the same way all term.

Overview

This is not a branding class, so you do not design a logo or choose brand colors. Your client already has a brand. Choose one of the four kits below in Week 2. Your job is to carry that brand onto the web: into the type scale, the buttons, the layouts and the images. Gemini plays the owner of the business you choose.

Several students will choose the same kit. That is fine. Each of you gets a different owner, different goals and a different website.

Your own brand instead? Graphic Design and Digital Media Arts students may bring a fictitious brand they designed in another course, with instructor approval in Week 2. Write it up with the same parts as the kits below. Taking that brand to the web is the work for this course.

Images for every kit: use photos from Unsplash (free to use under the Unsplash License) or the course image bank, or your own photos. Log every source. No AI-made images.

Kit 1: Pinwheel Cakes

Kit 2: Scrub Club Mobile Grooming

Kit 3: Crux Commons Climbing

Kit 4: Fern & Fable Plant Shop

Client Prompt Kit (course page)

Objectives

• Create a fictitious client in Gemini from a brand kit and check it against the client rules.

Overview

Gemini plays the owner of the business in the brand kit you chose. The brand stays fixed. Gemini invents the owner, the audiences, the goals, the budget and the timeline, so every student gets a different brief.

The Prompt

Open Gemini with your Maricopa account and start a new chat. Paste this prompt, fill in the brackets, and then paste your whole brand kit below it:

“Act as the owner of [business name], the fictitious business in the brand kit below. Keep the name, logo, colors, fonts, voice and key messages exactly as the kit says. Invent an owner persona, the main audiences, two business goals for a new website, a budget and a timeline. Then write a one-page brief for a five-to-seven-page website. Do not include payments, logins or customer accounts. Stay in character as the owner for the rest of this conversation and answer my questions as the owner would, saying ‘I don’t know yet’ when the brief does not cover something.”

Client Rules

1. Made-up only. No real business names, people or logos. If Gemini adds a real name, change it.
2. The brand is fixed. Use the kit’s logo, colors, fonts and voice. You may add lighter or darker tints of kit colors for the web; log them in your style tile.
3. Gemini writes, you design. Gemini may write the owner, the brief (a one-page project summary), interview answers and draft copy. You make every visual.
4. Images. Use Unsplash, the course image bank, or your own photos or drawings. Log every source.
5. One redo. If the brief does not work (no clear audience, or it needs payments or logins), you may create it again once in Week 2. Log why.

Client Discovery and Website Goals

Objectives

• 1.1 Identify a client’s business goals, website objectives and constraints from a discovery interview.

This assignment measures Module Objective 1.1, which supports Course Competency 1.

10 points, Process Work.

Overview

You will create your client, interview the owner with your own questions, and write the website objectives that guide the rest of the term. You are graded on your questions, objectives and explanation, not on the client’s answers.

Instructions

1. Choose a brand kit. Then use the Client Prompt Kit to create your client in Gemini.
2. Before the interview, write at least ten questions in a Google Doc. Cover goals, audiences, competitors, brand personality, the content the client already has, and what success looks like. Do not ask Gemini to write or improve them. The Doc’s version history shows you wrote them first.
3. Ask your questions in the same Gemini chat, so the client stays in character. Ask at least three follow-up questions. Quote the part of the answer that led to each one.
4. In your own words, write three to five measurable objectives. Example: “A visitor on a phone can find this week’s truck location in under 30 seconds.” Under each one, quote the client answer it comes from. Mark which facts came from the client and which are your guesses.
5. Add a one-page client snapshot: name, what the business does, brand personality in three words, main and second audiences, limits and open questions.
6. Record a two-minute explanation of your most important objective and why (captioned, or audio with a transcript).
7. Submit the Gemini chat share link and your AI-use log.
8. On Discord, post your objectives and snapshot, not the interview.

Accessibility: add alt text to images, captions or a transcript to recordings, and real headings to documents.

Rubric

Audience Profile and Proto-Personas

Objectives

• 2.1 Analyze target audiences and user needs to create proto-personas that label their assumptions.
• 2.2 Differentiate supported claims from fabricated facts in AI-generated client and audience content.

This assignment measures Module Objectives 2.1 and 2.2, which support Course Competency 1.

10 points, Process Work.

Overview

You will describe your client’s audiences and write two proto-personas, each with the assumptions you will test later.

Instructions

1. Write an audience profile for the main and second audiences. Say who they are, what they need from the site, what device they will likely use, and what might stop them.
2. Find at least two public sources about these audiences, such as reviews of similar businesses or a community survey. Note what each source supports and what it does not.
3. You may ask Gemini to draft two proto-personas from your brief and sources. Then rewrite them yourself. Each one includes: name and short description, goals, needs, frustrations, device and setting, one user need statement, and one accessibility need (for example low vision, a slow connection, or using a phone with one hand).
4. Under each persona, list three guesses labeled “to test.” Mark every statement that came from a source.
5. Add your Practice fact check.
6. Use Google Docs with clear headings. A designed layout is not needed.
7. Submit the Gemini draft, your rewrite and your AI-use log.

Accessibility: add alt text to images, captions or a transcript to recordings, and real headings to documents.

Rubric

Competitor Analysis

Objectives

• 2.3 Analyze competitor websites for content, structure, brand presentation and usability using the ten usability heuristics.

This assignment measures Module Objective 2.3, which supports Course Competency 1.

10 points, Process Work.

Overview

You will compare three websites that compete with your client and turn what you find into ideas for your client’s site.

Instructions

1. Choose three real websites for businesses like your client’s. They can be in any city.
2. Use each site on a phone and a desktop. Fill in a comparison grid with these rows: audience, main tasks, menu labels, number of pages, type, color, image style, brand personality, first look at accessibility (contrast, text size, alt text), and the two worst heuristic problems with severity ratings.
3. For each site, add one phone screenshot of a problem you ran into. Label it with the heuristic and a severity rating. Also show one place, on any site, that follows a heuristic well.
4. Pick one site and describe its brand on screen. Do the type, colors and images feel like one brand on every page? How is the phone version different from the desktop?
5. After your own review, you may ask Gemini to sum up each site. Mark anything it said that you could not confirm.
6. Write a one-page summary: three things your client should copy, three mistakes to avoid, and one way to stand out.

Examples Across Programs

Accessibility: add alt text to images, captions or a transcript to recordings, and real headings to documents.

Rubric

Customer Journey Map and User Flows

Objectives

• 3.1 Develop a customer journey map and user flows for the client’s priority tasks.

This assignment measures Module Objective 3.1, which supports Course Competency 2.

10 points, Process Work.

Overview

You will map your main persona’s journey with the business and diagram the flows for the two most important tasks.

Instructions

1. Make a journey map for your main proto-persona with five stages, such as discover, consider, visit the site, act and return. For each stage, show what the persona does, thinks and feels; the touchpoint (where they meet the business, such as a social post, a sign or a web page); and one idea for the website.
2. Make two user flows, one for each priority task in your objectives (for example “find this week’s location” and “check prices”). Show every page, choice and action from the start to the finished task. Use standard flow shapes and a legend (a key to the shapes).
3. List the pages in your flows. You use this list next week for your sitemap.
4. Use FigJam, Illustrator, draw.io or Excalidraw. The client will see this, so hierarchy, alignment and readable type count.

Accessibility: add alt text to images, captions or a transcript to recordings, and real headings to documents.

Rubric

Card Sort

Objectives

• 3.2 Organize website content into a sitemap and navigation plan using card sort results.

This assignment measures Module Objective 3.2, which supports Course Competency 2.

5 points, Exercises.

Overview

You will learn how two other people would group your site’s content.

Instructions

1. First read the Testing Rules and Consent Script in Module 8.
2. Ask two adults (18 or older) to sort your 15 to 20 cards into groups and name each group. Use FigJam, Google Slides, or paper cards you photograph. Call your sorters S1 and S2. Do not write down names.
3. Record the groups and labels each person made.
4. Write three sentences on what matched your plan and what surprised you.

Rubric

Sitemap and Navigation Plan

Objectives

• 3.2 Organize website content into a sitemap and navigation plan using card sort results.

This assignment measures Module Objective 3.2, which supports Course Competency 2.

10 points, Process Work.

Overview

You will turn your flows and card sort into a sitemap and choose what goes in the main menu.

Instructions

1. Draw a sitemap of five to seven pages (see the required pages in The Final Project). Put the home page at the top and the other pages below it. Show any page you can reach only from another page.
2. Label each page with a working title and its job in a few words (for example “Prices: compare services and start a booking”).
3. Write a navigation plan: the main menu labels in order, the footer links, and any call-to-action button (a button that asks the visitor to act) on every page. Explain each label with your card sort and competitor findings.
4. Mark the path of each user flow on the sitemap.
5. Design the sitemap for the client in Illustrator, FigJam, draw.io or Figma, with matching shapes, a clear hierarchy and a legend.

Accessibility: add alt text to images, captions or a transcript to recordings, and real headings to documents.

Rubric

Content Strategy and Copy Deck

Objectives

• 4.1 Develop a content strategy and an edited copy deck that matches the client’s voice.

This assignment measures Module Objective 4.1, which supports Course Competency 2.

10 points, Process Work.

Overview

You will write a one-page content strategy for your client, then write or edit every word the site needs.

Instructions

1. Content strategy, one page, at the start of the deck: the site’s purpose in one sentence; three key messages; and voice and tone. For tone, pick a point on each of the four tone dimensions from the reading, write one sample sentence, and link each choice to a persona need. Also say who supplies each type of content.
2. Copy deck in Google Docs, one heading per page, in sitemap order. Write three pages in full now: the home page and the two pages where your flows end. Include the page title, headline, body text, button and link labels, and microcopy (small helper text, such as form hints). For the other pages, list headings only. You finish them in Week 11.
3. You may ask Gemini to draft the copy. Then edit every line: cut it shorter, match the voice, remove fabricated facts and keep paragraphs short. Aim for an 8th-grade reading level. Record the reading level of Gemini’s draft and of your edit.
4. Tag anything the client must confirm (prices, hours, claims) with [Confirm] and highlight it.
5. Media list: every image, icon, video or map the site needs, with its page, purpose and source (your own, a licensed image with a link, or “to prepare in Week 6”). No AI-made images.
6. Attach Gemini’s first draft and your AI-use log.

Accessibility: add alt text to images, captions or a transcript to recordings, and real headings to documents.

Rubric

Low-Fidelity Wireframes

Objectives

• 4.2 Develop low-fidelity wireframes for phone and desktop layouts of key pages.

This assignment measures Module Objective 4.2, which supports Course Competency 2.

10 points, Process Work.

Overview

You will wireframe your home page and one priority page at phone and desktop widths, using your real copy.

Instructions

1. Choose two pages: the home page and the page where your most important user flow ends.
2. In Figma or Penpot, make a phone frame (about 390 pixels wide) and a desktop frame (about 1440 pixels wide) for each page. That is four wireframes.
3. Use only shades of gray, one typeface, and boxes with an X for images. Use your real headlines and copy, not placeholder text.
4. Show the menu on every frame, including how it folds up on the phone.
5. Add three to five notes to each frame that explain a layout decision (for example “Location finder first, because objective 1 is find the truck in 30 seconds”).
6. Include a photo of your paper thumbnails.
7. Submit a view link to your Figma file and a PDF export.

Deliverable Options

Every option is graded on the same rubric. The criteria grade the design, not the machine, and the default path can earn full marks. Choose one way to draw your paper thumbnails:

Book lab time through STEAMworks; booking windows are posted in the first week of the term. Complete the STEAMworks safety orientation before your first lab session. STEAMworks supplies all materials. Online students have an equal path in the default option, which needs no equipment.

Examples Across Programs

Accessibility: add alt text to images, captions or a transcript to recordings, and real headings to documents.

Rubric

Screen Type and Contrast

Objectives

• 5.1 Produce a brand-to-web style tile from a client brand kit, with an accessible color palette and a responsive type scale.

This assignment measures Module Objective 5.1, which supports Course Competency 3.

5 points, Exercises.

Overview

You will test body text and color pairs on a phone screen before you build your style tile.

Instructions

1. In Figma or Realtime Colors, set one paragraph of your real copy in three body fonts, at 16 and 18 pixels, on a phone frame. One of the three is the body font from your brand kit.
2. Pick two text-and-background color pairs from your brand kit, including one pair the kit does not list as checked. Test each in the WebAIM Contrast Checker.
3. Submit screenshots, the contrast ratios, and two sentences on which pair you would use for body text and why.

Rubric

Brand-to-Web Style Tile and Web Images

Objectives

• 5.1 Produce a brand-to-web style tile from a client brand kit, with an accessible color palette and a responsive type scale.
• 5.2 Produce web-ready images at appropriate resolutions, formats and file sizes, with accurate alt text.

This assignment measures Module Objectives 5.1 and 5.2, which support Course Competency 3.

10 points, Process Work.

Overview

You will turn your brand kit into a style tile, then prepare every image your site needs: named, sized and saved for the web, with alt text.

Instructions

Style tile

1. Logo: use the logo from your brand kit (your instructor’s SVG, or the wordmark you set in the kit fonts in Figma or Illustrator). Show it full size, at 40 pixels tall as in a menu bar, and in one color.
2. Type scale: heading 1, heading 2, heading 3, body, small text and button text, in the kit fonts. List the font, size, weight and line height for each, at phone and desktop sizes. Body text is at least 16 pixels.
3. Color: give each kit color a web job: main, second, accent, text, background, link and focus. Show the contrast ratio of every text-and-background pair. Body text needs at least 4.5 to 1. Large text and buttons need at least 3 to 1. You may add lighter or darker tints of kit colors; mark them as added.
4. Interface samples: a main button, a second button, a text link and a menu bar.
5. Image style: six photos that fit the kit’s photo style, from Unsplash, the course image bank or your own camera, with sources. Under them, write two or three sentences on what these images say to your personas.
6. Build the tile in Figma as one frame about 1440 pixels wide. List the fonts and colors you will enter in your Google Sites theme. If a kit font is not in the Sites font list, name the closest one.

Deliverable Options

Every option is graded on the same rubric. The criteria grade the design, not the machine, and the default path can earn full marks. Choose the image source for your client site:

Drone rules: students fly only under the direct supervision of the instructor, who serves as the FAA Part 107 remote pilot in command and can take control at any time. No flying over people. The instructor handles all airspace authorization. Students under 18 follow the same supervised path. Log drone images in the kit sheet as your own photography, with the date and location of the session. No AI-generated imagery in either option.

Book lab time through STEAMworks; booking windows are posted in the first week of the term. Complete the STEAMworks safety orientation before your first lab session. STEAMworks supplies all materials. Book the flight session by the end of Week 5 so the images are ready for this assignment. Online students have an equal path in the default option, which needs no equipment.

Accessibility: add alt text to every image, captions or a corrected transcript to every recording, and real headings to every document, in Canvas and in Discord.

Web images

7. Logo files: SVG for the logo and the one-color version, and a favicon (the small browser-tab icon) at 512 by 512 pixels.
8. Images: every image on your media list, cropped for its use (hero, card or gallery). Export each at about twice the width it will show, in JPEG or WebP. Aim for under 300 KB for a hero image and under 150 KB for a card image. Use file names in lowercase, with hyphens (for example hero-cake-counter.webp).
9. Alt text: use the alt decision tree to decide if each image is informative or decorative. You may ask Gemini to draft alt text. Then rewrite each one so it is accurate, says what matters, and does not start with “image of.” Show Gemini’s draft and your version side by side for at least five images.
10. Kit sheet (Google Sheets): file name, format, pixel size, file size, page, alt text, and source and license. Add your Practice export comparison and one sentence on which format you would use for a hero image.
11. Submit the Figma link, a PDF of the tile and a link to your image folder. On Discord, post the tile and a contact sheet (all images on one page).

Accessibility: add alt text to images, captions or a transcript to recordings, and real headings to documents.

Rubric

Responsive Page Mockups

Objectives

• 6.1 Design responsive page mockups with a clear visual hierarchy and a consistent visual system across screen widths.

This assignment measures Module Objective 6.1, which supports Course Competency 4.

10 points, Process Work.

Overview

You will design your home page and one priority page in full color, using your style tile, images and copy deck.

Instructions

1. In Figma, make five frames: the home page at phone (about 390 pixels), tablet (about 768 pixels) and desktop (about 1440 pixels), and the end page of your most important user flow at phone and desktop.
2. Design each page in full. Use your wireframe for structure, the style tile for type, color and buttons, your web images from the style tile step, and the copy deck for every word.
3. Use a layout grid in each frame and auto layout for repeating content. Use the same type styles, colors and buttons on both pages. If you add a new one, add it to the style tile too.
4. Show the menu marking the current page (for example, underlined).
5. Do a squint test on each frame. Note what you see first, second and third. It should match the page’s job.
6. Add three notes to each home page frame on what changed between widths and why.
7. Submit the Figma link and a PDF.

Accessibility: add alt text to images, captions or a transcript to recordings, and real headings to documents.

Rubric

Website Design Proposal

Objectives

• 1.1 Identify a client’s business goals, website objectives and constraints from a discovery interview.
• 2.1 Analyze target audiences and user needs to create proto-personas that label their assumptions.
• 3.2 Organize website content into a sitemap and navigation plan using card sort results.
• 4.2 Develop low-fidelity wireframes for phone and desktop layouts of key pages.
• 5.1 Produce a brand-to-web style tile from a client brand kit, with an accessible color palette and a responsive type scale.
• 5.2 Produce web-ready images at appropriate resolutions, formats and file sizes, with accurate alt text.
• 6.1 Design responsive page mockups with a clear visual hierarchy and a consistent visual system across screen widths.
• 6.2 Present a website design proposal to a client and revise it in response to client and peer feedback.

This project evidences Course Competencies 1, 2, 3 and 4:

1. Analyze target audiences, user needs, competitor websites, and website objectives.
2. Develop website structures using customer journeys, user flows, content strategies, sitemaps, and wireframes.
3. Produce graphics and visual concepts for web publication using typography, color, and imagery.
4. Design responsive website interfaces using visual design, navigation, and usability principles.

This assignment measures Module Objectives 1.1, 2.1, 3.2, 4.2, 5.1, 5.2, 6.1 and 6.2, which support Course Competencies 1, 2, 3 and 4.

30 points, Projects.

Overview

You will present your full design plan to your client and classmates, collect feedback, and submit a revised proposal.

Instructions

1. Make a deck of 10 to 14 slides in Google Slides, Adobe Express, InDesign or Figma. Include: client and objectives, audiences and personas, competitor findings, journey and flows, sitemap and menu, wireframes, the brand kit and your style tile, the image style, mockups at each width, and next steps.
2. Record a 5- to 7-minute narrated walkthrough with corrected captions. Your face does not need to appear.
3. Post the recording on Discord.
4. Paste a summary of your proposal into your Gemini client chat. Ask the owner to react. Save the response.
5. Make a response log: a table of every piece of client and classmate feedback, what you decided (change, keep or test later), and why. Make at least three changes and show before and after.
6. Submit the deck as a PDF, the recording link, the response log, the Figma link and your AI-use log.

Accessibility: add alt text to images, captions or a transcript to recordings, and real headings to documents.

Rubric

Google Sites and the Code Option (course page)

Objectives

• Choose how you will build your site in Google Sites, and whether to add the code option.

Overview

You design every page in Figma first. Then you build and publish the site in Google Sites in Weeks 10 to 15. No coding is needed. If you want to write code, you may add the code option: small blocks of HTML, CSS and JavaScript, with help from Gemini Canvas, placed on Sites pages with the Embed tool. You decide in Build Plan. The code option needs instructor approval and a backup plan that uses built-in Sites parts. Switching to the backup by the end of Week 10 costs no points.

Designing for the Platform

Design in Figma with the Sites layout options in mind. If part of a design cannot be built in Sites, that is not a failure. Note the trade-off and build the closest option, or build that part as code on the code option. Code style is not graded, but you must be able to explain any code you use.

Interface Components and States

Objectives

• 7.1 Design reusable interface components with interactive states that meet usability and accessibility guidelines.

This assignment measures Module Objective 7.1, which supports Course Competency 4.

10 points, Process Work.

Overview

You will build your site’s interface parts in Figma, each with its states.

Instructions

1. Make Figma components with variants (versions) for: a button, a link, the menu (phone and desktop, with the phone menu open and closed), one card, and one form field with a label, help text and an error message.
2. Show each state: default, hover, keyboard focus, pressed, and disabled where it applies. Focus states must be easy to see and must not use color alone.
3. Make phone tap targets at least 24 by 24 pixels. Use 44 by 44 pixels for main buttons.
4. Check the contrast of every state against its background. Note the ratios.
5. If you plan to use motion, such as an animated logo, show the still version for visitors who turn motion off.
6. Submit the Figma link and a PDF of the component sheet.

Accessibility: add alt text to images, captions or a transcript to recordings, and real headings to documents.

Rubric

Build Plan

Objectives

• 7.2 Design an interactive prototype of a website’s priority tasks.

This assignment measures Module Objective 7.2, which supports Course Competency 4.

5 points, Exercises.

Overview

You will plan how your design becomes a Google Sites build and decide whether to take the code option.

Instructions

Read Google Sites and the Code Option, above. Then answer four questions:

1. Which parts of your mockups will you build with Sites tools? Which, if any, will you build as code, and why?
2. Which parts will be hard to build, and how will you handle them?
3. Which device and browser will you test on?
4. Code option only: what is your backup plan if the code falls behind by the end of Week 10?

Your instructor approves or declines the code option, with feedback, by Saturday at noon. Also confirm your three test participants for Week 9, listed only as P1, P2 and P3.

Rubric

Interactive Prototype

Objectives

• 7.2 Design an interactive prototype of a website’s priority tasks.

This assignment measures Module Objective 7.2, which supports Course Competency 4.

10 points, Process Work.

Overview

You will link your mockups into a clickable Figma prototype. A person should be able to finish both priority tasks on a phone.

Instructions

1. Prototype the phone version of every page in your two flows. Add the desktop home page.
2. Every menu item, button and link in the flows must go somewhere. Use simple transitions, not long animations.
3. Show your interactive element in a basic way (for example, the estimator’s first screen and result screen).
4. Test your prototype from start to finish on a real phone, with the Figma app or a shared link.
5. Write the two tasks testers will try next week. Use plain words, not your menu labels (for example “You want to know whether the truck will be near your office on Friday”).
6. Post the prototype link on Discord. Classmates try both tasks.

Accessibility: add alt text to images, captions or a transcript to recordings, and real headings to documents.

Rubric

Testing Ethics and Consent Check

Objectives

• 8.1 Apply the course test-plan template to set tasks, success criteria and informed consent for a usability test.

This assignment measures Module Objective 8.1, which supports Course Competency 5.

5 points, Exercises.

Overview

You will show that you know the testing rules before you run any session. Resubmit until every answer is correct. Sessions run before you pass do not count.

Instructions

Answer in your own words, using the Testing Rules and Consent Script:

1. Who may take part in a usability test for this course, and how many classmates may be in one round?
2. What must you read to every participant before a session begins, and what two answers must you record?
3. Where may a recording be stored, and where may it never be posted?
4. How are participants named in your notes, and what information may you never collect?
5. What may Gemini do with your session notes, and what may it never do?

Rubric

Usability Test Plan

Objectives

• 8.1 Apply the course test-plan template to set tasks, success criteria and informed consent for a usability test.

This assignment measures Module Objective 8.1, which supports Course Competency 5.

10 points, Process Work.

Overview

You will write the plan you follow in every session, so each participant has the same experience.

Instructions

1. Goal: what you need to learn, tied to your website objectives and your persona guesses marked “to test.”
2. Participants: three adults who are like your audiences. At most one may be a classmate. List them only as P1, P2 and P3.
3. Tasks: your two priority tasks plus one open task (for example “Look around and tell me what this business does”). Give each task a success measure (what counts as done) and a time limit.
4. Script: the consent script, read word for word; one warm-up question; the tasks; and three follow-up questions.
5. What you measure: task success (yes, with help, no), time on task, and what you saw. You may also ask “How easy was that, from 1 to 7?” after each task.
6. Setup: in person, or online with screen sharing in Google Meet. Record only with consent, and keep recordings only in your Maricopa Google account.
7. You may ask Gemini whether your tasks give away the answer. Log what you changed.
8. Your instructor returns feedback by Friday at noon, so you can run sessions Friday and Saturday.

Accessibility: add alt text to images, captions or a transcript to recordings, and real headings to documents.

Rubric

Usability Test Round 1

Objectives

• 8.2 Evaluate a website prototype through usability testing and rate the severity of findings.

This assignment measures Module Objective 8.2, which supports Course Competency 5.

10 points, Process Work.

Overview

You will run three sessions with your prototype and report what you found, ranked by severity.

Instructions

1. Pass the Testing Ethics and Consent Check and get feedback on your plan. Then run three sessions with your plan.
2. Take handwritten notes in each session, using P1 to P3. Submit a photo of them. Write down what people did and said, not your opinions.
3. Findings table: the problem, where it happens (screenshot), how many people hit it, the heuristic involved, severity (0 to 4) and your fix.
4. Persona check: for each guess marked “to test,” say whether the sessions supported it, contradicted it, or could not tell.
5. Summary: the three worst problems and how you will fix them in Week 10.
6. Do not upload recordings to Canvas or Discord.
7. You may organize your notes (with no names) in Gemini Notebook. Gemini may not write findings that did not come from your sessions.

Accessibility: add alt text to images, captions or a transcript to recordings, and real headings to documents.

Rubric

See the Code: How a Web Page Is Built (course page, about 30 minutes)

You do not need to write code in this course. Google Sites writes it for you. But every page you build is made of HTML (the structure: what each part is) and CSS (the style: how it looks). Seeing it once helps you understand what you are building, and why the accessibility checks in this module work the way they do. Nothing here is on a test. Just look, try the Practice, and notice how it works.

Tags come in pairs

HTML marks each part of a page with tags. Most tags come in pairs: an opening tag, the content, and a closing tag with a slash.

<p>Every cake is made to order.</p>

Here <p> opens a paragraph and </p> closes it. A few tags stand alone, such as <img> for an image.

The page skeleton

Every page has the same frame. The head holds information for the browser, such as the title on the tab. The body holds everything you see. Inside the body, header, main and footer mark the big regions of the page.

<!doctype html>
<html lang="en">
  <head>
    <title>Pinwheel Cakes</title>
  </head>
  <body>
    <header>Logo and menu</header>
    <main>The content of this page</main>
    <footer>Hours, address and links</footer>
  </body>
</html>

Headings, paragraphs, links and images

<h1>Custom Cakes</h1>
<h2>How to order</h2>
<p>Order two weeks ahead.</p>
<a href="order.html">Start your cake order</a>
<img src="cake-counter.webp" alt="Three layer cakes on the shop counter">

• <h1> is the main heading. A page has one. <h2> and <h3> come under it, in order, like an outline.
• <a> is a link. The words between the tags are the link text, so they should say where the link goes.
• <img> places an image. The alt part is the alt text you write in Google Sites.

Two kinds of lists

<ul>
  <li>Birthday</li>
  <li>Wedding</li>
</ul>
<ol>
  <li>Choose a size</li>
  <li>Choose a flavor</li>
</ol>

<ul> is a bulleted list, where order does not matter. <ol> is a numbered list, for steps. Each item is an <li>.

When a closing tag is missing

Browsers try to guess what you meant, and they often guess wrong. Here the heading never closes:

<h2>Our Cakes
<p>Every cake is made to order.</p>

The paragraph may show up big and bold, as part of the heading, and a screen reader may read it all as one long heading. The fix is one closing tag:

<h2>Our Cakes</h2>
<p>Every cake is made to order.</p>

What CSS does

CSS sets the look: fonts, colors, sizes and spacing. Styles can sit on each tag (inline styles), or in one stylesheet that the whole site shares.

<!-- Inline: the style is stuck to one heading -->
<h1 style="color: #A3214F;">Custom Cakes</h1>

/* Stylesheet: one rule styles every h1 on every page */
h1 {
  font-family: "Fredoka", sans-serif;
  color: #A3214F;
}

A stylesheet is better for three reasons. Every page stays consistent. One change updates every page at once. And the HTML stays clean and easier to read. Your Google Sites theme works the same way: change the heading font once, and every page changes.

Why structure matters for accessibility

Screen readers and other assistive technology read the HTML, not the picture on the screen. When you use Sites tools the right way, Sites writes the right HTML for you.

This is the code you check in the Accessibility Review and every time you run WAVE. WAVE reads the HTML, so its Structure view shows the headings, lists and regions from this page.

Practice

1. Open the W3C’s accessible demo page, CityLights (the accessible version), in Chrome, Edge or Firefox.
2. Right-click an empty part of the page and choose View page source (or press Ctrl + U on Windows, Command + Option + U on a Mac). A new tab shows the HTML.
3. Find three tags: a heading (<h1> or <h2>), an image with alt, and a list or a link. Press Ctrl + F (Command + F on a Mac) to search for them.
4. Open the MDN Playground, a free code editor that runs in your browser. You do not need an account to try code. Paste this into the HTML box:

<h2>Our Cakes</h2>
<p>Every cake is made to order.</p>
<ul>
  <li>Birthday</li>
  <li>Wedding</li>
</ul>

5. Delete the closing </h2>. Watch what happens to the paragraph and the list in the preview. Take a screenshot.
6. Put the closing tag back. Take a second screenshot.

Screen-reader users: View page source works with a screen reader in each of these browsers. If the Playground preview does not read clearly, message your instructor for a text version of this Practice.

See the Code Check

Objectives

• 9.3 Explain how HTML structure and CSS stylesheets shape a web page and its accessibility.

This assignment measures Module Objective 9.3, which supports Course Competency 5.

5 points, Exercises.

Overview

A short check that you looked under the hood. About 30 minutes, including the Practice above. No Discord critique.

AI: you may ask Gemini to explain a tag you found. Log it.

Instructions

Do the Practice in See the Code. Submit one Google Doc with:

1. The three tags you found, as screenshots or copied lines, with one sentence each on what the tag does.
2. Your two Playground screenshots: broken and fixed.
3. Short answers to three questions:
   • What did the missing closing tag do to the page?
   • Why do websites keep styles in a stylesheet instead of on each tag?
   • Name one piece of HTML a screen reader depends on, and what happens when it is missing.

Rubric

Accessibility Review and Revised Prototype

Objectives

• 9.1 Evaluate a website design for accessibility using WCAG 2.1 AA, automated checks and manual checks.

This assignment measures Module Objective 9.1, which supports Course Competency 5.

10 points, Process Work.

Overview

You will check your design for accessibility. Then you revise your prototype to fix problems from this check and from Test Round 1.

Instructions

1. Check your Figma mockups and components with the Easy Checks and Designing for Web Accessibility pages. Look at: contrast of every text and button pair, text size, color used alone, focus states, tap target size, heading order (mark H1, H2 and H3 on each page; these become the h1, h2 and h3 tags from See the Code), link text and alt text.
2. Check a live site: run WAVE on one competitor’s home page, and open its Structure view to see the headings, lists and regions. Then use the page with only a keyboard (Tab, Shift and Tab, Enter, Space) and listen with a screen reader for two minutes. Note what WAVE caught and what only your own checks caught.
3. Findings table for your design: the problem, the WCAG rule (success criterion), who is affected, severity (0 to 4) and the fix.
4. Fix every severity 3 and 4 problem from this check and from Usability Test Round 1 in your prototype. Show before and after for at least three changes.

Accessibility: add alt text to images, captions or a transcript to recordings, and real headings to documents.

Rubric

Site Build 1: Theme, Navigation and Home Page

Objectives

• 9.2 Produce a website framework with theme, navigation and home page in Google Sites.

This assignment measures Module Objective 9.2, which supports Course Competency 6.

10 points, Process Work.

Overview

You will set up the site and build the home page to match your revised mockups.

Instructions

Every student, Google Sites

1. Create the site with your Maricopa account. Add the site name, logo and favicon from your image kit.
2. Make a custom theme from your style tile: heading and body fonts, colors for sections, links and buttons, and text sizes. Note any color Sites changed for contrast.
3. Create every page in your sitemap, empty for now, so the menu is complete. Match page titles to your copy deck.
4. Build the home page with your copy, images and alt text. Check it in the Sites preview at phone, tablet and desktop sizes.
5. Keep the site limited to the district until your instructor confirms sharing settings. Share the draft link with your instructor.

Code option (if approved in your Build Plan)

• Write the coded parts of your home page (for example a custom hero or card grid) in HTML, CSS and a little JavaScript. Use the fonts, colors and type scale from your style tile. A plain text editor works; Visual Studio Code is optional.
• You may use Gemini Canvas to help write code from your design. Add comments to each part of the code in your own words.
• Place each block with the Sites Embed tool (Insert, Embed, Embed code; see Add files, videos and website content). Resize the box and check it at phone, tablet and desktop sizes.
• Keep headings and key text in Sites text boxes, so they count as page content.

Every student, after the build

1. Make a side-by-side comparison of your mockup and your build at phone and desktop widths. List every difference. Say if each is a Sites limit, a choice you made, or something to fix next week.
2. Post the comparison on Discord. Submit the site link in Canvas.

Accessibility: add alt text to images, captions or a transcript to recordings, and real headings to documents.

Rubric

Site Build 2: All Pages and Content

Objectives

• 10.1 Produce all pages of a multi-page website with final content and responsive layouts.

This assignment measures Module Objective 10.1, which supports Course Competency 6.

10 points, Process Work.

Overview

You will complete every page of the site with final copy, images and alt text.

Instructions

1. Finish the copy for the remaining pages in your copy deck. Then build every page in your sitemap (five to seven) with that copy and images from your kit.
2. Use the same type, color and button styles everywhere. Each page has one H1, then headings in order.
3. Write link text that says where it goes (not “click here”). Give every image accurate alt text or mark it decorative.
4. Add the accessibility statement as a page or footer section. A draft is fine this week.
5. Check every page at phone, tablet and desktop widths. Fix any layout that loses its hierarchy.
6. Post the site link on Discord.

Accessibility: add alt text to images, captions or a transcript to recordings, and real headings to documents.

Rubric

Interactive Element

Objectives

• 10.2 Produce an AI-assisted interactive element and evaluate it for accuracy and accessibility.

This assignment measures Module Objective 10.2, which supports Course Competency 6.

10 points, Process Work.

Overview

With Gemini’s help, you will build the interactive element you designed, put it on your site, and show it works for everyone.

Instructions

1. Start from your Figma design of the element (from your Interactive Prototype) and your Practice prompt.
2. Build it in Gemini Canvas. Keep asking for changes until it matches your design and style tile. Keep the chat as process evidence.
3. Put it on your site: export from Gemini to Google Sites, or place it on the right page with the Embed tool. On the code option, you may change the code first.
4. Accuracy test: try at least five cases with known answers (for example three cake sizes with known prices). Record what you expected and what you got. Fix every error.
5. Accessibility test: use every control with only a keyboard, check that every input has a visible label, check contrast, and listen with a screen reader. If something fails and cannot be fixed, add a plain-text version on the same page (for example a price table) and note it in your accessibility statement.
6. In your own words, write 150 words on how the element works. You will use this in your final defense.
7. Post a short screen recording of the element in use, with captions or a text description.

Accessibility: add alt text to images, captions or a transcript to recordings, and real headings to documents.

Rubric

Search, Performance and Analytics Pass

Objectives

• 11.1 Apply search optimization and performance practices to a published website.

This assignment measures Module Objective 11.1, which supports Course Competency 6.

10 points, Process Work.

Overview

You will help people find your site, make it load faster, and plan how the client will measure success.

Instructions

1. Search basics: give every page its own clear title. Check headings and page addresses. Confirm alt text. Code option: keep headings and key text in Sites text boxes, not only in code. You may ask Gemini to draft titles and descriptions; rewrite them to be accurate and log the changes.
2. Speed: run PageSpeed Insights (mobile) on your home page and one interior page. Record the scores and top suggestions. Fix what you can (usually image size) and run it again.
3. Analytics plan: for each objective, name what you would measure (for example phone visits to the location page) and what number means success. Connect Google Analytics only if your instructor confirms the district allows it. Otherwise, submit the plan.
4. Publish the site if district settings allow. Otherwise, share the district link.

Accessibility: add alt text to images, captions or a transcript to recordings, and real headings to documents.

Rubric

Usability and Accessibility Test Round 2

Objectives

• 11.2 Evaluate a live website through a second round of usability and accessibility testing.

This assignment measures Module Objective 11.2, which supports Course Competency 5.

10 points, Process Work.

Overview

You will test the live site with three new people and run a full accessibility check on your own pages.

Instructions

1. Usability: test with three new adults (not your Week 9 people; at most one classmate), on phones if you can. Use the same two tasks plus one task on your interactive element. Follow your Week 9 plan and the consent script.
2. Accessibility: run WAVE on every page. Do a keyboard-only check and a screen reader check on the home page and the interactive element page. Check reflow at 320 pixels wide (zoom to 400 percent on a desktop): the page should fit with no sideways scrolling.
3. Take handwritten notes using P1 to P3 and photograph them.
4. Make a findings table like Round 1. Add a column that marks each finding fixed, still there, or new.
5. Sum up what improved and what did not. Show task success from Round 1 and Round 2 side by side.

Accessibility: add alt text to images, captions or a transcript to recordings, and real headings to documents.

Rubric

Refinement Plan

Objectives

• 12.1 Prioritize test findings and peer critique into a refinement plan.

This assignment measures Module Objective 12.1, which supports Course Competency 5.

10 points, Process Work.

Overview

You will rank every open issue and decide what you will fix before launch.

Instructions

1. Put every open problem in one table: from both test rounds, the accessibility check, PageSpeed, and classmate and instructor critique.
2. Rate each for severity (0 to 4) and effort (low, medium or high). Sort them into four boxes: fix now, quick wins, plan next and later.
3. List the fixes you will make this week. Every severity 3 or 4 problem must be fixed or explained.

Accessibility: add alt text to images, captions or a transcript to recordings, and real headings to documents.

Rubric

Release Candidate and Case Study Draft

Objectives

• 12.2 Produce a refined release candidate of a website and a case study draft.

This assignment measures Module Objective 12.2, which supports Course Competency 6.

10 points, Process Work.

Overview

You will submit the site you intend to launch and a full draft of the case study.

Instructions

1. Release candidate (the version you plan to launch): make the fixes from your plan. Record each in a change log: the problem, the fix, and before and after screenshots.
2. Case study draft: 600 to 900 words, or the same content as a web page or slides. Write it for a hiring manager. Cover: the client and problem, audiences and objectives, competitor findings, structure, the visual system, test findings, what you changed, how you used and checked AI, the accessibility statement, and next steps.
3. Use real images from your process: sketches, wireframes, the style tile, mockups, and before and after screenshots.
4. Post the site link and case study draft on Discord. Submit them in Canvas with the Launch Checklist.

Accessibility: add alt text to images, captions or a transcript to recordings, and real headings to documents.

Rubric

Launch Checklist

Objectives

• 12.2 Produce a refined release candidate of a website and a case study draft.

This assignment measures Module Objective 12.2, which supports Course Competency 6.

5 points, Exercises.

Overview

You will check your release candidate against the launch checklist before it goes live.

Instructions

Check your release candidate against this list. Submit a screenshot for each item, or a short note where a screenshot does not fit.

1. Every page in the sitemap is published and reachable from the navigation.
2. Every page has a unique, descriptive title and one H1, with headings in order.
3. Every meaningful image has accurate alt text; decorative images are marked decorative.
4. The favicon and logo show correctly.
5. No placeholder text remains.
6. Any contact or order form says it is a class project and collects no real personal information.
7. The accessibility statement is complete.
8. Every link works and has descriptive link text.
9. The site holds its hierarchy at phone, tablet and desktop widths.
10. The interactive element works with a keyboard and has visible labels, or a text alternative is on the page.

Rubric

How the Generator Works (course page)

Set up an agent

1. Sign in to Gemini with your Maricopa account.
2. If your account shows Gems (saved instructions), make a new Gem for each agent. If it does not, keep each agent’s instructions in a Google Doc and paste them at the start of a new chat. Both ways work the same for this assignment.
3. Write the instructions in five parts: Role (“You are the marketing writer for Pinwheel Cakes”); What you get (the brand kit, the voice section of the copy deck, the campaign brief); Rules (your brand rules); What to return (one line for each template slot: Headline, Subhead, Body, Button, Image alt text); and Never (never invent prices, dates or claims, and mark anything the client must confirm with [Confirm]; never describe or create images).
4. Test it: run it three times and read every draft. If the agent breaks a rule, change the instructions and run it again. Keep each version.

Never paste a classmate’s work, a test participant’s details or anything personal into an agent.

Design System and Two Agents

Objectives

• 13.1 Organize a hand-built website design into a reusable design system of styles, components and a page template.
• 13.2 Evaluate draft copy from two AI agents against written brand rules.

This assignment measures Module Objectives 13.1 and 13.2, which support Course Competencies 4 and 6.

10 points, Process Work.

Overview

You will turn your Figma file into a system, write your brand rules, and set up and test the two agents.

Instructions

1. System: in your Figma file, make color and text styles (or variables) from your style tile. Turn the header, footer, buttons, card and hero into components, if they are not already. Build one landing page template at phone and desktop widths, using only those parts. Name each text layer for its slot: Headline, Subhead, Body, Button.
2. Brand rules: write 8 to 10 rules in a Google Doc, each checkable yes or no. Cover headline length, reading level (8th grade or below), voice words from the kit, approved button labels, at least one key message, and [Confirm] on every fact the client must check.
3. Ask your Gemini client, still in character, for one campaign to promote (for example a cake tasting week, a first-timer night or a repotting workshop). Save the owner’s answer as your campaign brief.
4. Set up the content agent and the brand checker, following How the Generator Works.
5. Run the content agent three times. Run every draft through the brand checker. Then check each draft yourself against the same rules.
6. Make a table: draft number, what the checker said, what you found, and where the checker was wrong. Change the agent instructions at least once because of what you found.
7. Submit the Figma link, the rules Doc, both agents’ instructions (first and final versions), the chat share links, the table and your AI-use log.

Accessibility: add alt text to images, captions or a transcript to recordings, and real headings to documents.

Rubric

Campaign Landing Page

Objectives

• 13.3 Produce a campaign landing page from your design system, approving every word and image.

This assignment measures Module Objective 13.3, which supports Course Competency 6.

10 points, Process Work.

Overview

You will build one new page for your client from your system: a landing page for the campaign in your brief.

Instructions

1. Fill the template in Figma at phone and desktop widths. Start from your best agent draft and edit it line by line. You approve every word. Show at least five lines as agent draft and your final, side by side.
2. Images: choose them yourself from Unsplash, the course image bank or your own photos. Crop and export them the way you did for the style tile, write the alt text, and log each source. No AI-made images.
3. Build the page in your Google Sites site as a new page, using your theme. Link it from the home page, or keep it out of the main menu, as your sitemap suggests.
4. Check it: phone, tablet and desktop previews; WAVE; a keyboard-only pass; and contrast on any new color pair.
5. Write 150 words: what the system made faster, and what still needed you.
6. Post the page link on Discord. Submit the link, the Figma link, the side-by-side table and your AI-use log.

Accessibility: add alt text to images, captions or a transcript to recordings, and real headings to documents.

Rubric

Client Presentation to the Class

Objectives

• 14.1 Present a published website and defend its design decisions using research and test evidence.
• 14.2 Critique classmates’ websites with evidence-based questions grounded in design, usability and accessibility principles.

This assignment measures Module Objectives 14.1 and 14.2, which support Course Competencies 5 and 6.

10 points, Process Work.

Overview

You will post your final client presentation and ask defense questions of three classmates.

Instructions

1. Record a 6- to 8-minute captioned presentation, as if to your client. Cover the goals; a live walkthrough of the site on a phone and a desktop, including the interactive element; the visual system; what testing showed and what you changed; and what you recommend next. Post it on Discord by Wednesday at noon.
2. Watch at least three classmates’ presentations. Post one defense question on each. A good question asks about evidence or trade-offs (“What did testing show that made you move the order button?”), not opinion.
3. Submit your presentation link in Canvas.

Accessibility: add alt text to images, captions or a transcript to recordings, and real headings to documents.

Rubric

Final Website and Case Study

Objectives

• 2.1 Analyze target audiences and user needs to create proto-personas that label their assumptions.
• 2.3 Analyze competitor websites for content, structure, brand presentation and usability using the ten usability heuristics.
• 3.2 Organize website content into a sitemap and navigation plan using card sort results.
• 4.2 Develop low-fidelity wireframes for phone and desktop layouts of key pages.
• 5.1 Produce a brand-to-web style tile from a client brand kit, with an accessible color palette and a responsive type scale.
• 5.2 Produce web-ready images at appropriate resolutions, formats and file sizes, with accurate alt text.
• 6.1 Design responsive page mockups with a clear visual hierarchy and a consistent visual system across screen widths.
• 7.1 Design reusable interface components with interactive states that meet usability and accessibility guidelines.
• 10.1 Produce all pages of a multi-page website with final content and responsive layouts.
• 11.2 Evaluate a live website through a second round of usability and accessibility testing.
• 12.1 Prioritize test findings and peer critique into a refinement plan.
• 14.1 Present a published website and defend its design decisions using research and test evidence.

This project evidences Course Competencies 1, 2, 3, 4, 5 and 6:

1. Analyze target audiences, user needs, competitor websites, and website objectives.
2. Develop website structures using customer journeys, user flows, content strategies, sitemaps, and wireframes.
3. Produce graphics and visual concepts for web publication using typography, color, and imagery.
4. Design responsive website interfaces using visual design, navigation, and usability principles.
5. Evaluate website designs for usability, accessibility, and user experience.
6. Produce an interactive, multi-page website for publication using contemporary web design and publishing tools.

This assignment measures Module Objectives 2.1, 2.3, 3.2, 4.2, 5.1, 5.2, 6.1, 7.1, 10.1, 11.2, 12.1 and 14.1, which support Course Competencies 1, 2, 3, 4, 5 and 6.

30 points, Projects.

Overview

You will answer every question you received, then submit your published website and final case study.

Instructions

1. By Saturday at noon, answer every question you received, including your instructor’s. Post a recording (2 to 4 minutes) or a written answer in your presentation thread. Use evidence from your case study or test findings.
2. Leave three closing comments on classmates’ answers.
3. Submit in Canvas:
   • the live site link (or the district link if public publishing is not allowed)
   • the final case study
   • the Figma link to your final design files (style tile, components, mockups)
   • your captioned presentation recording, revised if you like
   • your defense answers (link or file)
   • the link to your campaign landing page
   • your final AI-use log for the whole project
4. Your instructor may ask for a short follow-up talk if the site or defense leaves a question about who made the work or how well you understand it.

Deliverable Options

Every option is graded on the same rubric. The criteria grade the design, not the machine, and the default path can earn full marks. Every student submits the live site link. Choose how the site also reaches visitors away from the screen:

For either touchpoint, submit a photo of the sign, a short screen recording of each phone opening the site, and one sentence on how the sign carries the brand. Gemini may draft the sign’s wording; you design the sign. Book lab time through STEAMworks; booking windows are posted in the first week of the term. Complete the STEAMworks safety orientation before your first lab session. STEAMworks supplies all materials. Online students have an equal path in the printed touchpoint, which needs no lab.

Accessibility: add alt text to every image, captions or a corrected transcript to every recording, and real headings to every document, in Canvas and in Discord.

Your defense counts in the rubric. Strong answers that use evidence and name trade-offs raise criteria 4, 5 and 6. If you cannot explain a design decision or how your interactive element works, criterion 6 stays at Developing until a short follow-up talk with your instructor. Unanswered questions lower criterion 6.

Accessibility: add alt text to images, captions or a transcript to recordings, and real headings to documents.

Rubric

Final Reflection

Objectives

• 14.1 Present a published website and defend its design decisions using research and test evidence.

This assignment measures Module Objective 14.1, which supports Course Competency 6.

10 points, Exercises.

Overview

You will look back on how your thinking about web design changed and on your own decisions.

Instructions

Record a 4- to 6-minute reflection (captioned, or audio with a corrected transcript). With your instructor’s approval, you may write 400 to 600 words instead; link two pieces of your own process work. Answer:

1. How did your idea of web design change this term?
2. Which design decision are you proudest of, and which would you change? Tie each to a piece of your process work (a sketch, a test finding, a revision).
3. What did testing show you that you could not see yourself?
4. How did you use Gemini, and where did you choose not to?

Rubric

Add to Your Portfolio Site (ungraded, Week 15)

Your portfolio is a Google Site. At the end of every course, you add one or two of your best finished projects, not exercises.

1. Open your portfolio site at sites.google.com with your Maricopa account. If you do not have one yet, start a new site and name it with your name.
2. Add a page for each project. Insert screen-size images of the finished work and one or two process images.
3. Add alt text to every image: select it, choose More, then Add alt text (Google’s accessibility help).
4. Write two or three sentences for each project: the problem, your role and one design choice you would defend.
5. Choose Publish at the top right, type a short web address, and choose Publish.
6. Choose Share. Next to Published site, choose Restricted, so only people you add can see it. Add your instructor’s email. When you apply for a job, add the employer’s email.

Who can see it: Restricted is the default. You may switch to Public whenever you choose. If you see an option for Maricopa, it limits viewing to people with Maricopa accounts. If you make the site public, you can tick “Request public search engines to not display my site” in Publish settings. Google says this is a request, not a guarantee (Publish and share your site).

For this course: your client website can be one of your projects. Link to it from your portfolio page and add screenshots of it at phone and desktop widths.

Already have a Behance portfolio from another class? You may use it instead.

Take Your Work With You (ungraded, Week 15)

Your Maricopa Google account may close after you leave the college. Do this before the course ends, so you keep everything you made even if you stop out, transfer or graduate. It takes about 45 minutes.

1. Save your files in one place. Make one Google Drive folder for this course. Put in it your Figma files, exported graphics, case study, presentation recording and defense answers and your AI-use log. For each Figma file, choose File, then Save local copy, to download a .fig copy.
2. Copy everything to a personal Google account. Make a personal Google account if you do not have one. First make your own copy (File, then Make a copy) of any file someone shared with you, because files you do not own are not copied. Then, signed in to your Maricopa account, open Google Takeout Transfer and copy your Drive and Gmail to your personal account (see Google’s help page). It can take up to a week, and the copies arrive unshared. If Transfer is not available on your account, use Google Takeout to download your Drive as .zip files and save them on your computer.
3. Take your AI work with you. Save your interactive element and any code Gemini wrote for you: copy the Gemini Canvas app’s code into a file in your folder, and keep the prompt or spec you gave it. The instructions and source files are what rebuild it, so keep each one’s instructions in a Google Doc and its sources in your course folder. To keep your chats, use Google Takeout: choose My Activity, then Gemini Apps. After you leave, rebuild it in Gemini with your personal account: make a new one, paste the instructions and upload the sources. If you used a Gem or Gemini Notebook for client role-play or drafts, keep its instructions and sources the same way.
   • Know the privacy difference. Your Maricopa account keeps your Gemini work out of AI training (see Module 0). A personal account does not have the same protections, and Google may use your activity to improve its AI, depending on your settings. In your personal account, open Gemini, then Settings & help, then Activity (Gemini Apps Activity), and decide whether to turn off Keep Activity. Never put anyone else’s private information into a personal account.
4. Move your Google Site. Takeout Transfer copies Drive, Gmail and Photos. Do not count on it to move your client website. First keep the content: put the site’s text in a Google Doc and its images in your course folder, then open each published page and save it as a PDF (File, then Print, then Save as PDF). Then try a direct copy: in the site editor, choose Share and add your personal email as an editor. Sign in with your personal account, open the site, and choose More (the three dots), then Make a copy. If sharing outside Maricopa is blocked, rebuild the site in your personal account at sites.google.com with the same content and publish it again. The web address changes, so update it on your resume and profiles.
5. Protect your artwork online. No website can fully stop AI companies from copying public images. These steps make it harder and show the work is yours:
   • Post screen-size images, not your full-size print files.
   • Add your name and a copyright line (© Your Name) to the description or the image.
   • In Adobe apps or Adobe Content Authenticity, attach Content Credentials and choose “I request that generative AI models not train on or use my content.” It is a request, not a lock: Adobe Firefly honors it, and other AI companies may not (see Adobe’s help page).
   • Optional: Glaze, a free tool from a University of Chicago research team, adds hidden changes that make it harder for AI to copy your style. It works best on detailed artwork and is not a guarantee.
   • Keep your full-size master files private in your Drive folder. Your portfolio site shows only screen-size images and stays Restricted until you choose to make it public.