Learning how to prototype is crucial for any UI/UX designer as it helps to test, share and showcase designs. That's why prototyping is a part of a lot of widely used design methodologies like Design Thinking, Design Sprint, Lean UX and Rapid Prototyping. Protopie lets you take your existing designs and use them to quickly create everything from simple prototypes to advanced interactions. It is a simple tool to learn but packs a lot of advanced features – this means that after watching this class you will be able to create prototypes that look and feel just like real apps without having to write any code.
Protopie goes far beyond just linking different screens, it makes it possible to add motion to your prototypes. Motion is what makes an app great. It has a lot of potential to improve the user experience beyond just making products look better. However, not a lot of people know how to use it properly. If you learn to do that, motion can become your design superpower and set you apart from other designers!
In this class you are going to learn how to create advanced prototypes and add motion to your UI design in a natural and effective way using Protopie. This class is made for anyone who wants to take their UI/UX design skills to the next level. If you know how to design an interface, this class will give you the principles and tools you need to create realistic prototypes right away.
After you create your prototype, you can record the interactions to post them online, share it with your teammates and clients, and, last but not least, you can test the prototypes on an actual phone. As a bonus, I’m also going to teach you how to take the interactions you created and package them up nicely so you can post them on social media to show off your new skill. Let's get started!
Overview
Syllabus
- Announcement
- Intro
- About Prototyping
- Motion in UI Design
- Basics of Motion
- Intro to ProtoPie
- Exploring The Protopie UI
- Scrolling
- Paging
- Hamburger menu
- Scene Transitions
- Simple Sequence
- Sharing Your Pies
- Bonus assignment
- Bonus: Using a Mockup
- Final thoughts
Taught by
Ljubomir Bardžić