Seattle
Roadtrip through Seattle and learn UI while you're there!
🎯 Your Personalized Seattle Experience
Based on your itinerary preferences, here are your selected destinations:
LESSONS
Progress Bar Lesson: Space Needle Theme
What is a Progress Bar?
A progress bar shows how much of a task is complete. Think of the Space Needle—visitors riding the elevator up 520 feet to the observation deck, watching floor numbers light up as you ascend. It shows where you are and how much is left.
The 3 Parts of a Progress Bar
The Track (The Full Tower)
From ground level to the top deck—represents the total task.
- Background bar showing the complete distance
The Fill (Floors Climbed)
Progress up the tower—shows how far you've come.
- Colored bar that grows as you complete the task
The Label (Floor Display)
Digital floor counter in the elevator—tells you exactly where you are.
- Text showing percentage or "Level 3 of 5"
5 Design Tips
1. Make it Visible
Like the bright floor display in the elevator—easy to see in any light.
- Use clear colors with good contrast
- Make it big enough to notice
2. Show Real Progress
Like the smooth elevator ride—accurate and honest.
- Update smoothly as tasks complete
- Never fake progress or go backwards
3. Use Iconic Colors
Space Needle white and orange create recognizable style.
- Match your brand colors
- Use color to show status (green = good, red = error)
4. Add Context
Like the elevator operator's announcements—tell users what's happening.
- "Loading... 60%"
- "Step 3 of 5 complete"
5. Keep it Simple
Don't overcomplicate like confusing observation levels.
- One bar, clear message
- Avoid fancy animations that distract
Common Mistakes
- No feedback—users don't know if anything is happening
- Jumping progress—going from 10% to 90% instantly feels fake
- Stuck at 99%—like an elevator frozen between floors
- Too small—like trying to read the floor display from outside
- No message—progress without context confuses users
Quick Example
Good: "Uploading to cloud... [████████░░] 80% - Floor 4 of 5"
Bad: [░░░░░░░░░░] (no message, unclear progress)
Quick Tips
- Always show feedback when users wait
- Smooth animations feel more professional (like the elevator)
- Add estimated time if possible: "About 40 seconds to top"
- Use motion to show it's working, not frozen
- Celebrate completion—like reaching the stunning 360° view!
🎯 Progress Bar Quiz
Test your knowledge of progress bar design principles!
💡 Hint: The opposite of jerky or jumpy
✅ Correct! Watch the difference:
Smooth Animation:
Smooth progress feels natural and professional!
💡 Hint: Not big enough
🌟 Excellent! Size matters:
Processing files...
A visible progress bar keeps users informed and engaged!
🏆 Quiz Complete!
You've mastered the key principles of progress bar design!
Ready to build better user experiences! 🎉
Progress Bar Lesson: Pike Place Market Theme
What is a Progress Bar?
A progress bar shows how much of a task is complete. Think of Pike Place Market—shoppers moving through vendor stalls from the fish market to the flower stands, checking items off their list. It shows where you are and how much is left.
The 3 Parts of a Progress Bar
The Track (The Full Market)
From the famous Pike Place sign to the last vendor—represents the total task.
- Background bar showing the complete distance
The Fill (Stalls Visited)
Progress through the market—shows how far you've come.
- Colored bar that grows as you complete the task
The Label (Vendor Signs)
Clear signs at each stall—tells you exactly where you are.
- Text showing percentage or "3 of 10 items checked out"
5 Design Tips
1. Make it Visible
Like the bright vendor signs—easy to see in the busy market.
- Use clear colors with good contrast
- Make it big enough to notice
2. Show Real Progress
Like crossing items off your shopping list—accurate and honest.
- Update smoothly as tasks complete
- Never fake progress or go backwards
3. Use Market Colors
Bright produce colors and fresh fish tones create energy.
- Match your brand colors
- Use color to show status (green = good, red = error)
4. Add Context
Like vendor shouts calling out specials—tell users what's happening.
- "Processing payment... 60%"
- "2 of 5 items added to cart"
5. Keep it Simple
Don't overcomplicate like a crowded Saturday morning.
- One bar, clear message
- Avoid fancy animations that distract
Common Mistakes
- No feedback—users don't know if anything is happening
- Jumping progress—going from 10% to 90% instantly feels fake
- Stuck at 99%—like waiting in the checkout line forever
- Too small—like trying to read price signs from across the aisle
- No message—progress without context confuses users
Quick Example
Good: "Adding to cart... [████████░░] 80% - Almost done!"
Bad: [░░░░░░░░░░] (no message, unclear progress)
Quick Tips
- Always show feedback when users wait
- Smooth animations feel more professional
- Add estimated time if possible: "About 30 seconds remaining"
- Use motion to show it's working, not frozen
- Celebrate completion—like finding the perfect bouquet!
🎯 Progress Bar Quiz
Test your knowledge of progress bar design principles!
💡 Hint: The opposite of jerky or jumpy
✅ Correct! Watch the difference:
Smooth Animation:
Smooth progress feels natural and professional!
💡 Hint: Not big enough
🌟 Excellent! Size matters:
Processing files...
A visible progress bar keeps users informed and engaged!
🏆 Quiz Complete!
You've mastered the key principles of progress bar design!
Ready to build better user experiences! 🎉
Progress Bar Lesson: Mount Rainier National Park Theme
What is a Progress Bar?
A progress bar shows how much of a task is complete. Think of Mount Rainier National Park—hikers watching trail markers count up to the summit, or the elevation gain on your climb. It shows where you are and how much is left.
The 3 Parts of a Progress Bar
The Track (The Trail)
The full trail from Paradise to the summit—represents the total task.
- Background bar showing the complete distance
The Fill (Miles Hiked)
Progress up the mountain—shows how far you've come.
- Colored bar that grows as you complete the task
The Label (Trail Marker)
Elevation signs and mile markers—tells you exactly where you are.
- Text showing percentage or "3 of 10 miles complete"
5 Design Tips
1. Make it Visible
Like trail markers visible through the mist—easy to see from anywhere.
- Use clear colors with good contrast
- Make it big enough to notice
2. Show Real Progress
Like elevation markers on the trail—accurate and honest.
- Update smoothly as tasks complete
- Never fake progress or go backwards
3. Use Nature Colors
Mountain blues and forest greens create calm focus.
- Match your brand colors
- Use color to show status (green = good, red = error)
4. Add Context
Like a trail map—tell users what's happening.
- "Uploading photos... 60%"
- "2 of 5 forms completed"
5. Keep it Simple
Don't overcomplicate like confusing trail junctions.
- One bar, clear message
- Avoid fancy animations that distract
Common Mistakes
- No feedback—users don't know if anything is happening
- Jumping progress—going from 10% to 90% instantly feels fake
- Stuck at 99%—like being 100 feet from the summit forever
- Too small—like trying to read a trail sign from a mile away
- No message—progress without context confuses users
Quick Example
Good: "Processing images... [████████░░] 80% - 2 minutes left"
Bad: [░░░░░░░░░░] (no message, unclear progress)
Quick Tips
- Always show feedback when users wait
- Smooth animations feel more professional
- Add estimated time if possible: "About 2 minutes remaining"
- Use motion to show it's working, not frozen
- Celebrate completion—like reaching the summit!
🎯 Progress Bar Quiz
Test your knowledge of progress bar design principles!
💡 Hint: The opposite of jerky or jumpy
✅ Correct! Watch the difference:
Smooth Animation:
Smooth progress feels natural and professional!
💡 Hint: Not big enough
🌟 Excellent! Size matters:
Processing files...
A visible progress bar keeps users informed and engaged!
🏆 Quiz Complete!
You've mastered the key principles of progress bar design!
Ready to build better user experiences! 🎉
Progress Bar Lesson: Lumen Field Theme
What is a Progress Bar?
A progress bar shows how much of a task is complete. Think of Lumen Field—fans watching the game clock count down, or the "12th Man" flag raising before kickoff. It shows where you are and how much is left.
The 3 Parts of a Progress Bar
The Track (The Field)
The full 100 yards—represents the total task.
- Background bar showing the complete distance
The Fill (Yards Gained)
Progress down the field—shows how far you've come.
- Colored bar that grows as you complete the task
The Label (Scoreboard)
Game stats and time remaining—tells you exactly where you are.
- Text showing percentage or "3 of 10 steps complete"
5 Design Tips
1. Make it Visible
Like the giant scoreboard—easy to see from anywhere.
- Use clear colors with good contrast
- Make it big enough to notice
2. Show Real Progress
Like yard markers on the field—accurate and honest.
- Update smoothly as tasks complete
- Never fake progress or go backwards
3. Use Team Colors
Seahawks blue and green create excitement.
- Match your brand colors
- Use color to show status (green = good, red = error)
4. Add Context
Like the play clock—tell users what's happening.
- "Uploading files... 60%"
- "2 of 5 questions answered"
5. Keep it Simple
Don't overcomplicate like a confusing penalty call.
- One bar, clear message
- Avoid fancy animations that distract
Common Mistakes
- No feedback—users don't know if anything is happening
- Jumping progress—going from 10% to 90% instantly feels fake
- Stuck at 99%—like being at the 1-yard line forever
- Too small—like trying to read the scoreboard from the parking lot
- No message—progress without context confuses users
Quick Example
Good: "Processing images... [████████░░] 80% - 2 minutes left"
Bad: [░░░░░░░░░░] (no message, unclear progress)
Quick Tips
- Always show feedback when users wait
- Smooth animations feel more professional
- Add estimated time if possible: "About 2 minutes remaining"
- Use motion to show it's working, not frozen
- Celebrate completion—like a touchdown celebration!
🎯 Progress Bar Quiz
Test your knowledge of progress bar design principles!
💡 Hint: The opposite of jerky or jumpy
✅ Correct! Watch the difference:
Smooth Animation:
Smooth progress feels natural and professional!
💡 Hint: Not big enough
🌟 Excellent! Size matters:
Processing files...
A visible progress bar keeps users informed and engaged!
🏆 Quiz Complete!
You've mastered the key principles of progress bar design!
Ready to build better user experiences! 🎉