Form follows function

형태는 기능을 따른다

The modernist principle that an object's shape should be derived from what it does, not applied to it as decoration.

Also known as: Functionalism기능주의
···
html
<div class="ffo-wrap">
  <div class="ffo-panel">
    <svg viewBox="0 0 100 120" class="ffo-svg">
      <path class="ffo-chair" d="M25,20 Q15,25 20,40 Q10,44 14,55 L18,55 Q20,46 30,44 L32,90 L28,110 L34,110 L38,92 L62,92 L66,110 L72,110 L68,90 L70,44 Q80,46 82,55 L86,55 Q90,44 80,40 Q85,25 75,20 Q60,10 50,14 Q40,10 25,20 Z"/>
    </svg>
    <span class="ffo-cap">ornament — curves decorate</span>
  </div>
  <div class="ffo-panel">
    <svg viewBox="0 0 100 120" class="ffo-svg">
      <path class="ffo-chair ffo-func" d="M22,18 Q50,8 78,18 L78,50 Q60,58 50,58 Q40,58 22,50 Z M30,58 L28,108 L36,108 L38,72 L62,72 L64,108 L72,108 L70,58"/>
    </svg>
    <span class="ffo-cap">function — curves fit the spine</span>
  </div>
</div>
css
.ffo-wrap{display:flex;gap:clamp(10px,4vmin,24px);align-items:center;justify-content:center;width:100%;height:100%;padding:clamp(8px,3vmin,16px)}
.ffo-panel{flex:1;max-width:150px;text-align:center}
.ffo-svg{width:100%;height:auto;display:block}
.ffo-chair{fill:none;stroke:var(--fg);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round;animation:ffo-draw 2.8s ease-in-out infinite}
.ffo-func{stroke:var(--accent)}
.ffo-cap{display:block;margin-top:.5em;font-size:clamp(8px,2.2vmin,11px);color:var(--muted)}
@keyframes ffo-draw{0%,100%{opacity:.6}50%{opacity:1}}

"Form follows function" comes from American architect Louis Sullivan's 1896 essay "The Tall Office Building Artistically Considered." He was writing about the exterior of skyscrapers, but the phrase went on to become a rallying cry for the Bauhaus and modernist industrial design broadly — the idea that ornament shouldn't be applied on top of a form; the form itself should be a direct result of what the object does.

Set a Victorian chair next to a modern ergonomic one and the difference is obvious. The ornamental chair adds carved curves to its legs and back as applied beauty, unrelated to how a body actually sits in it. The functionalist chair's backrest curve follows the spine's natural S-shape, and its seat pan angles down at the front edge to relieve pressure behind the knees — every curve in the form is doing a specific job.

Taken to an extreme, the principle hardens into "ornament is a crime," and mid-to-late-20th-century design criticism pushed back hard on that oversimplification — form and function, the argument goes, are always tangled up with culture, emotion, and free will too. Still, as a practical checklist — "why does this curve exist?" — it holds up. Asking whether a shadow or a corner radius in a UI actually signals hierarchy or clickability, or is just there because it looks nice, is the same question in its digital form.

When to use

When checking whether a detail added to a form is actually doing something, or is just decoration.