Creative & ArtBeginnerPreview
Flat Illustration
A practical, system-driven course in flat illustration: limited palettes, flat shading, semi-flat depth, character and scene construction, and shipping consistent illustration sets for apps and landing pages.
Beginner designers, marketers, and product people who want to draw clean flat illustrations and ship consistent sets without relying on stock art.
Course content
Workbook & downloads
Put the course into practice — a printable workbook plus editable templates you can fill in and reuse.
Preview the workbook
This workbook turns the course into a build. You will lock a palette, drill primitive-shape construction, design a character kit, and assemble a shippable spot-illustration set with clean exports. Work through one section per module, in order, and keep your files so each exercise feeds the next.
What Flat Illustration Actually Is
Place your target style on the flat spectrum and set up a clean, set-ready working file.
Exercise: Style spectrum teardown
Collect six flat illustrations you admire (from product UIs, Dribbble, or open libraries like Humaaans and Open Peeps) and classify each on the flat spectrum. For each, name the exact depth cues used so you can decide what to imitate.
- Is each one pure flat, semi-flat, or textured flat, and how can you tell?
- Which specific depth cues appear: hard cast shadow, long shadow, accent highlight, grain?
- Which single point on the spectrum will you commit to for your own project, and why?
Worksheet: Document and grid setup record
Set up your Figma or Illustrator file for a set, then record the decisions here so every later piece matches. Fill one value per field.
- Tool (Figma / Illustrator)
- Frame or artboard size (px)
- Base grid spacing (px)
- Default corner radius (px)
- Stroke policy (strokeless / outlined + weight)
- Layer order (top to bottom)
- Chosen spectrum point (pure flat / semi-flat / textured)
Checklist: File-ready before drawing
- Multiple same-size frames or artboards created for a set
- 8-point layout grid and snapping enabled
- Four base layers in order: Background, Shadows, Subject, Highlights
- Default corner radius decided and noted
- Stroke policy chosen and applied as the document default
Color and Shape: The Engine of Flat
Build a structured limited palette and drill primitive-shape construction until it is automatic.
Exercise: Build a value-checked palette
Using Coolors, Adobe Color, or Figma HSL sliders, build a 9 to 12 swatch palette from 2 to 3 base hues plus a neutral, each with a light, mid, and shadow step. Then desaturate the whole palette to verify the values spread.
- What are your base hues and neutral, and what does each represent in the brand?
- By how many degrees did you rotate each shadow step toward blue or purple, and by what percent did you drop brightness?
- When viewed in grayscale, do any two swatches share nearly the same value, and which?
Exercise: Six-primitive reduction drill
Pick five everyday objects (mug, plant, phone, lamp, backpack). Rebuild each using no more than six primitive shapes combined with union, subtract, and intersect. Keep shapes editable; do not flatten.
- Which boolean operation did each object need most, and where?
- Which object was hardest to reduce to six shapes, and what did you drop?
- Did you keep your default corner radius consistent across all five?
Worksheet: Palette specification
Record your locked palette so it is reusable across the whole set. Add one row per swatch.
- Swatch name (e.g. Blue / Light)
- Role (base hue / neutral / shadow / highlight)
- Hex value
- Grayscale value (light / mid / dark)
- Notes (hue shift applied, pairings to avoid)
Checklist: Palette and shape system locked
- Total swatches between 6 and 12
- Every base hue has a light, mid, and shadow step
- Shadow steps shifted toward a cooler or more saturated hue, not pure black
- Palette verified in grayscale with clear value separation
- Palette saved as named styles or a reusable swatch set
- Silhouette test passed on at least one constructed object
Depth Without Gradients
Apply a single light direction, flat shadow shapes, and semi-flat cues, then design a reusable character kit.
Exercise: Shade three forms with one light
Choose a single light direction and shade a sphere, a box, and a cylinder using only flat shadow shapes from your palette. Add a form shadow, a cast shadow, and an occlusion contact shadow to each. No gradients.
- Which light direction did you commit to, and does every shadow obey it?
- How did you build the cast shadow shape for each form?
- Where did the occlusion contact shadow most improve the sense of grounding?
Exercise: Flat to semi-flat upgrade
Take one finished pure-flat object and step it up to semi-flat: add a 45-degree long shadow, one accent highlight on the light-facing side, and a low-opacity grain overlay across the whole piece.
- Did the long shadow keep the same light direction as your form shadows?
- Where did a single accent highlight add the most polish without adding noise?
- At what opacity does the grain read as texture rather than dirt?
Worksheet: Character kit plan
Plan a reusable character as swappable components so you can generate many figures that match. Fill in the kit definition.
- Head-to-body ratio (2 / 3 / 4 heads tall)
- Face system (dot eyes / shape eyes, nose Y/N, mouth style)
- Hand style (mitten / simplified fingers)
- Number of swappable arm poses
- Number of hairstyles / heads
- Number of outfits
- Light direction for the whole kit
Checklist: Depth and character ready
- Single light direction chosen and written down
- All shadows built as solid clipped shapes, no gradients
- Cast shadow grounds each object to a surface
- Semi-flat cues (long shadow, highlight, grain) applied consistently or deliberately omitted
- Character built as a kit with swappable parts
- Line of action used so the figure is not stiff or mirror-symmetrical
Scenes, Sets, and Shipping
Compose a scene, assemble a consistent set, and export clean, well-named assets for handoff.
Exercise: Compose a focal scene
Build one full scene that places your character and at least three props into a balanced composition. Use the rule of thirds, separate background, midground, and foreground, and tie it together with one unifying background shape.
- What is the single focal element, and how did you make it dominant?
- How did you push background elements back (size, position, lighter color)?
- Which area did you deliberately leave calm and empty, and does the focal point breathe?
Exercise: Ship a matched set
Produce a set of at least four spot illustrations covering empty state, error or 404, success, and onboarding. Size them to one frame, reuse your character kit and palette, then lay them side by side and find the outlier.
- Which piece broke the pattern when viewed side by side, and on which rule?
- Which components did you reuse across the set to create a brand feeling?
- After fixing the outlier, does the set read as one coherent family?
Worksheet: Export and handoff record
Record export settings and filenames so a developer can use the set without edits. Add one row per asset.
- Purpose (e.g. empty-inbox, error-404)
- Filename (lowercase-hyphenated)
- Formats exported (SVG / PNG 1x / PNG 2x)
- Optimized? (SVGO / TinyPNG)
- Minimum display size (px)
- Recolor method (CSS variable / fill class / none)
Checklist: Set ready to hand off
- Source files cleaned: extra groups flattened, hidden and off-canvas shapes removed, art fits frame
- SVG exported for scalable assets and PNG at 1x and 2x where needed
- Every SVG run through SVGO or SVGOMG
- Files named by purpose in lowercase with hyphens
- Minimum display size and recolor rules documented
- Whole set reviewed side by side with no remaining outlier
Your Action Plan
- Lock your style: classify six references and commit to one point on the flat spectrum.
- Set up a set-ready file with same-size frames, an 8-point grid, and four ordered layers.
- Build a 9 to 12 swatch palette with light, mid, and shadow ramps, verified in grayscale.
- Drill the six-primitive reduction on five objects until construction feels automatic.
- Pick a single light direction and shade three forms with flat shadow shapes only.
- Step one object up to semi-flat with a long shadow, an accent highlight, and grain.
- Design a character as a reusable kit with swappable arms, heads, and outfits.
- Compose one focal scene using the rule of thirds and a unifying background shape.
- Produce a matched set of at least four spot illustrations, then fix the outlier.
- Clean, export, optimize, and name all assets, and document recolor and sizing for handoff.
Pairs well with
Courses members commonly take alongside this one.
Flagship CoursePreview
Freelance Business Foundations: Position, Price, Sell, and Deliver High-Value Services
Freelancing · Beginner · 16h
Self-pacedPreview
Client GrowthPreview
Freelance Client Acquisition: Outreach, Leads, Referrals, and Deal Flow
Freelancing · Beginner · 15h 30m
Self-pacedPreview
Sales SystemPreview
Freelance Sales & Proposals: Discovery Calls, Scoping, Objections, and Closing
Freelancing · Intermediate · 16h
Self-pacedPreview