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

As a reminder, we know that through effective user research, we can have a better understanding of:

  • User goals and tasks for the application
  • User pain points, behaviors, and desires
  • Current workflows used to complete these tasks

Before we create a wireframe, understanding the problem is critical to finding the appropriate solution.

Now let’s dive in!

The wireframing process can begin with sketching concepts using pen and paper. Sketching allows us to focus on creating a functional, intuitive, and efficient concept while limiting the use of decorative features (i.e., color palettes, images, typography, etc.).

The location of page elements should provide a solution to our design requirements. It is recommended to prioritize valuable information in an “easy-to-reach” place based on content hierarchy. In the art shown in the workspace, we have provided some example wireframes of varying levels of fidelity that feature several distinct page elements.

In each of these examples, we used a navigation bar, or navbar for short. A navigation bar houses an interface’s most important navigational elements. Navbars are often located at the top of the page to offer easy access when a page loads. The navbar in these examples is home to the following elements:

  • Logo: Located in the top left corner, a viewer’s gaze naturally starts here and drifts down and to the right, similar to reading a book. Logos can also double as a homepage link when selected.
  • Button, login: Located left of the menu icon, this button navigates returning users to the login page.
  • Navigation menu: Located in the top right corner, navigation menus allow users to find information that isn’t prioritized on the homepage.

Below the navigation bar is often the following elements:

  • Image: A well-placed image at the top of the page, known as a hero image, can help set the tone for the information below.
  • Header: A header is used to inform what the purpose of the page is; encouraging new users to sign up.
  • Input, email: We ask new users to provide an email they want to be associated with the account.
  • Input, password: We ask users to provide a password that will be linked to the account.
  • Button, sign up: New users confirm the creation of their account by selecting the sign-up button.

It is important to annotate when wireframing. Annotations clearly define wireframe element functionality and describe how the wireframe meets requirements.

Focusing too much on details such as straight lines, spacing, and alignment may slow down the process. Let the creativity flow and experiment with many wireframe iterations. More precise and effective solutions to our requirements will emerge through iteration. Gathering and incorporating feedback between iterations is also an effective method for refining wireframe designs.

Next up, we learn how digital design tools assist in the wireframing process.

Instructions

Consider the following question then check your answers.

Why is low-fidelity sketching important before creating wireframes?

Check Answer Sketching is an exercise used to create quick concepts and iterate in a lower-fidelity format before transitioning to a polished wireframe deliverable created with a digital design tool.

BONUS: Practice creating wireframes by opening a website of your choice. Identify content elements on the page then sketch these elements according to the size and location they are presented on the website.

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?