Prototype

Anonymous contributor's avatar
Anonymous contributor
Published Oct 28, 2023
Contribute to Docs

A prototype is an interactive design that maps out interactions and workflows in a digital product. Design software like Figma and Sketch allows designers to transform static designs into clickable prototypes.

When designing a product, wireframes are typically created before a prototype is made. A prototype builds upon the structural layout of wireframes by integrating higher-fidelity design elements and interactivity.

In the prototyping process, key interactions and user workflows are planned out to visualize how users may navigate through the product. Designers can evaluate and iterate on these interactions and flows through user research methods like usability testing, where participants interact with the prototype.

In addition to leveraging user research, effective prototypes incorporate best practices from interaction design, such as usability heuristics.

A screenshot of a mobile app prototype built in the digital design tool, Figma. The prototype shows navigation paths to the login and registration pages from the homepage.

  • Front-end engineers work closely with designers to make websites beautiful, functional, and fast.
    • Includes 34 Courses
    • With Professional Certification
    • Beginner Friendly.
      115 hours
  • Get started with User Interface (UI) and User Experience (UX) Design and learn how to wireframe and prototype using Figma.
    • Beginner Friendly.
      2 hours

All contributors

Contribute to Docs

Learn UI and UX Design on Codecademy

  • Front-end engineers work closely with designers to make websites beautiful, functional, and fast.
    • Includes 34 Courses
    • With Professional Certification
    • Beginner Friendly.
      115 hours
  • Get started with User Interface (UI) and User Experience (UX) Design and learn how to wireframe and prototype using Figma.
    • Beginner Friendly.
      2 hours