COURSE 1 · LESSON 3 OF 5
Make It Look Good
Your app works. Now make it beautiful. Learn the design fundamentals that separate amateur projects from ones people actually want to use.
4
Concepts
~12
Min
+125
XP
// CONCEPT 1
Visual Hierarchy
Visual hierarchy is the most important design concept you'll ever learn. It answers one question: where should the user look first?
Great design guides the eye. The heading is big and bold. The subheading is smaller. The body text is even smaller. The button is brightly colored. Users don't have to think — they just know what to do.
❌ No hierarchy
Welcome to my app
This app helps you track quotes
Click here to add a quote
Everything looks the same. Where do you click?
✓ Clear hierarchy
Quote Board
Save your favorite quotes
Eyes go: Title → Description → Button. Clear!
// PROMPT TO TRY
"Redesign the layout with clear visual hierarchy. The app title should be the largest element. Below it, a subtitle in smaller text. Then a prominent, colored call-to-action button. Everything else should be secondary."
// CONCEPT 2
Color That Works
You don't need to be a color theorist. You need the 60-30-10 rule:
60%
Neutral
Background, cards
30%
Main Color
Sections, headers
10%
Accent
Buttons, highlights
// GREAT COLOR COMBOS FOR DARK APPS
Purple + Orange
Blue + Green
Pink + Yellow
// CONCEPT 3
Typography Rules
Typography is how you choose and style fonts. You only need three rules to make your text look great:
Rule 1: Max 2 fonts
One font for headings (bold, personality). One font for body text (easy to read). Never more than two — it looks chaotic.
Headings: Chakra Petch, Space Grotesk, or Orbitron Body: Inter, DM Sans, or Nunito
Rule 2: Size contrast
Make your heading noticeably bigger than your body text. A good ratio: heading 2-3x bigger than body. If they're too close in size, neither stands out.
Heading: 48px bold Subheading: 24px medium Body: 16px regular
Rule 3: Line height matters
Line height (space between lines of text) should be 1.5x the font size for body text. Tight text is hard to read. Give it room to breathe.
font-size: 16px → line-height: 24px (1.5x) font-size: 18px → line-height: 28px (1.5x)
// CONCEPT 4
Spacing & White Space
If your design looks cramped or overwhelming, add more white space. It's almost never the wrong call. White space makes your design feel more premium, easier to scan, and less stressful.
// THE GOLDEN RULE
"When in doubt, add more padding."
Most beginner designs are too cramped. Professional designers always use more space than feels comfortable at first.
// DESIGN IMPROVEMENT PROMPT
Copy this prompt and paste it after your existing app prompt to instantly improve the design:
"Now improve the visual design: add generous padding (at least 24px inside cards, 48px between sections), increase the heading size to at least 40px bold, add subtle border radius to all cards and buttons, and make sure there's clear visual hierarchy between the title, body text, and call-to-action buttons. Use a consistent color palette with one accent color for interactive elements."
📝 Create a free account to take this quiz and start earning XP
VIBE
● Online
Powered by Claude AI · Vibe Coden Mentor