Wireframing and prototyping is where a design begins to take shape. It is the Prototype phase of The Design Thinking Process.

At this point, the sketches (either by hand or using software) are basic. These are known as low-fidelity designs. They do not include color or graphics. As a new UX design student, I wasn’t sure how much I would like this step. I’m not an artist in the sense that I can draw. But you don’t need to be. And I discovered how much I enjoy wireframing and prototyping. It is a lot of fun, and it is when a UX designer starts getting a sense of what the design is going to be — which is exciting!

A wireframe is a two-dimensional illustration of a page interface produced using pencil (or pen) and paper or wireframing software. Wireframes are used to plan the information hierarchy of a page, specifically how space should be allocated, where content will go, and what functionalities will be available.

A prototype  is a sample version of a product that allows UX designers to portray a specific design. The goal in creating prototypes is to learn as much as possible about how users interact with the product or service being designed before developing the complete project. 

What is important to remember is that the prototype is not meant to be perfect. This is where the UX designer is learning from actual users during testing what is working and what is not working. For example, I discovered users tapped certain buttons not initially designed to be interactive in the initial prototype. That’s okay. I learned those buttons were actually important to users. In one case it affirmed a function which seemed important to include. In another case it was an oversight when I created the prototype. In both cases I learned important information for the UX design (and next prototype).

Following is an example of my initial wireframes and prototype for my vocabulary app project in my Intro to UX Design course.