Wireframe

Published Jun 8, 2022Updated Oct 30, 2023
Contribute to Docs

A wireframe is a low-fidelity representation of a digital interface that defines the content layout and page elements.

Wireframes are meant to show an idea, or proof of concept, without investing too much time and resources. Wireframes can be sketched or created in design software (such as Figma and AdobeXD). When creating wireframes, it is important not to dwell on cosmetic elements like font, colors, imagery, and even accurate spacing.

Example of a wireframe concept and the live implementation of the Codecademy's sign up page.

Wireframes are like rough drafts that help determine a solution for the structure (information architecture and interaction design) and skeleton (interface design, navigation design, information design) layers of the Five Elements of UX Design.

All contributors

Looking to contribute?

Learn UI and UX Design on Codecademy