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.
  1. 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!

  2. 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...

  3. 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...

  4. 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...

  5. 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...

  6. 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...

  7. 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...

  8. Prototyping Layouts With Velositey for Photoshop

    Prototyping Layouts With Velositey for Photoshop

    Tutorial Beginner

    In this tutorial we are going to walk through a free Photoshop extension called Velositey. Velositey (currently at version 2) provides common layout patterns...

  9. Rapid Prototyping Using Sketch Symbols and Templates

    Rapid Prototyping Using Sketch Symbols and Templates

    Tutorial Beginner

    Starting from scratch every time you mock up a design is a waste of time, especially when building on top of an existing product. On Envato Market we already...

  10. How to Create an Interactive Prototype With Marvel

    How to Create an Interactive Prototype With Marvel

    Tutorial Beginner

    Marvel is an excellent online tool which allow designers to create prototypes of mobile applications and web projects. In this tutorial we'll see how we can...

  11. Prototyping an Interactive iOS Product Tour With Framer.js

    Prototyping an Interactive iOS Product Tour With Framer.js

    Tutorial Intermediate

    Framer.js and its accompanying ecosystem Framer Studio are great tools for composing, presenting and iterating upon interaction design. In this post, you'll...

  12. Stop Putting User Personas in Your Desk Drawer

    Stop Putting User Personas in Your Desk Drawer

    Tutorial Beginner

    Personas are something we have lifted from the advertising industry. Unfortunately too often they don’t fit the web design process. Now is the time to change...