UI Design Bootcamp. Master Typography, Colour & Grids

Study visual composition for web and app design, using art-inspired framing of shapes and lines to determine dominant elements. Practice quick two-minute exercises framing squares to explore placement and scale.

Explore how typography and geometric composition convey emotion by analyzing letterforms, spacing, and balance, then practice creating square-based layouts that express feelings like ecstasy or claustrophobia.

Learn to craft stable compositions by equitably distributing visual weight and contrast across the page, using seesaw balance, symmetry, and varied shapes to create equal visual signal.

Explore how colours and shapes convey branding and emotion by comparing triangles with different edges, textures, and contrast to express security and freedom in user interface design.

Master visual hierarchy in design by balancing and contrasting elements, crafting compositions with a single most important focal point and guiding attention through size, color, and layout.

Explore how to create relations in design by grouping related elements, balancing weight with patterns, and connecting shapes to show belonging, crafting a cohesive composition with hierarchy.

Master grid-based alignment to reduce chaos by enforcing conformity and limited colors in compositions. Experiment with weight, baseline, and spacing between shapes to create visually balanced, professional layouts.

Explore how hierarchy, alignment, and rhythm create order and pace in vertical design. Build a composition with varied shapes and colors aligned to beats for balanced contrast.

Practice a sequence of progressive composition exercises to train your eye and intuition, keeping layouts balanced and visually engaging before you consider content or branding.

Discover how typography drives readability and emotion, shapes brand character, and underpins minimal, text-focused web design through thoughtful typefaces, sizes, and layouts.

Define and distinguish typeface, font, and glyph, and explain typography as the art of choosing a typeface and how it is used to form a typographic system.

Discover how web typography differs from print, including font licensing, loading performance, browser rendering, responsive sizing, fallbacks, and the need to design a typographic system before content.

Explore how typographic choices convey emotion and trust online, beyond words, by examining nonverbal communication, visual impact, memory, and brand personality.

Explore how Gutenberg's printing press and movable type transformed typography into readable old-style serifs like Jenson and Garamond, showing why multiple font files are needed for optical weighting across sizes.

Explore serif typefaces across old style, transitional, and modern categories, from Garamond to Baskerville and Bodoni, and learn how contrast and the hand-drawn feel shape their character.

Explore the rise of sans serif typography from early modernists to digital displays, tracing key faces like Futura, Helvetica, Verdana, Arial, and Gotham, and the politics behind type choices.

Explore how typography expresses brand voice and personality, choosing typefaces that convey the right message across time and place. Learn to build a cohesive typographic system using multiple, complementary typefaces.

Cultivate inspiration from diverse design sources to understand how typography conveys mood and brand values. Learn to assess typefaces, compare fonts, and pair Google Fonts for UI design.

Define the brand by identifying five adjectives that capture its personality. Use these adjectives to critique color palette, typography, and composition and align design decisions with the brand.

Explore fonts from Google Fonts and Adobe Fonts, understand serif, sans serif, display, handwriting, and monospace classifications, and navigate licensing for web and mobile with variable fonts and weights.

Explore how to choose body typography for readability in web apps. Balance brand personality with minimal, legible body text using sans serif with appropriate x-height and contrast.

Evaluate using a single typeface, its effect on brand personality and visual hierarchy, and how weights, italics, and small caps support headings, body text, and captions.

Explore the purpose of display text in headings to set tone and convey brand personality, creating visual interest as nonverbal communication, while balancing body text readability.

Explore how to pair two typefaces for meta information like captions, and when needed, introduce a third typeface for captions in content-heavy sites, while ensuring readability.

Learn how to pair typefaces effectively for user interface and web design, using Garamond for body text and Oswald for headings, balancing x-height, contrast, and similarity.

Practice font pairing with the type connection game, evaluating Garamond against partners using rules of family, similarity, contrast, or historic connection, while learning typography anatomy.

Identify inspiration and requirements before choosing a typeface, compare paid and free options like Google Fonts and Adobe Fonts, and balance display, headings, and body text for readability and character.

Explore how users read in web apps, distinguishing navigation from information extraction, and see how the seven reading stages guide typographic choices and readability.

Explore readability as the interplay of text size, line height, and line length, and how typeface choice and brand fit shape clarity across screens.

Compare Verdana and Garamond to explain aspect ratio and x height, and learn to match font sizes across typefaces using font size adjust for consistent rhythm.

Explore how viewing distance and perceptual pixels shape typography, using arc minutes to size text for readability across devices, and learn to compare reference pixel concepts in css and design.

The optimal x height is nine arc minutes; make headings and button text stand out for scanning. Make distinct heading and body typography or variable fonts to manage optical sizing.

Analyze line length in characters per line and its effect on readability; follow 75, 60, and 50 characters per line for desktop, iPad, and mobile using CSS m units.

Set line height to roughly 130–150% of the text height to improve readability. Consider longer line lengths, large x-height fonts, Verdana, and saccadic eye movements when adjusting.

Learn localisation strategies for typography across languages, including Latin, Arabic, Japanese, and Korean scripts, with line breaks, hyphenation, UTF-8 rules, and RTL and LTR considerations.

Learn how typography guides reading from identifying shapes to forming opinions and recalling information, then adjust typeface, size, line length, line height, and color to create visual hierarchy.

Choose the body typeface to set the line height and vertical rhythm, creating a unified baseline grid for text and UI elements, with CSS based on boundary box measurements.

Build a visual hierarchy in a typographic system using center headings, white space, and color to signal reading priority, with overlines, all caps, serif vs sans, dividers, italics, and tracking.

Explore building a type scale by setting heading and caption sizes from body text at 16 reference pixels, using the golden ratio or major thirds for typography and line height.

Create a type scale using an online calculator for headings 1–6 and paragraph text, then set line heights and margins on a 4-pixel grid in Figma, tweaking for visual hierarchy.

Discover how to establish a visual hierarchy using a fixed font size by manipulating margins, tracking, weight, color, and indentation, and practice creating a type scale without changing text size.

Learn how web typography requires a solid typographic system with rules for captions, quotes, headings, body text, and a type scale, inspired by Google's material design.

Enable opentype features in Figma by using the three-dot menu to switch on ligatures and rare ligatures for Roboto text. Understand when features are unavailable and compare with other software.

Discover how to access OpenType features in Sketch using view fonts and typography, exploring old style figures and lowercase numerals across typefaces like Playfair Display and Roboto.

Explore OpenType features in UI design tools, compare Adobe XD, InVision Studio, and Sketch, and learn how Figma offers robust typography exploration in this module.

Explore how to add style and visual interest to strengthen visual hierarchy, turning typographic scale into a full type system for apps or websites, including bold and italic considerations.

Enable ligatures and stylistic alternatives in typefaces like Fairer Sans, observe how f and i form ligatures, and learn how OpenType features and font formats affect availability.

Discover how small caps introduce visual interest at paragraph starts, compare typefaces like Plato and Alegria, and align small caps with x height while adjusting tracking for two-typeface layouts.

Master letter spacing, also called tracking, to control density and establish visual hierarchy in headings and user interface text, reducing tracking on oversized headings and adjusting for all caps.

Kerning adjusts the space between specific letters based on shapes, beyond tracking; fonts may include a kerning table, and JavaScript can enable optical kerning with OpenType features when needed.

Master paragraph alignment for web: use short, self-contained paragraphs with spacing rather than indents, avoid full justification and orphaned words, and reserve central alignment for very short text.

Design a typographic system that unifies typefaces, sizes, line heights, and visual hierarchy for an application, using real content and a single source of truth.

Explore typographic scale using Fibonacci or musical scales to shape visual hierarchy. Learn ligatures, color, and bold text while training your eye and coding the result.

Explore how early 20th century geometry and grid systems shape modern web design by balancing clean geometric grids with intentional chaos, typography systems, and organic elements.

Explore the evolution of grids—from manuscript grids to modular grids—showing how columns, gutters, and spanning create uniform layouts for print and web design.

Align your page by using a typographic vertical grid to guide all elements, ensuring headers, images, and sections line up across two-column and three-column grids for a trustworthy, professional design.

Master the CSS box model, including padding, border, and margin, and learn how divs group content. Explore flexbox and grid to control layout.

Use flexbox to align and space elements inside a div with a max width, ensuring the logo and buttons stay centered and adapt across devices.

Explore how CSS grid uses rows and columns to create uniform widths across components. Learn to span multiple rows or columns and adjust padding and margins for responsive layouts.

Compare fluid and responsive design for typography and layout across devices, using vw units and varying device widths to balance readability, appearance, and SEO ranking.

Explore the anatomy of the grid in web design, including vertical grid, columns, rows, gutters, margins, modules, and regions for spacing and layout.

Learn to design a vertical six-column grid with layers to switch regions on and off, using hang lines, flow lines, and padding to create balanced, breathable layouts.

Develop your eye for typography, color, composition and grids; build intuition to judge design quality, and learn a shared vocabulary to discuss grids and each component's grid in team settings.

Explore how to align typography and imagery to a six-column grid, using vertical regions, padding, and gutters to balance text, images, and icons for a cohesive, symmetric layout.

Design layouts with a 12-column grid and embedded grids to balance headings, body text, images, and white space. Use 5/7 and 2/7 splits for dashboards, maintain gutters for responsive design.

Set up a four-pixel vertical grid and a 16-pixel horizontal grid in figma, then use a 12-column framework to align components and plan typography, margins, and paddings.

Explore building a reusable 12-column grid with 48px margins, 32px gutters, and a 16px vertical grid; create component grids with their own margins and gutters.

Design a responsive six-column grid with breakpoints at 900 and 1200 pixels, switching to three columns on tablets and one on mobile, with left-right constraints.

Develop your eye for typography, color, and grids, and learn to identify when designs work or need adjustments, using a shared vocabulary for grid anatomy.

Explore how color depends on context, distinguish flat colors from gradients, and learn why design studios justify color choices using color theory and exercises from Josef Albers’ Interactions of Color.

Experiment with one color and reveal two looks by changing context and background. Learn how outer colors and surrounding contrast shift perception of the inner color.

Transpose colors by copying the quality changes between color blocks, moving color qualities from red to blue and purple to yellow, using a folding-paper metaphor and doing so without sampling.

Explore simulating transparency by overlaying colored boxes and crafting two new colors between them. Visualize front and back positioning to produce natural looking transparencies and color blends.

Balance a five-color palette to create a harmonious composition, drawing on Paul Smith and Damien Hirst examples and exploring background changes with Adobe Color.

Apply color intuition through context-driven exercises to improve your ability to discuss color and typography with clients and teams, and to develop intuitive color palettes for real projects.

Understand additive and subtractive color primaries, comparing red, green, blue on screens with cyan, magenta, yellow in print. Learn how light and pigment create colors and influence design.

Learn how light behaves as a wave, creating colors through wavelength mixtures and refraction with prisms and glass, and apply these principles to design natural, comfortable interfaces.

Explore how light absorption and reflection create color, with green leaves and red night light, as three cone types and rods translate wavelengths into color and brightness.

Explore additive color mixing with red, green, and blue to create white and hue shifts, and learn how sRGB 0–255 coordinates yield 16 million web colors while CMYK print differs.

Explore how light acts as a wave and wavelength mixtures create colors like purple, gray, white, and black, while rods and three codes interpret color via additive and subtractive processes.