San Francisco UI Hierarchy Tour

🌉 San Francisco UI Hierarchy Tour

Learn UI design principles through iconic SF landmarks

🏛️ Alcatraz Island

UI Hierarchy Lesson

Alcatraz: Isolation creates hierarchy

UI Hierarchy: Alcatraz Island

UI hierarchy organizes elements by importance—just like Alcatraz Island, where the main cellhouse dominates while guard towers and smaller structures support the overall design.

The 3 Levels of Hierarchy

Primary (Main Cellhouse)

Most important content—as dominant as the main prison building.

  • Main headlines
  • Key call-to-action buttons
  • Hero images

Secondary (Guard Towers)

Supporting information—like D-Block and the watchtowers.

  • Subheadings
  • Section titles
  • Secondary buttons

Tertiary (Cell Details)

Additional details—individual stories and daily life.

  • Body text
  • Captions
  • Metadata
Size

Like the cellhouse towering over smaller buildings. Primary: 32-48px, Secondary: 24-32px, Tertiary: 14-16px

Spacing

Isolation cells created maximum separation—use white space the same way to emphasize importance.

🏛️ Build Your Hierarchy

Create a custom design component!

Question 1 - Primary Size
What font size (in pixels) for your PRIMARY heading? Choose a size that will dominate (32-48px).
Question 2 - Secondary Size
What font size for your SECONDARY subheading? Smaller than primary but noticeable (24-32px).

🏆 Component Built!

Primary Level

Secondary Level

Your sizes work together to guide users naturally! 🎯

🌉 Golden Gate Bridge

Heading Hierarchy Lesson

Golden Gate: Strong structure

Heading Hierarchy: # to ###

The Golden Gate's iconic towers command attention. In Markdown and HTML, headings work the same way—# is biggest, ## is medium, ### is smaller.

# H1: Primary (The Towers)

Most important—commanding like the 746-foot Art Deco towers. Use # for your main page title.

  • Markdown: # Main Page Title
  • HTML: <h1>Main Page Title</h1>
  • Use only once per page

## H2: Secondary (The Cables)

Supporting sections—like the suspension cables. Use ## for major sections.

### H3: Tertiary (The Roadway)

Subsections and details. Use ### for subsections within H2 areas.

Why It Matters

The number of hashtags determines importance. One # is biggest. Two ## is smaller. Three ### is smallest. Always start with # and nest logically: # → ## → ###. Never skip levels!

🌉 Build Your Hierarchy

Create proper heading structure!

Question 1 - Primary Size
What font size (in pixels) for your PRIMARY heading (32-48px)?
Question 2 - Secondary Size
What font size for your SECONDARY subheading (24-32px)?

🎉 Success!

Primary Level

Secondary Level

Your heading structure is solid! 🌉

🏛️ Palace of Fine Arts

Visual Hierarchy Lesson

Palace: Rotunda dominates

Visual Hierarchy Principles

UI hierarchy organizes elements by importance. Think of the Palace of Fine Arts—the grand rotunda dominates the landscape, with colonnades and lagoon arranged to guide visitors naturally through the architectural wonder.

The 3 Levels of Hierarchy

🏛️ Primary (The Rotunda)

Most important content—as majestic as the 162-foot central dome.

  • Main headlines
  • Key buttons
  • Hero images

🏛️ Secondary (The Colonnades)

Supporting information—like the sweeping curved colonnades that frame the space.

  • Subheadings
  • Section titles
  • Secondary buttons

🏛️ Tertiary (Decorative Details)

Additional details—ornate sculptures, weeping maidens, and reflecting pool.

  • Body text
  • Captions
  • Metadata
5 Tools to Create Hierarchy

1. Size - Like the rotunda rising above the colonnades
2. Weight - Massive Roman columns vs. delicate sculptural details
3. Color - Warm terracotta against lush greenery
4. Spacing - Open lagoon creates breathing room
5. Position - Eyes travel to the rotunda first

🏛️ Build Your Hierarchy

Create a custom design component!

Question 1 - Primary Size
What font size (in pixels) for your PRIMARY heading (32-48px)?
Question 2 - Secondary Size
What font size for your SECONDARY subheading (24-32px)?

🏆 Magnificent!

Primary Level

Secondary Level

Your hierarchy is as beautiful as the Palace! 🎨

🏠 Painted Ladies

Color & Contrast Hierarchy

Painted Ladies: Color creates contrast

Color & Contrast in Hierarchy

UI hierarchy organizes elements by importance—just like the Painted Ladies dominate Alamo Square with their colorful Victorian facades, your design should guide users' eyes naturally through content.

The 3 Levels of Hierarchy

🏛️ Primary: The Victorian Facades

Your most important content—as striking as those colorful Queen Anne mansions.

  • Main headlines
  • Hero images
  • Primary CTAs

🏛️ Secondary: Architectural Details

Supporting information—like ornate bay windows and decorative trim.

  • Subheadings
  • Section titles
  • Secondary buttons

🏛️ Tertiary: Paint & Accents

Additional details—individual colors, spindles, flourishes.

  • Body text
  • Captions
  • Metadata
Quick Tips

✓ Limit to 1-2 fonts maximum
✓ Create dramatic contrast like pastel homes against city skyline
✓ Test by squinting—hierarchy should still be clear
✓ Use consistent patterns throughout your design

🏠 Build Your Hierarchy

Create a custom design component!

Question 1 - Primary Size
What font size (in pixels) for your PRIMARY heading (32-48px)?
Question 2 - Secondary Size
What font size for your SECONDARY subheading (24-32px)?

🎨 Beautiful Work!

Primary Level

Secondary Level

Your design is as iconic as the Painted Ladies! 🏠

AI-Powered Destination Finder

Share your experiences on the microblog!