drawit/docs/RESEARCH-drawing-platforms-and-techniques.md

# DrawIt — Research: Teaching Platforms & Techniques (Shading, Layering, and More)

_Researched June 2026. Purpose: see what SimplyDraw and similar apps do well, understand how
drawing is actually taught (especially shading and layering), and lay out concrete ways to fold
those ideas into DrawIt while staying free, open-source, and privacy-first._

## 1. What the competition does

**Simply Draw** (by Simply / JoyTunes, the Simply Piano people) is the closest match to our vision
and the most polished. Its pitch is "draw like you always wanted," and the teaching model has three
pillars:

- **Guided every step of the way** — each drawing is broken into clear, easy-to-follow steps so
  "anyone can create something they're proud of." This is the part DrawIt already does.
- **Bring drawings to life with shading** — they explicitly frame shading as the thing that "adds
  depth, dimension, and brings sketches to life," and walk learners from studying a reference image
  all the way through to shading, with smart tips on proportion, shading, and texture.
- **Spark imagination** — every tutorial pushes creative thinking and personal expression, not just
  copying. They also use video sessions led by professional artists that you can pause, rewind, and
  draw along with, plus a "personalized path" and weekly new content.

Other platforms worth borrowing from:

| Platform | Audience | What it does well | What we can borrow | Gap we can beat |
| --- | --- | --- | --- | --- |
| **Simply Draw** | Kids→adult | Step-by-step + shading + texture + reference study; pausable artist videos; personalized path | Shading module, reference-image study, replayable demos | Paid subscription; not open; collects data |
| **Drawing Desk** | Kids→advanced | Step lessons with on-screen guides + **text and voice** guides; themed tracks (anime, kawaii, doodle); beginner→refine | Multi-modal guidance (visual + voice + text); themed lesson packs | Ads / IAP; not private |
| **Project Aqua** (Adobe) | Ages 5–12 | Completely **free, ad-free, family-focused**; color premade pages or your own sketch; step-by-step tutorials | Free/ad-free family stance (matches us); color-the-sketch mode | Closed source; Adobe account/ecosystem |
| **Kids Doodle** | Ages 2–8 | Very simple; themed coloring pages; **video replay** of how the art was made | Stroke **replay** is a delightful, low-cost feature; big simple UI | Little real skill progression |
| **Draw.ai** | Kids | Pick artwork, recreate it with **animated** step-by-step instructions | Animated (not just static) step guides | Thin on fundamentals |

The recurring winning ingredients: guided steps (we have it), **shading taught explicitly**, **reference
study**, **replayable/animated demos**, multi-modal cues (show + tell), themed packs, and a creative
"make it your own" finish. Our differentiators stay strong: **free, open source, zero data
collection, self-hostable, tablet-first.**

## 2. How drawing is actually taught (the pedagogy)

Art instruction is remarkably consistent about the order things should be learned. DrawIt's five
ability levels line up well with it; we just need to attach the right *techniques* to each level.

**Work broad → specific ("blocking-in").** Every strong drawing starts by establishing big basic
shapes to nail proportion, placement, and composition *before* any detail. Construction shapes
(ovals, boxes, cylinders) come first; refinement comes later. DrawIt's fish/panda/etc. already teach
this implicitly — we should make it explicit and name it.

**The fundamentals, in rough teaching order:**

1. **Line & mark-making** — confident lines, contours, and the different marks (crisp outline vs.
   light construction line vs. hatching stroke). Each mark has a purpose.
2. **Shape → Form** — turning flat shapes into 3-D volumes (circle → sphere, square → cube).
3. **Value & shading** — light and shadow. This is the big one (see below).
4. **Texture** — implying surface (fur, scales, bark) with marks.
5. **Proportion & perspective** — relative sizes, foreshortening, simple 1-point perspective.
6. **Color** — basic color theory, then color + shading together.

**Shading, specifically** (what SimplyDraw leans on). You teach it by introducing a **light source**
and the three value zones every form has: **highlight, mid-tone, shadow** (plus cast shadow). The
core techniques, easiest to hardest:

- **Tonal/blended shading** — smooth gradients from light to dark.
- **Hatching** — parallel lines; closer together = darker, farther apart = lighter.
- **Cross-hatching** — overlapping sets of lines; denser crossings = darker.
- **Stippling** — dots; denser = darker.

The pro move taught everywhere: **curve your hatching to follow the form's surface**, space lines
wider in light areas and tighter in shadow, and **build up gradually** in passes. The classic
practice object is a sphere lit from one side — exactly the kind of single-shape drill we can ship.

**Layering** — this word has two useful meanings, and we want both:

- **Pedagogical layering (process):** a drawing is built up in stages —
  **construction/under-drawing → refined line art → base color → shading/details.** This is the
  professional workflow (underdrawing → underpainting → overpainting → glazes), simplified for kids.
  Teaching the *process* of layers is as important as teaching shapes.
- **Technical layering (tool):** in digital art, **layers** are stacked transparent sheets — sketch
  on one, line art on another, color below the lines, shading on top. Being able to draw the
  construction loosely and then ink/color *without destroying it* is what makes the process above
  actually learnable. This is a feature we can build into the canvas.

## 3. How to incorporate this into DrawIt

### 3a. Map techniques onto our five levels

Our levels already describe the learner; here's the technique each one should introduce, so the
curriculum has a real backbone instead of just "more lessons."

- **Early Beginner** — simple shapes & confident lines (what we have today: fish, panda, flower,
  unicorn, tree, dinosaur). Add one idea: **construction first** (draw the light guide shapes, then
  the outline).
- **Beginner** — **shape → form** and **base color**: turn the same shapes into 3-D (sphere, cube,
  cylinder), introduce the idea of a light source, color-the-sketch lessons.
- **Learner** — **shading & value**: the sphere drill, highlight/mid-tone/shadow, intro hatching;
  this is the "SimplyDraw moment" where drawings start to look real.
- **Advanced Learned** — **layering, texture, proportion**: full construction → line → color →
  shade workflow on a multi-part subject; cross-hatching; simple perspective.
- **Superb** — **composition & personal style**: multi-object scenes, free-draw challenges with
  light-touch guidance, "make it your own."

### 3b. Extend the lesson data model (small, backward-compatible)

Today a lesson is steps with a single cumulative SVG. Add optional fields so a step can declare what
kind of step it is and what it teaches:

- `kind: "construct" | "outline" | "color" | "shade" | "detail"` — drives UI hints and which canvas
  layer the child should be drawing on.
- `targetLayer` — which layer this step belongs to (sketch / line / color / shade).
- `shadeGuide` — optional overlay showing the light source ☀️ and the highlight/mid-tone/shadow
  zones for the step (so we can *show* where it gets dark).
- `palette` — for color/shade steps, a small kid-safe swatch set (and a **grayscale value strip**
  for shading lessons, since value is taught before hue).

Because these are all optional, the six existing lessons keep working untouched.

### 3c. Canvas / tool features to build (in priority order)

1. **Layers in the drawing stage** (highest leverage — unlocks "layering" properly). Start with a
   fixed set — *Sketch, Lines, Color, Shading* — each a transparent canvas with show/hide and
   opacity. The construction guide lives on Sketch at low opacity; kids ink on Lines; the lesson can
   auto-advance the active layer per step. This is the single feature that most closes the gap with
   SimplyDraw and teaches the pro workflow at the same time.
2. **A shading brush** — a soft, low-opacity, pressure-/speed-sensitive brush (stack passes to go
   darker), plus a **hatching helper** that snaps stroke direction to follow the form. Add a
   light-source marker and faint highlight/shadow zones as a guide overlay.
3. **Value-first palette** — a grayscale strip for value drills and a small color palette for color
   lessons; teach value before color, as the books do.
4. **Reference panel** — an optional side-by-side reference image (or the finished cumulative SVG)
   the child studies before/while drawing, mirroring SimplyDraw's "study the reference → draw →
   shade" flow.
5. **Stroke replay / animated steps** — record the lesson's guide as a timeline and play it back as
   an animation ("watch it drawn, then you try"). Cheap to do with our SVG steps and matches
   Draw.ai / Kids Doodle's most-loved feature. Bonus: kids can replay *their own* drawing.
6. **Multi-modal cues** — we already have text instructions and tips; add optional short audio
   narration per step (Drawing Desk's voice guides) using the browser's built-in speech synthesis,
   so no files and nothing leaves the device.
7. **"Make it your own" finish** — after the guided steps, a free-draw canvas seeded with their
   drawing, so every lesson ends in creative expression (and still earns the badge/award).

### 3d. Keep our principles

Everything above can be done client-side with the same stack: extra canvases for layers,
`SpeechSynthesis` for narration, SVG timelines for replay/animation. **No new data collection, no
third-party services, still free and open source.** Reference images and audio are generated locally
or bundled, so nothing about the child leaves the server you run.

## 4. Suggested roadmap

- **Phase 1 (quick wins):** name "construction first" in Early Beginner; add per-step `kind`/tip
  copy; add stroke **replay** of the guide; add optional speech narration. Small code, big feel.
- **Phase 2 (shading module):** value strip + soft shading brush + light-source/zone overlays; ship
  the **sphere** drill and a shaded version of an existing subject (e.g., a shaded fish) as the first
  Learner lessons.
- **Phase 3 (layering engine):** the Sketch/Lines/Color/Shading layer system in the canvas, with the
  lesson auto-selecting the active layer per step; convert one subject to the full
  construct→outline→color→shade workflow as the flagship Advanced lesson.
- **Phase 4 (color + scenes + polish):** basic color theory lessons, reference panel, multi-object
  Superb challenges, and a personalized "what do you want to draw?" path.

## Sources

- [Simply Draw — official](https://www.hellosimply.com/simply-draw)
- [Simply Draw on the App Store](https://apps.apple.com/us/app/simply-draw-learn-to-draw/id1639875485)
- [Simply Draw review — Research.com](https://research.com/software/reviews/simplydraw-review)
- [7 Best Drawing Apps for Kids — EducationalAppStore](https://www.educationalappstore.com/best-apps/best-drawing-apps-for-kids)
- [Best Drawing Apps for Kids — PureWow](https://www.purewow.com/family/best-drawing-apps-for-kids)
- [Drawing Desk — Google Play](https://play.google.com/store/apps/details?id=com.axis.drawingdesk.v3)
- [Best Drawing Apps for Kids — Adobe Aqua](https://aqua.adobe.com/learn/drawing-apps-for-kids)
- [What are the Drawing Fundamentals? — Fine Art Tutorials](https://finearttutorials.com/guide/drawing-fundamentals/)
- [Shading Techniques — The Virtual Instructor](https://thevirtualinstructor.com/shading-techniques-basics.html)
- [Hatching and cross-hatching — Fiveable](https://fiveable.me/drawing-foundations/unit-6/hatching-cross-hatching/study-guide/SBjr8djW1TCdGeXY)
- [Working in layers — Wikipedia](https://en.wikipedia.org/wiki/Working_in_layers)
- [Underdrawing — Wikipedia](https://en.wikipedia.org/wiki/Underdrawing)
- [Layers (digital image editing) — Wikipedia](https://en.wikipedia.org/wiki/Layers_(digital_image_editing))