Add research doc on drawing platforms and techniques
This commit is contained in:
Dan committed
1 parent
5d961aaca0
commit
21bf3459a7
1 file changed
+173
@@ -0,0 +1,173 @@
|
||||
# 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))
|
||||
Reference in new issue
Block a user