Wireframe

A wireframe is a simplified visual guide used in the design of user interfaces and digital products. It focuses on layout, structure, and behavior, showing where content, controls, and navigation will appear without visual design elements such as color or typography. Wireframes help communicate information architecture and interaction flows among designers, developers, and stakeholders.

Wireframes vary in fidelity. Low-fidelity versions use basic shapes and placeholders; mid-fidelity adds more detail and labeled sections; high-fidelity resembles the final layout but usually omits full styling.

Common elements include page grids, headers, navigation, content blocks, forms, and image placeholders. Annotations may accompany wireframes to specify interactions or data requirements.

They are produced early in the design process, using sketching or digital tools. Wireframes support layout exploration, navigation testing, and early feedback before visual design or development begins.

Relation to other artifacts: wireframes are typically followed by mockups (visual styling) and prototypes (interactive behavior). They document information architecture and user flows.

Benefits include fast iteration, clearer communication, and reduced risk. Limitations include possible misinterpretation without styling and the need to supplement with higher-fidelity designs for stakeholder approval. Best practices include consistent grids, clear labeling, annotation of interactions, and consideration of responsive variants.