Day 2: Visual Language & Cultural Specificity

🎨 The Difference Between "I Made This" and "I DESIGNED This"

Yesterday you built a website. Today we make it look intentional AND think about what "intentional" means in different cultural contexts.

The secret: Design is about making invisible decisions visible only when they help.

Good design is like good typography - you don't notice it, but you'd notice if it was bad.

📐 Layout & The Invisible Grid

Why Grids Matter

Your brain likes patterns. When things align, it feels calm and organized. When they don't, it feels chaotic (sometimes that's good! but usually not).

Professional sites use grids. Amateur sites don't. That's the main difference.

The Box Model (Review + Deep Dive)

Every element on a webpage is a box:

.element {
    width: 300px;              /* Content width */
    padding: 20px;             /* Space inside the box */
    border: 2px solid black;   /* Edge of the box */
    margin: 30px;              /* Space outside the box */
}

Total width = width + padding + border + margin
→ 300px + (20px × 2) + (2px × 2) + (30px × 2) = 404px

* {
    box-sizing: border-box;
}

Flexbox: The Modern Way to Layout

Flexbox makes things align properly without hacks.

.container {
    display: flex;           /* Turn on flexbox */
    gap: 20px;              /* Space between items */
}

.item {
    flex: 1;                /* Each item takes equal space */
}

CSS Grid: For Complex Layouts

When you need a full 2D layout (rows AND columns), use Grid.

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);  /* 3 equal columns */
    gap: 20px;
}

/* Responsive: adjust based on space available */
.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

What this means: "Create as many columns as will fit, each at least 250px wide, sharing space equally"

✍️ Typography: The Most Important Design Decision

Font Choices

• Serif (Georgia, Times) - Traditional, readable, bookish
• Sans-serif (Arial, Helvetica) - Modern, clean, corporate
• Monospace (Courier, Monaco) - Code, technical, retro

🌍 Cultural Specificity in Design

But many cultures have different aesthetic values:

• Japanese web design - Dense information, lots happening, visual hierarchy through color/size
• Chinese design - Red = lucky, symmetry = harmony, more = better
• Indian design - Bright colors, pattern, ornament, abundance
• Middle Eastern design - Right-to-left reading, intricate pattern, calligraphy

🎨 Color Theory (But Make It Political)

The Basics

• Hue - The color itself (red, blue, green)
• Saturation - Intensity (vivid vs. muted)
• Lightness - Brightness (light vs. dark)