Wireframe

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.

Contributors

Interested in helping build Docs? Read the Contribution Guide or share your thoughts in this feedback form.

Learn UI and UX Design on Codecademy