UX/UI Design: Foundations to Practice · Design Handoff and Working with Developers
Writing a Design Specification
A genuinely complete design specification does considerably more work than a single static screenshot, and understanding the specific components a good specification actually includes prevents an engineer from having to guess at details a designer could have simply documented explicitly upfront.
A specification should state exact, specific values, a precise spacing measurement, a precise color code, a precise font size, rather than leaving an engineer to visually estimate these specific values by eye from a static image, since even a small, seemingly minor discrepancy between an engineer's own visual estimate and the designer's actual, precise intended value can compound noticeably across many individual elements throughout an entire screen, ultimately producing a genuinely different, less precise final result than what was actually originally intended.
- A specification should state exact values (spacing, color, font size) rather than leaving an engineer to visually estimate them, since small discrepancies compound across a screen.
- Documenting all interactive states (default, hover, active, disabled), not just the default state, prevents different engineers from independently guessing different, inconsistent behaviors.
- A specification should explicitly describe how a layout changes at different screen sizes, rather than providing one static width and leaving adaptation logic to independent improvisation.
- Specification effort should prioritize genuinely novel elements with no existing precedent, since already-documented design system elements need comparatively little additional specification.