Learn Prototyping

Bring your designs to life with interactive prototypes that allow you to test and refine your design ideas. These tutorials teach you everything you need to know.

All Prototyping tutorials:

  1. New Course: Prototyping an App With Adobe XD

    New Course: Prototyping an App With Adobe XD

    Tutorial Beginner

    Adobe XD is an all-in-one cross-platform tool for designing and prototyping websites and mobile apps, allowing you to get from your idea to working prototype...

  2. 13+ Prototyping Tools for Web Designers

    13+ Prototyping Tools for Web Designers

    Tutorial Beginner

    Let’s take a look at some prototyping tools available for web designers today: Framer, Adobe XD, Adobe After Effects, Adobe Animate CC, Craft Prototype,...

  3. A Web Designer’s Introduction to Adobe Animate CC

    A Web Designer’s Introduction to Adobe Animate CC

    Tutorial Intermediate

    What’s better than being static? Being in motion, my good friends. Motion is on the rise for the web, from simple interface interactions, to more complex...

  4. New Course: This Is Adobe XD

    New Course: This Is Adobe XD

    Tutorial Beginner

    In our new course, This Is Adobe XD, Envato Tuts+ instructor Daniel White will cover all of the essential tools you’ll need to start designing and...

  5. Create a Lo-fi UI Prototype in 60 Seconds

    Create a Lo-fi UI Prototype in 60 Seconds

    Tutorial Beginner

    Let’s create a Lo Fi Prototype, in sixty seconds, using the MadKit Sketch UI kit from Themeforest!

  6. Adobe XD in 60 Seconds

    Adobe XD in 60 Seconds

    Tutorial Beginner

    Adobe XD allows you to design and prototype for apps; anything from wireframes, to multiscreen experiences. Let’s see what it offers, in sixty seconds!

  7. Tools to Bridge the Gap Between Designers and Developers

    Tools to Bridge the Gap Between Designers and Developers

    Tutorial Beginner

    In this article I’ll quickly roundup some tools which will help you communicate your designs to the developers tasked with bringing them to life. I’ll be...

  8. How to Create a UI Prototype Using Adobe XD

    How to Create a UI Prototype Using Adobe XD

    Tutorial Beginner

    Historically, Adobe Creative Cloud hasn’t had a tool for designers to quickly and efficiently prototype layouts, or get team feedback before creating the...

  9. Working With Data, Assets, and Templates in Middleman

    Working With Data, Assets, and Templates in Middleman

    Tutorial Beginner

    This second tutorial about building static websites with Middleman dives a little deeper into the framework. By the end, you should know enough to build your...

  10. How to Set Up a Static Website With Middleman

    How to Set Up a Static Website With Middleman

    Tutorial Beginner

    This is part one of a small series about Middleman, “a static site generator using all the shortcuts and tools in modern web development”. The first two...

  11. Quick Tip: How to Run a Guerrilla Testing Session

    Quick Tip: How to Run a Guerrilla Testing Session

    Tutorial Beginner

    Guerrilla testing is an informal type of user testing, often run during the initial stages of a project to help inform the designs going forward. These tests...

  12. Prototyping a Fitness Application with Pixate

    Prototyping a Fitness Application with Pixate

    Tutorial Intermediate

    In this tutorial, I’ll teach you how to create an animated prototype of your mobile application design. The prototype will look and feel like a real...