For this project you will design a website for the brand or organization you created this semester, either your social issue campaign or your branding project. You are not building a real website. You are doing what a UX designer does: planning the content, sketching the layout, and designing polished visual mockups at two screen sizes.
The deliverable is a set of Figma mockups showing your site at desktop and mobile sizes. By designing for both, you are solving the same layout problem twice, which is how responsive design works.
UX stands for User Experience. It is the practice of designing products, including websites, apps, and physical objects, so that people can accomplish what they came to do without confusion, frustration, or guesswork.
Graphic design asks: does this look good? UX design asks: does this work? Good UX does both.
Read these two free pieces from Nielsen Norman Group, the leading UX research organization. No account required.
Required Reading · ~5 min
UX Basics: Study Guide, Nielsen Norman GroupStart here. A short overview of what UX is and how it connects to design. Read the intro and skim the rest, you do not need to follow every link.
Required Reading · ~8 min
Information Architecture: Study Guide, Nielsen Norman GroupThis explains how websites are organized and how navigation works. Read the first three sections: what IA is, sitemaps, and navigation design. This will make Phase 2 of this project make sense.
Navigation is the system that helps users move through a website and understand where they are. On most websites it appears as a row of links near the top of every page, called the navigation bar (or nav bar). Those links are the pages of the site.
Good navigation answers three questions at a glance:
Navigation labels should be plain words people already understand. Avoid clever names. If someone has to think about what a link means, it is a bad label. “Our Journey” is unclear. “About” is clear.
A full horizontal nav bar does not fit on a phone screen. On mobile, navigation is typically hidden behind a hamburger menu, the three-line icon (☰) in the top corner that opens a menu when tapped. You have seen this on every site you visit on your phone. For this project, show the hamburger icon in your mobile mockups in place of the full nav bar. You do not need to design the open menu state.
Choose one of your projects from this semester. Both options are equally valid.
Your website has three pages. Before you design anything, figure out what goes on each one. Collect what you already have from your project and identify what you still need to write.
Each page has a different job:
Pull everything into a Google Doc or Word file, organized by page. Start with what you already have:
Your design brief is a good starting point if you need to write additional copy.
Home page
About page
Action page (shop, donate, contact, get involved, or visit)
If you need to write content that does not exist yet, use Claude, Gemini, or ChatGPT. Be specific: a vague prompt gives a vague result.
A Google Doc or Word file with your content organized by page: Home, About, and your Action page. Submit the link before moving to Phase 2.
Decide what pages your site will have, then sketch what each one will look like, by hand, on paper, before you open Figma.
A site map is a simple diagram showing your pages and how they connect. Draw it on paper or build it in Miro. It should take 15 minutes. Your site must include these three pages at minimum:
You may add a fourth page if it is essential to your brand or cause. Do not add pages just to have more.
Sketch each page by hand before you open Figma. These should be small and rough, the size of a playing card, drawn in pencil. You are working out structure, not making finished art. Think about: What goes at the top? Where is the navigation? Where does the image go? Where is the call-to-action button?
Sketch at least 2 versions of each page at both desktop and mobile size. That is 12 sketches minimum. Exploring more than one layout idea before you commit is the whole point.
This is what your home page mockup needs to include. Every element below is required.
Desktop (1440px wide)
Mobile (375px wide), same page, different layout
Photograph your sketches and upload them with your site map. They do not need to be beautiful, they need to show layout thinking.
A wireframe is a low-fidelity layout in Figma, rectangles, lines, and placeholder text. No color, no real images, no final typography. The goal is to confirm your structure before you commit to visual decisions.
Wireframe all three pages at desktop size (1440px wide). Use rectangles for image areas, gray boxes for content blocks, and real text for headings and navigation labels so the hierarchy is clear.
Three wireframe frames in Figma (desktop, 1440px), Label each frame clearly.
Apply your visual design to the wireframes. Use your brand, color palette, typefaces, logo, and visual style, to bring the layouts to life. This is where your graphic design skills and your UX planning come together.
Three completed desktop mockup frames in Figma.
Design your three pages at 375px mobile width. This is not a scaled-down version of your desktop, it is a rethinking of the layout for a smaller screen.
Three mobile mockup frames in Figma (375px), clearly labeled in the same file as your desktop frames.
Record your presentation using OBS. Screen record your Figma file and narrate your walkthrough as you go. Plan for about 5 minutes. Upload your recording to your student YouTube account as an unlisted video and submit the link in Canvas.
Be prepared to explain why you made your choices, not just describe what you made.
Glendale Community College