P 2.1 Design a Tribute Site in Figma
DESN 368
P 2.1 Design a Tribute Site in Figma
Web Design Fundamentals · Spring 2026
Due: Sunday, October 19, 11:59 PM Active
Required Submission
Submit a link to your Figma file and add your Figma file to the project page here: [link to figma project]
Visual Design Brief: Tribute Page/Site
Objective
Design a complete tribute page honoring a historical figure (dead or alive). This is the design phase of a two-week project. Next week, you'll build this design in HTML/CSS after receiving peer and instructor feedback.
Getting Started
Step 1: Create Your Figma File
- Name it:
tribute-[figure-name]-[your-initials]-f25
Step 2: Your Subject
- Use the person you did your Wikipedia page on
OR
- Historical figure (any era, any field)
- Someone you admire or find historically significant
- Must have available biography info and images
Step 3: Research Content
- Biography highlights
- Key dates/timeline
- Notable quotes
- Historical photographs
- Context and legacy
Step 4: Mood Board
- Create a page in your Figma file and design a mood board
- Colors
- Images
- Quotes
- Typography
Design Requirements
1. Header Section
- Large hero typography (figure's name)
- Subtitle or tagline (e.g., "1879-1955 | Theoretical Physicist")
- Impactful visual hierarchy
- Thoughtful white space
2. Image Treatment
- Featured historical photograph or portrait
- Border/frame/shadow treatment (your design choice)
- Image caption with styling
- Consider image positioning (center, offset, full-width)
3. Biography/Timeline Section
- Chronologically organized content
- Visual markers for dates/years
- Consistent text block styling
- Section dividers or visual breaks
- Clear content hierarchy (main points vs details)
4. Quote Display
- Special typography treatment for quotes or testimonials
- Visual emphasis technique (size, color, spacing)
- Attribution styling
- Integration with page rhythm
5. Call-to-Action / Links
- "Learn more" or "Read full biography" link
- Button or text link styling
- Hover state consideration
- Visual feedback design
Typography System
Define and document:
- Primary font (headings) - choose from Google Fonts
- Secondary font (body text) - choose from Google Fonts
- Size scale: h1 (e.g., 48px), h2 (32px), h3 (24px), p (16px)
- Font weights: bold, regular, light
- Line height: headings (1.2), body (1.6)
- Letter spacing (if applicable)
Font pairing tips:
- Serif + Sans-serif (classic contrast)
- Consider historical period appropriateness
- Prioritize readability for body text
- Use bold weights for emphasis
Example pairings:
- Playfair Display (serif headings) + Lato (sans body)
- Merriweather (serif) + Open Sans (sans)
- Crimson Text (serif) + Work Sans (sans)
Color Palette
Define and document (include hex codes):
- Primary color (main brand/theme color)
- Secondary color (supporting color)
- Background color (page or section backgrounds)
- Text color (body text - dark gray or black)
- Accent color (links, highlights, CTAs)
Color considerations:
- Reflect historical context (e.g., sepia tones for 1800s figure)
- Ensure sufficient contrast (text readable on backgrounds)
- Create mood/atmosphere (formal, inspirational, reverent)
- Use Coolors.co or Adobe Color for palette generation
Visual Design Elements
Layout & Composition:
- Grid structure (columns, alignment)
- Spacing system (consistent margins/padding)
- Section breaks and rhythm
- Balance between text and images
- Visual flow (top to bottom, eye movement)
Mood & Atmosphere:
- Level of formality (serious, celebratory, educational)
- Historical authenticity vs modern design
- Texture or patterns (if appropriate)
- Overall emotional impact
Art Direction (optional enhancements):
- Decorative elements
- Background textures or patterns
- Ornamental dividers
- Period-appropriate design elements
Deliverable Checklist
In your Figma file, include:
- Complete page layout (header → sections → footer)
- Typography system documented (font names, sizes)
- Color palette with hex codes
- Real content (not Lorem Ipsum) about your chosen figure
- Images (historical photos, portraits)
- All sections designed: hero, bio, timeline, quote, links
- Design notes explaining your choices
Submission Instructions
- Complete Figma design by Monday, April 21, 10:00 AM
- Set sharing to "Anyone with link can view"
- Copy Figma file URL
- Submit URL to Canvas assignment (link field)
Next Week: Virtual Critique & Build
Monday, April 21 (Week 4):
- Virtual design critique (each student presents 3 min)
- Peer + instructor feedback
- Refine designs based on critique