Agenda
- Partner introductions
- Anatomy of a Website lecture
- Break
- Internet Scavenger Hunt exercise
Part 1: Introductions (15 min)
Pair up with a classmate and introduce yourselves using the three Figma frames you each shared last class, found in the introductions folder.
Walk your partner through your three frames, then switch so they can walk you through theirs.
Part 2: Anatomy of a Website (30 min)
We'll look at websites that are very different from each other in purpose, tone, and audience. For each one, we'll break down what makes it feel the way it does:
- Purpose — what does this website do, and who is it for?
- Typography — the fonts and text styling used, and the mood they set
- Navigation — how you move around the site and find things
- UI behavior — how the site responds when you interact with it: what happens when you click, scroll, or hover over something
- Motion — any animation or movement on the page
- Interaction — how the site invites (or doesn't invite) you to engage with it
We'll go through this together using this Figma file.
Exercise: Internet Scavenger Hunt (60 min)
Find three websites that are clearly different types from one another. Some examples of types to choose from: e-commerce/shopping, portfolio, news, blog, nonprofit, government, or a web app (like an online tool or dashboard).
For each site, write a description of the following.
- Note what type it is
- Describe what it's doing and who it's audience is (who is it for)
- Explain some choices it makes through the design: fonts, navigation, UI behavior, motion, interaction.
- Explain what you like about it and what you don't
Create a new Figma design file in the Internet Scavenger Hunt folder and add your examples in it.
Reading
Before next Tuesday, read: Frank Chimero — The Good Place