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

For one moment, let’s imagine the most elegant website ever created. The website has a font that’s oh-so-perfect, has intuitive and accessible navigation, and has a world-class interface design. Pair that with dream-like animations, and we’ve got ourselves a visual ensemble that the likes have never seen. This website is a masterpiece!

After imagining such a well-constructed and well-designed user interface, we ask ourselves, “How was that website built?” There is a lot of behind-the-scenes brainstorming, planning, and drafting required to design a website like the one we imagined. As users, we see the finished product, but as designers, we get to create the product!

One of the first steps toward designing a digital interface is to create wireframes.

A wireframe is a low-fidelity representation of a digital interface. What determines whether a design is low or high-fidelity comes down to the amount of detail and the medium it was created in. For example, low-fidelity designs are commonly associated with pen and paper sketching. In contrast, we can create high-fidelity designs with digital tools to achieve a higher state of quality and detail. Wireframes are low-fidelity because there are no interactive features and they are created using low-fidelity elements. These low-fidelity elements serve as placeholders for high-fidelity design elements which include, but are not limited to: logos, navigation, search fields, text, buttons, images, and videos. Decorative interface elements such as color palettes, images, and typography will be introduced later in the design process. For now, let’s focus on building an intuitive layout that meets our three main requirements:

  1. User needs
  2. Stakeholder goals
  3. Technical capabilities

It is important to note that wireframes are distinct from sketches. Sketching is used to create quick concepts and to iterate ideas using pen and paper. Wireframes are made with digital tools and are low-fidelity representations of digital interfaces.

Wireframing occurs in the early design stage and is a cross-functional, iterative process, usually involving many stakeholders across an organization. The process starts from a problem or pain point to ensure that product development meets a real user need and that the whole team is aligned around the same goals. Wireframing is the bridge between user research and proof of concept. With the help of user research, we can create purposeful wireframe concepts that can transition into functional prototypes. To get a refresher on the design process, please refer to the Key Methodologies of UI and UX Design Lesson.

Now that we know what a wireframe is, let’s dive into why wireframing is important in the scope of product development.

Instructions

Consider the following question then check your answer.

What does a wireframe represent?

Check Answer A wireframe represents the structural layout and arrangement of content in a digital interface.

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?