-
Get up to speed with Proto.io, one of the leading prototyping platforms for UX and design teams. Learn how to import artwork, work with screens and components, add animation, and more.
Get up to speed with Proto.io, one of the leading prototyping platforms for UX and design teams, and start building and sharing interactive prototypes. This course shows how to make prototypes for a variety of devices, ranging from smartphones to tablets to desktops. Learn how to create screens and import artboards from Photoshop and Sketch. See how to add interactivity, photo, video, audio, and animation. Additionally, learn about sending your prototypes out for review, to provide testers and users with the opportunity to add comments to your projects.
Overview
Syllabus
-
Introduction
- Welcome
- How to use the course files
- A word from the author
- Proto.io dashboard overview
- Review of Proto.io interface
- Use design patterns
- Use grids and columns
- Import assets
- Using the Proto.io player
- Use Proto.io smartphone app
- Understand screens
- Screen orientation in Proto.io
- Add screen transitions
- Use the basic library
- Create a mid-fi click-through
- Fonts and color in Proto
- ✓ Challenge: Create a sign in screen
- ✓ Solution: Create a sign in screen
- Add components
- Edit components
- Add external links
- Adding navigation
- Use video
- Create an Android interface
- Create a material design card
- ✓ Challenge: Create a draggable map interface
- ✓ Solution: Create a draggable map interface
- Create assets in Photoshop
- Create assets in Sketch 3
- Work with vectors
- Container overview
- Nest containers
- Create a draggable Google map
- Create a carousel
- Use interactive design patterns
- States
- Create state transition
- Multiple state transitions
- Create rotation
- Create a draggable rotation
- Create a sliding menu
- Media control
- ✓ Challenge: Use a template to create a sliding menu
- ✓ Solution: Use a template to create a sliding menu
- Create a fluid design
- Adapt to different devices
- Use comments
- Next steps
