Wireframe
A simplified representation of a screen or page that communicates structure, hierarchy, content placement, and intended interaction without production-level visual detail.
Wireframes make assumptions visible early, align stakeholders on scope and flow, and enable inexpensive iteration before visual design and implementation increase the cost of change.
A team maps a multi-step quote journey with annotated desktop and mobile wireframes, tests the flow using a simple clickable prototype, and revises field order before engineering begins.
Wireframes can be mistaken for final design, conceal content and accessibility problems, and imply interactions they do not demonstrate. They are not substitutes for prototypes, specifications, or testing with users.
Wireframes range from hand sketches to annotated digital layouts. They model information architecture, navigation, controls, states, responsive behaviour, and content priorities at low or medium fidelity, allowing teams to explore alternatives before committing to detailed design or code.
Systems Architecture
Nielsen Norman Group — UX Prototypes: Low Fidelity vs. High Fidelity — https://www.nngroup.com/articles/ux-prototype-hi-lo-fidelity/; Nielsen Norman Group — UX Basics Study Guide — https://www.nngroup.com/articles/ux-basics-study-guide/
