Metal + View
A mirror reflects but does not create. It shows what stands before it with reversed handedness but faithful representation. Every preview function, every real-time feedback mechanism, every WYSIWYG editor serves as mirror—showing users the result of their actions before commitment. The mirror eliminates surprise by making consequences visible. But mirrors can lie through distortion, selective framing, or delayed reflection. A preview that does not match final output is a broken mirror. The gap between reflected image and actual state creates dangerous misalignment where users trust the reflection more than the reality.
A mirror shows reality inverted. Left appears right; right appears left. This reversal is systematic—the mirror doesn't distort arbitrarily but follows geometric laws. Users learn to compensate for the reversal, adjusting their actions based on the inverted feedback.
Interface previews function as mirrors. The WYSIWYG editor shows how a document will look when printed. The CSS preview shows how styles will render. The mockup shows how the final product will appear. These previews reflect reality but may introduce systematic distortions analogous to the mirror's left-right reversal.
The distortion must be consistent and learnable. A preview that randomly differs from final output is useless. A preview that consistently differs in predictable ways (lower resolution, simplified rendering, missing features) can be useful if users understand the systematic differences. The designer must either eliminate distortion (make the preview perfectly accurate) or document the distortion clearly.
Mirrors provide instant feedback—move your hand and see it move simultaneously. This real-time reflection enables precise motor control. You adjust your tie while watching the mirror, using the reflection to guide action.
Interactive interfaces use real-time mirroring for similar precision. Dragging an object shows it moving in real-time. Adjusting a slider shows the effect immediately. Typing text displays characters as they're entered. The immediate reflection allows users to guide their actions moment-by-moment.
Delayed reflection breaks the feedback loop. A text editor that shows characters a second after typing would be unusable. A slider that updates its effect only after release would be frustrating. Real-time reflection requires low latency—milliseconds, not seconds. The designer must ensure reflection latency is below perception threshold or abandon real-time reflection in favor of preview-then-commit patterns.
Mirrors enable self-examination and self-correction. But excessive focus on reflection becomes narcissistic—attention consumed by the image rather than directed toward the world. A person who spends hours examining their reflection in a mirror loses hours of productive activity.
Design tools with rich preview capabilities create similar traps. The designer who endlessly tweaks micro-adjustments visible only in high-magnification preview mode may be optimizing the reflection rather than the reality. The preview is not the product; it's a representation of the product.
The designer must distinguish between previews that improve decision-making (useful reflection) and previews that become ends in themselves (vanity). Previews should enable better work, not replace work with reflection-polishing. Time spent in preview mode should improve output quality, not just reflection appearance.
Funhouse mirrors deliberately distort—stretching, compressing, warping. The reflection is recognizably related to reality but systematically altered. These distortions can be entertaining or instructive (showing exaggerated features) but are not functional for self-examination.
Some design previews are funhouse mirrors—they show the design but with significant distortions that make them unreliable for decision-making. A mobile preview on a desktop screen may show wrong dimensions, wrong touch targets, wrong font rendering. A print preview may show colors differently than the actual printer will render them.
Distorted previews should be labeled as such. "Approximate preview," "for illustration only," "final output may differ." Without warning, users will trust the distorted reflection and be surprised when reality differs. The designer should either eliminate distortion or explicitly communicate its presence and nature.
Some designs are mirror-symmetric—identical when flipped. A bilaterally symmetric interface looks the same reflected. Other designs are asymmetric—mirroring them creates a different composition.
Right-to-left language interfaces are mirror images of left-to-right interfaces. Navigation that appears on the left in LTR appears on the right in RTL. The content is mirrored but functionally equivalent. This requires that the design is structurally symmetric even if visually asymmetric.
Creating mirrorable designs requires avoiding baked-in directional assumptions. Icons that point right in LTR should flip to point left in RTL. Asymmetric decorative elements should either flip or be redesigned for neutral orientation. The design must anticipate reflection and structure itself to remain functional when mirrored.
Mirrors reflect instantaneously (actually at light speed, but perceptually instant). Digital previews have latency—the time between action and reflected result. Even milliseconds of latency can be perceptible and disruptive.
Video conferencing demonstrates delay problems. The slight lag between speaking and seeing yourself speak in the preview creates uncanny disconnection. The reflection is recognizably you but slightly out of sync. This temporal distortion is harder to compensate for than spatial distortion.
Designers should minimize preview latency. If latency cannot be eliminated, consider abandoning real-time preview in favor of on-demand preview that users trigger deliberately. A slow real-time preview is worse than a fast on-demand preview. The user can compensate for the latter; the former just feels broken.
Mirrors show only what's in front of them. They don't show the back, the sides, or anything outside the frame. This selective reflection means the mirror gives a partial view, not a complete view.
Interface previews are similarly selective. The desktop preview doesn't show mobile behavior. The light-mode preview doesn't show dark-mode rendering. The static mockup doesn't show animations or interactions. The preview shows what it shows and nothing else.
Selective reflection should be made explicit. Label previews to indicate what they show and what they omit: "Desktop view," "Static layout only," "Simplified rendering." Without labeling, users may assume the preview is comprehensive when it's actually partial. The designer should communicate the preview's frame—what's included and what's excluded.
Looking in a mirror before leaving the house serves validation—checking that appearance is acceptable. The mirror provides external perspective on something you cannot see directly (your own appearance).
Design previews serve similar validation. The print preview shows whether the layout will work on paper. The accessibility preview shows whether contrast ratios meet standards. The responsive preview shows whether the design works across screen sizes. These previews validate that the design meets requirements before committing to production.
Validation previews should highlight compliance and violations. Green for passing criteria, red for failing criteria. The preview that shows the design without indicating problems is decoration, not validation. The value lies in confirming correctness or revealing errors, not just displaying the reflection.
Two mirrors facing each other create infinite regress—each mirror reflects the other's reflection recursively. The effect is dizzying and informationally useless—every additional reflection adds nothing new.
Design systems can create similar regress. A design tool that previews the preview of the preview creates layers of representation without additional information. Mockups of mockups, documentation of documentation, meta-design about design—each layer of reflection should add value, not just mirror the previous layer.
The designer must recognize when additional reflection layers add value versus when they create regress. A preview of final output adds value. A preview of a preview of final output rarely does. Each layer should serve distinct purpose—different viewing context, different validation criteria, different stakeholder needs. Regress without purpose is waste.
Mirrors can be broken—shattered into fragments that each reflect a portion of reality. The fragments still reflect, but the unified image is destroyed. Reassembling a broken mirror is nearly impossible; the breaks persist even if pieces are fitted back together.
Design previews can break similarly—when the preview mechanism fails to keep pace with design changes, when rendering updates break preview functionality, when preview features are deprecated without replacement. The broken preview shows fragments of the design but not the complete reflection.
Maintaining preview systems requires continuous effort. As the design system evolves, previews must evolve in parallel. A preview that accurately reflected v1.0 but breaks on v2.0 is a broken mirror. The fragments may show partial truth, but the whole is untrustworthy. The designer must maintain preview fidelity or acknowledge when the mirror is broken and remove it rather than leaving users with unreliable reflection.