Log in from a computer to take this course

You'll need to log in from a computer to start Introduction to UI and UX Design. But you can practice or keep up your coding streak with the Codecademy Go app. Download the app to get started.

apple storegoogle store
Learn

A wireframe is constructed with simple, low-fidelity wireframe elements that can help communicate ideas during the wireframing process. Low-fidelity wireframe elements act as placeholders for high-fidelity content that will eventually occupy that space. For example, when wireframing, we can represent the placement of a logo by writing “logo” instead of populating that space with an actual logo. This is what makes wireframing an effective and efficient method toward establishing content layout rather than content design.

Wireframe elements can be represented in many different ways. Common representations include, but are not limited to:

  • Logos: A rectangle labeled as “logo.”
  • Navigation: A rectangle containing navigation links (i.e., “home,” “about us,” “services,” “contact,” etc.) or navigation placeholders (i.e., “nav 1,” “nav 2,” “nav 3,” etc.).
  • Search fields: A rectangle labeled “search,” sometimes featuring a magnifying glass.
  • Text: A rectangle labeled “text field.” Placeholder text (i.e., Lorem ipsum) or horizontal lines spanning the height and width of the approximated text container is another text representation.
  • Buttons: A rectangle or pill-shaped container labeled as “button.”
  • Images: A box labeled “image” with diagonal lines between opposing corners.
  • Videos: A box labeled “video” with diagonal lines between opposing corners and a circle centered in the box containing a video play arrow.

In addition to using simple, distinct, and consistent wireframe elements, labeling helps communicate what is represented within the interface. A properly annotated wireframe provides detailed information on how something works so that stakeholders can understand the concept being presented.

Now that we know the wireframe elements in our toolkit, lets’ discover how to make a wireframe of our very own!

Instructions

To become familiar with wireframe elements, you can practice sketching and labeling the elements in the workspace. These sketches can be used as a reference when you begin creating wireframes.

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?