What is a prototype?

- A prototype can be defined broadly, so I want to define the term prototype for the scope of this course before we get started. A prototype is an early working model of a design used to gain feedback and rapidly experiment with ideas. In UX, prototypes are typically created through a mix of sketches, wireframes, or mockups depending on your project timeline, where you are in the design process, and how robust the prototype needs to be. Let's quickly go through the differences between a sketch, a wireframe, and a mockup. A sketch is a drawing, and often times sketches of the user interface are where designs start to take shape. Wireframes are representation of the layout, and mostly focused on the layout of the content and where everything will reside on the user interface. Often, wireframes are in grayscale or black and white, and they can be really useful when you are in an early stage of your design process, and focused on the basics of layout. A mockup is a fully rendered user interface with color details, typography, hierarchy, and general layout all defined. A mockup looks like the final product. Sketches, wireframes, and mockups are representation of the design, but do not represent the interaction design. You need to add interactivity to these static representations to understand how the design will function when someone takes an action on the user interface. I'm defining interactivity as any behavior that occurs on the user interface that changes the state of the design or the flow. Simple examples of this include selecting a drop down option that might change the view on the page, or clicking on an icon to open a contextual menu. How user interfaces interact are a key aspect of the design. Interactivity is not represented in a single static sketch, wireframe, or a mockup. As designers, we need to prototype to make sure that the design flows and user interface make sense to our users to validate our ideas and concepts early and to test our various dates of the design to deliver a cohesive experience. One of the key ideas behind prototyping is to validate your designs early and often and without a lot of overhead. There are a lot of different ways to approach a design problem, and prototyping ideas and concepts help you get through the bad ideas quickly, and also berng new ideas to the forefront. This brings me to my next point. Your prototype does not have to be made with code. You can prototype with anything from sketches to using fully rendered mockups, and we will look at some tools in this course that will help you accomplish this. I want to underscore that design prototypes are not made of real code. While some people might feel more comfortable using HTML interactive prototypes, it isn't a recommended approach. Th goal of prototyping is to get through multiple ideas quickly, and HTML based prototypes can be time consuming to update. So for the scope of this course, we won't be focused on code based prototypes, but we will look at other tools and techniques to create design prototypes.