Wireframe

Edit on GitHub

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.
Edit on GitHub

Learn UI and UX Design on Codecademy

Career path

Front-End Engineer

Front-end engineers work closely with designers to make websites beautiful, functional, and fast.
Includes 34 Courses
With Professional Certification
Beginner Friendly
131 Lessons
Free course

Introduction to UI and UX Design

Get started with User Interface (UI) and User Experience (UX) Design and learn how to wireframe and prototype using Figma.
Beginner Friendly
3 Lessons
Edit on GitHub

Contributors