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

Congratulations! This concludes our introductory lesson on wireframes. Before we wrap things up, let’s go over some key topics we discussed in this lesson:

  • Information architecture is the organization, prioritization, and presentation of information within products, websites, and other software applications.
  • User workflows are the complete paths a user takes to complete an objective. The goal is to create simple, intuitive, and time-efficient flow paths within wireframes.
  • When wireframing, three requirements should be followed: user needs, stakeholder goals, and technical capabilities.
  • A wireframe is a low-fidelity design that represents the layout of a digital interface without the use of design elements. Wireframes serve as a visual representation of how a digital product will be configured and how it meets requirements.
  • Sketching is an exercise to quickly iterate through concepts before transitioning to a refined wireframe created with a digital design tool.
  • When designing wireframe elements, it is best to keep element design simple, distinct, and consistent.
  • It is highly recommended to sketch your wireframe ideas prior to refining them in a digital tool. Sketching facilitates speed to a solution.
  • A prototype builds upon the structural layout of a wireframe through the integration of simple design elements and interactivity.
  • User testing is an excellent method to garner feedback to enhance usability during product development.
  • Digital tools provide the ability to transition from wireframes to functional prototypes.

Next in the line-up, we will be diving into our first wireframe project! We will apply our knowledge from this lesson to evaluate user research requirements, sketch concepts, and create wireframes with a digital design tool.

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?