<?xml version="1.0" encoding="utf-8"?>
Uxcel
Pro MembershipFor TeamsHelp
Log inSign up

Layout & Composition Exercises

Explore hands-on “Layout & Composition” exercises to sharpen your skills and level up your craft. Want more? Browse all search results

Gutters
Exercise

Gutters

Intro to Design Grids
Baseline grid
Exercise

Baseline grid

Intro to Design Grids
Icon keylines
Exercise

Icon keylines

Icon Terminology
Molecules
Exercise

Molecules

Atomic Design by Brad Frost
Icon paddings
Exercise

Icon paddings

Icon Terminology
Spacing
Exercise

Spacing

Intro to Design Layouts
Aspect ratio
Exercise

Aspect ratio

Intro to Design Layouts
Organisms
Exercise

Organisms

Atomic Design by Brad Frost
Breadcrumbs
Exercise

Breadcrumbs

Common UI Components
Don't overload the landing page
Exercise

Don't overload the landing page

Landing Pages
Atoms
Exercise

Atoms

Atomic Design by Brad Frost
Shadow stacking
Exercise

Shadow stacking

Intro to Shadows
Hierarchy design principle
Exercise

Hierarchy design principle

Theory of Design Principles
Positive and negative space
Exercise

Positive and negative space

UI Design Elements
Modules
Exercise

Modules

Intro to Design Grids
Proximity design principle
Exercise

Proximity design principle

Theory of Design Principles
Shadow elevation
Exercise

Shadow elevation

Intro to Shadows
Shadow grouping
Exercise

Shadow grouping

Intro to Shadows
Keylines
Exercise

Keylines

Intro to Design Layouts
Shadow opacity
Exercise

Shadow opacity

Intro to Shadows
Line height
Exercise

Line height

Typographic Terms
Active zones
Exercise

Active zones

Design Format Properties
Proportion design principle
Exercise

Proportion design principle

Theory of Design Principles
Unity design principle
Exercise

Unity design principle

Theory of Design Principles
Information architecture
Exercise

Information architecture

Design Disciplines
Alignment design principle
Exercise

Alignment design principle

Theory of Design Principles
Columns
Exercise

Columns

Intro to Design Grids
Golden ratio grid
Exercise

Golden ratio grid

Design Format Properties
Pay attention to your CTA button
Exercise

Pay attention to your CTA button

Landing Pages
Narrative composition
Exercise

Narrative composition

Intro to Design Composition
Golden ratio
Exercise

Golden ratio

Design Format Properties
Image overlay
Exercise

Image overlay

Image Properties
Container
Exercise

Container

Anatomy of UI Components
Inverted pyramid layout
Exercise

Inverted pyramid layout

Email Design
Margins
Exercise

Margins

Intro to Design Layouts
Grid systems
Exercise

Grid systems

UI Design Deliverables
Labels
Exercise

Labels

Anatomy of UI Components
Centered alignment
Exercise

Centered alignment

Typographic Terms
Typography
Exercise

Typography

UI Design Elements
Balance design principle
Exercise

Balance design principle

Theory of Design Principles
Shadows
Exercise

Shadows

UI Design Elements
Shadow
Exercise

Shadow

Intro to Shadows
Negative space design principle
Exercise

Negative space design principle

Usage of Design Principles
Layout
Exercise

Layout

UI Design Elements
Formal composition
Exercise

Formal composition

Intro to Design Composition
Unity design principle
Exercise

Unity design principle

Usage of Design Principles
Add visual cues to scroll down
Exercise

Add visual cues to scroll down

Landing Pages
Proximity design principle
Exercise

Proximity design principle

Usage of Design Principles
Prioritize content to guide users' attention
Exercise

Prioritize content to guide users' attention

Dashboards
Navigation components
Exercise

Navigation components

Common UI Components