Design Atlas
한국어
▣ Presentation & slides

Signal-to-Noise

신호 대 잡음

The less decoration unrelated to your message — drop shadows, borders, extra colors — the more clearly the message itself reads.

Also known as: ChartjunkSlide clutter
···
html
<div class="slide" id="slide">
  <span class="badge" id="badge"></span>
  <div class="deco d1"></div><div class="deco d2"></div><div class="deco d3"></div>
  <div class="msgwrap"><p class="msg" id="msg"></p></div>
</div>
css
.slide{position:absolute;inset:6%;border-radius:clamp(6px,1.6vmin,14px);background:var(--surface);border:3px solid var(--accent-2);overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.35);background-image:radial-gradient(var(--line) 1px,transparent 1px);background-size:14px 14px}
.slide.good{border:1px solid var(--line);box-shadow:none;background-image:none}
.badge{position:absolute;top:4%;right:4%;z-index:2;font:800 clamp(10px,2.4vmin,14px)/1 system-ui;padding:.3em .7em;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--accent-2)}
.slide.good .badge{color:var(--accent-3)}
.deco{position:absolute;opacity:.9}
.d1{width:14%;aspect-ratio:1;border-radius:50%;background:var(--accent);top:6%;left:6%}
.d2{width:10%;aspect-ratio:1;background:var(--accent-3);bottom:8%;right:10%;transform:rotate(45deg)}
.d3{width:8%;aspect-ratio:1;border-radius:50%;background:var(--accent-2);bottom:10%;left:14%}
.slide.good .deco{display:none}
.msgwrap{position:absolute;inset:0;display:grid;place-items:center;padding:10vmin}
.msg{margin:0;text-align:center;font:800 clamp(12px,3.4vmin,19px)/1.35 -apple-system,sans-serif;color:var(--fg);padding-bottom:.3em;border-bottom:6px solid var(--accent-2);text-shadow:0 2px 0 var(--accent-3),2px 0 0 var(--accent)}
.slide.good .msg{border-bottom:3px solid var(--accent);text-shadow:none}
js
const el = (id) => document.getElementById(id);
const slide = el('slide');
const L = {
  ko: { badge: ['✕ 잡음', '✓ 신호'], msg: '다음 분기 목표는 매출 20% 성장입니다' },
  en: { badge: ['✕ Noise', '✓ Signal'], msg: "Next quarter's goal is 20% revenue growth" },
};
let n = 0;
function render() {
  const good = n % 2 === 1;
  const lang = n % 4 < 2 ? 'ko' : 'en';
  const t = L[lang];
  slide.classList.toggle('good', good);
  el('badge').textContent = good ? t.badge[1] : t.badge[0];
  el('msg').textContent = t.msg;
}
render();
setInterval(() => { n++; render(); }, 2000);

Edward Tufte's "chartjunk" idea, coined for data visualization, applies to a whole slide just as well. A drop shadow, a decorative border, a spare icon, one extra accent color — each looks harmless alone, but together they pull attention away from the actual message.

The demo's ✕ dresses up one plain sentence with a heavy colored border, a shadow, a background pattern, and three decorative shapes. The ✓ keeps only the sentence and one underline to emphasize it — same content, far easier to read.

Checklist: remove one element at a time and ask whether the message still comes through — if yes, cut it. Limit each slide to one accent color. Save shadows and borders for places that genuinely need a boundary.

When to use

Before keeping a template's default decoration — gradient backgrounds, corner shapes — check whether it actually helps the message.