Design Atlas⟳Design process
Wireframes, design tokens, double diamond, usability testing — the vocabulary of how design gets made. — 20 entries
Wireframe와이어프레임
A low-fidelity sketch that shows layout and structure with plain gray boxes — no color, type, or real imagery yet.
Mockup목업
A static screen with real color, type, and imagery — visually finished, but nothing responds when you click it.
Prototype프로토타입
Screens wired together so tapping one actually leads to the next — a fake product built to test behavior, not looks.
Design system디자인 시스템
A living set of components, tokens, and guidelines that lets multiple products and teams build screens from the same parts.
Design token디자인 토큰
A single named value for a design decision — color, spacing, font — so every component referencing it updates together.
Atomic design아토믹 디자인
Brad Frost's chemistry metaphor for assembling interfaces bottom-up: atoms, then molecules, then organisms.
Persona퍼소나
A fictional person — with a name, a face, and goals — that compresses real research patterns into someone the team can argue about.
User journey map사용자 여정 지도
A timeline of the stages a user passes through to reach a goal, with their emotional ups and downs plotted alongside.
Card sorting카드 소팅
A research method where participants group content items written on cards, revealing the categories that live in their heads.
A/B testA/B 테스트
Show two versions of the same screen to randomly split real users and compare the metric difference statistically.
Heuristic evaluation휴리스틱 평가
A method where experts inspect a screen against a validated checklist of usability principles — most often Nielsen's 10 heuristics — without real users.
Usability test사용성 테스트
A research method where real participants attempt a task on a prototype or product while researchers watch for where they get stuck.
Double diamond더블 다이아몬드
Two diamonds of diverge-then-converge, from the UK Design Council, mapping the shape of a design process.
Design sprint디자인 스프린트
A five-day compressed process — from framing the problem to testing a prototype — codified by Google Ventures.
Information architecture정보 구조
Organizing, labeling, and structuring content into a hierarchy — the skeleton a site or app's navigation is built on.
User flow사용자 흐름
A flowchart of the screens and decision points a user passes through to complete one task, start to finish.
Moodboard무드보드
A collage of colors, textures, images, and type fragments that shows a felt direction before it has a name.
Style tile스타일 타일
One page of color swatches, type samples, and button states — an agreement on style, reached before drawing an actual screen.
Handoff핸드오프
The step where a finished design gets packaged for engineers to build exactly as designed — spacing, color, type, and assets included.
Redlines레드라인
Red lines and numbers marking the exact spacing and size between elements, so a CSS value never has to be guessed.