Project Overview

You will design and build a complete tribute page honoring the historical figure you researched for your Wikipedia project. This project has two phases:

• Week 1 (Design): Create a visual design in Figma
• Week 2 (Code): Build your design using HTML and CSS

Learning Objectives

By completing this project, you will be able to:

Design Phase

• Research and curate biographical content for web presentation
• Apply typography principles using web-safe font pairings (Google Fonts)
• Create accessible color palettes with documented contrast ratios
• Design a cohesive visual hierarchy for content organization
• Use a design system approach (documented colors, typography, spacing)

Code Phase

• Structure content using semantic HTML5 elements (<header>, <main>, <section>, <figure>, <footer>)
• Differentiate between IDs (unique identifiers) and classes (reusable styles)
• Apply text emphasis appropriately using <strong> and <em> tags
• Create accessible external links with proper attributes
• Translate a visual design into functional HTML/CSS code
• Use CSS selectors (element, class, ID) to style content
• Implement web typography using Google Fonts

Examples for Inspiration

• Example 1: Classic Tribute Page
• Example 2: Modern Tribute Page

Part 1: Design Phase

Due: Sunday, October 19, 11:59 PM
Submission: Figma file share link via Canvas

Getting Started

Step 1: Create Your Figma File

• Name it: tribute-[figure-name]-[your-initials]-f25
• Example: tribute-einstein-jd-f25

Step 2: Your Subject

Use the person you selected for your Wikipedia page project.

Requirements:

• Historical figure (any era, any field)
• Must have available biography information and images
• Someone you admire or find historically significant

Step 3: Research Content

Gather the following:

• Biography highlights and key facts
• Important dates and timeline events
• Notable quotes or testimonials
• Historical photographs or portraits
• Context about their legacy and impact

Step 4: Create a Mood Board

Create a page in your Figma file with a mood board containing:

• Color palette ideas
• Image references and inspiration
• Quote examples with typography styles
• Font pairing explorations

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. Hero Image Treatment

• Featured historical photograph or portrait
• Border/frame/shadow treatment (your design choice)
• Image caption with styling
• Consider image positioning (centered, offset, full-width)

3. About/Biography Section

• Clear section heading
• Biographical information organized into readable paragraphs
• Visual emphasis on key names, dates, or achievements
• Consistent text styling

4. Timeline/Highlights Section

• Chronologically organized content OR list of key achievements
• Visual markers for dates/years (if timeline)
• Section dividers or visual breaks
• Clear content hierarchy (main points vs details)

5. Quote Display (Optional but Recommended)

• Special typography treatment for quotes or testimonials
• Visual emphasis technique (size, color, spacing)
• Attribution styling
• Integration with overall page rhythm

6. External Link / Call-to-Action

• "Learn more" or "Read full biography" link/button
• Clear button or text link styling
• Consider hover state appearance
• Visual feedback design

7. Footer

• Simple footer with citation or additional links
• Smaller text size
• Subtle styling

Typography System

Define and document in your Figma file:

Font Choices:

• Primary font (headings) - choose from Google Fonts
• Secondary font (body text) - choose from Google Fonts

Size Scale:

• h1 (e.g., 48px)
• h2 (e.g., 32px)
• h3 (e.g., 24px)
• p (body text: 16px-18px)

Font Weights:

• Bold, regular, light (document which you're using)

Spacing:

• Line height for headings (e.g., 1.2)
• Line height for body text (e.g., 1.6)
• Letter spacing (if applicable)

Font Pairing Tips:

• Serif + Sans-serif creates 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)
• Libre Baskerville (serif) + Source Sans Pro (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 must be 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 visual 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 — Design Phase

In your Figma file, include:

• ☐ Complete page layout (header → sections → footer)
• ☐ Typography system documented (font names, sizes, weights)
• ☐ Color palette with hex codes documented
• ☐ Real content (not Lorem Ipsum) about your chosen figure
• ☐ Images (historical photos, portraits)
• ☐ All required sections designed: header, hero image, about, timeline/highlights, link, footer
• ☐ Mood board page
• ☐ Design notes explaining your choices

Submission Instructions — Design Phase

1. Complete Figma design by Sunday, October 19, 11:59 PM
2. Set sharing to "Anyone with link can view"
3. Copy Figma file URL
4. Submit URL to Canvas assignment (link field)
5. Add your Figma file link to the project page: [link to figma project]

Part 2: Code Phase

Due: Sunday, October 26, 11:59 PM
Submission: GitHub repository link OR CodePen link via Canvas

After receiving feedback on your design during our virtual critique session (Monday, October 20), you will build your tribute page using HTML and CSS.

HTML Structure Requirements

Your tribute page must include the following semantic HTML structure:

1. Document Structure

• A <main> element with id="main" containing all primary content
• A <header> element at the top of your page
• A <footer> element at the bottom of your page

2. Header Section

• Within <header>, include an <h1> with id="page-heading" containing your subject's name
• Include a subtitle using <p> with class="subtitle" (e.g., dates, profession, nationality)

3. Hero Image Section

• Create a <figure> element with id="img-div"
• Within the <figure>, include an <img> with id="hero-image" and appropriate src and alt attributes
• Within the <figure>, include a <figcaption> with id="img-caption" describing the image

4. About Section

• Create a <section> element with id="about"
• Include a heading (<h2>) for this section
• Include biographical paragraphs using <p> elements with appropriate class="biography"
• Use <strong> for key