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:

Line & mark-making — confident lines, contours, and the different marks (crisp outline vs. light construction line vs. hatching stroke). Each mark has a purpose.
Shape → Form — turning flat shapes into 3-D volumes (circle → sphere, square → cube).
Value & shading — light and shadow. This is the big one (see below).
Texture — implying surface (fur, scales, bark) with marks.
Proportion & perspective — relative sizes, foreshortening, simple 1-point perspective.
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)

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.
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.
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.
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.
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.
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.
"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.

12 KiB Raw Blame History Unescape Escape