Design Fundamentals (Color, Typography, Layout, Spacing)
Start with the basics of visual design: color theory, typography, layout, and spacing. These are the building blocks of all great interfaces.
Break it down
01Color Theory
Learn about color wheels, harmony, contrast, and how to use color to create mood and hierarchy.
# Use color palettes from coolors.co or Adobe Color.02Typography
Understand font families, weights, line height, and how to create readable, attractive text.
font-family: 'Inter', sans-serif;
font-size: 16px;
line-height: 1.5;03Layout & Grids
Use grids, alignment, and spacing to create balanced, organized designs.
# 8pt grid system
display: grid;
grid-template-columns: repeat(12, 1fr);04Visual Hierarchy
Guide users' attention using size, color, contrast, and spacing.
# Use larger, bolder text for headings.05White Space & Balance
Use white space to reduce clutter and improve readability. Balance elements for a harmonious layout.
# Add padding and margins to separate elements.Take it further
Continue learning on these source websites.
Refactoring UI Book(opens in a new tab)Color Theory Guide(opens in a new tab)