Design Atlas
한국어
↝ Motion

Solid drawing

솔리드 드로잉

The principle that even a 2D drawing should read as a solid 3D form with real weight and balance — not a flat silhouette sliding around.

Also known as: Solid drawing (12 principles)Form and volume
···
html
<div class="split">
  <div class="panel">
    <span class="tag">Flat</span>
    <i class="ball flat"></i>
  </div>
  <div class="panel">
    <span class="tag">Solid</span>
    <i class="ball solid"></i>
  </div>
</div>
css
.split{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;gap:3%}
.panel{position:relative;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface);display:grid;place-items:center}
.tag{position:absolute;top:6%;left:0;right:0;text-align:center;font:700 10px/1 ui-monospace,monospace;color:var(--muted)}
.ball{width:min(46%,110px);aspect-ratio:1;border-radius:50%}
.flat{background:var(--accent)}
.solid{
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.85), rgba(255,255,255,0) 42%),
    radial-gradient(circle at 68% 78%, rgba(0,0,0,.32), rgba(0,0,0,0) 55%),
    var(--accent-3);
  box-shadow:0 6px 14px rgba(0,0,0,.2);
  animation:turn 3.4s linear infinite;
}
@keyframes turn{0%{transform:scaleX(1)}50%{transform:scaleX(.55)}100%{transform:scaleX(1)}}

Classical animators trained in formal drawing and sculpture — they had to understand a character as a real 3D form from any angle so it stays consistent as the "camera" turns. The classic mistake to avoid is "twinning": when both sides of a body mirror each other exactly, the form reads as flat, like a paper cutout instead of something solid.

Light, shadow, and perspective-correct foreshortening are the tools of solid drawing. To sell a sphere turning in place, its highlight has to travel across the surface and its silhouette has to narrow and widen with the rotation.

In UI, this is the difference between a flat, single-color icon and one with a subtle gradient and highlight — the second one simply reads as having more physical presence.

The circle on the left is flat — one solid color, no cues about form. The one on the right has a highlight, a shadow, and a width that narrows and widens on a cycle, so it reads as a sphere continuously turning in place.

When to use

Use it where physical presence matters — brand mascots, icon sets with a 3D feel. Minimal, flat design systems often skip it on purpose.