Design Atlas
한국어
↝ Motion

Appeal

어필

How clearly and compellingly a character's design reads at a glance. It doesn't mean "cute" — a villain can have plenty of appeal — it means a simple, legible design.

Also known as: Appeal (12 principles)Character appeal
···
html
<div class="split">
  <div class="panel">
    <span class="tag">Plain circle</span>
    <i class="ball"></i>
  </div>
  <div class="panel">
    <span class="tag">Appeal</span>
    <svg class="bean-svg" viewBox="0 0 100 100">
      <path class="bean" d="M50,12 C72,10 88,28 86,50 C88,74 68,90 46,88 C24,90 10,70 12,48 C10,26 28,14 50,12 Z"/>
      <ellipse class="eye e1" cx="40" cy="46" rx="5" ry="7"/>
      <ellipse class="eye e2" cx="62" cy="44" rx="5" ry="7"/>
      <path class="mouth" d="M38,63 Q52,74 66,60" fill="none" stroke-width="3.5" stroke-linecap="round"/>
    </svg>
  </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(42%,100px);aspect-ratio:1;border-radius:50%;background:var(--muted);opacity:.7}
.bean-svg{width:min(52%,130px);aspect-ratio:1}
.bean{fill:var(--accent-3);animation:breathe 2.6s ease-in-out infinite;transform-origin:50% 50%}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.03,.97)}}
.eye{fill:var(--fg);transform-box:fill-box;transform-origin:center;animation:blink 4.2s ease-in-out infinite}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}96%{transform:scaleY(.12)}}
.mouth{stroke:var(--fg)}

Appeal is a measure of design quality, not a popularity contest. Does the silhouette alone tell you what it is and what its personality is? Are the proportions simple and clear? Johnston and Thomas compared it to a good actor holding an audience's attention — a well-designed character is simply pleasant to look at.

Overly symmetrical or overly detailed designs tend to have less appeal, because the eye doesn't know where to settle. Asymmetry, a few big simple shapes, and one distinctive feature — a pair of eyes, a signature silhouette — usually leave a far stronger impression.

In UI this shows up in the design quality of mascots, illustrations, and error-state characters. A perfectly round circle is forgettable; a slightly asymmetric bean shape with two dots for eyes reads as instantly likable and memorable.

The plain circle on the left has no distinguishing features — nothing to remember. The asymmetric bean character on the right has eyes and a mouth, breathes gently, and blinks now and then.

When to use

When designing a mascot or empty-state illustration, simplify the shape and mix in a little asymmetry. Perfect symmetry and pure geometry read as stable but rarely memorable.