Learn how to use the interactions panels to create interactive navigation between screens.
- [Teacher] The UI components contained in proto.io…are pretty extensive and they go across all…the operating systems which is great.…And you see how you can add them,…you've seen how to edit them,…you've seen how to add buttons to the components…that are built into the application.…And you've seen how to navigate to a webpage…by clicking on or tapping a button.…Now primary purpose of a component of course…is navigation and that's what we're going to look at in here.…We're going to add a component so that we can navigate…between the screens inside of a project.…
So to get yourself started, open up a new project,…select smartphone iPhone six, create,…and when we come to the editor, navigate…over to your exercise folder and bring in the Huron,…Splash, and Main images.…Just drag and drop them into the assets panel.…And we're ready to go.…Okay so we've got scream on here and we're going to create…three screens for three images.…So first thing you want to do is just add in that…first image, we'll add the Southampton image…
- Using design patterns
- Using grids and columns
- Using the Proto.io player
- Using the Proto.io smartphone app
- Working with screens
- Using components
- Creating artwork
- Creating and using containers
- Creating animation
- Publishing your prototype
Skill Level Intermediate
Building and Maintaining Your UX Design Portfoliowith Diane Cronenwett15m 54s Appropriate for all
Sketch: Creating Vector Graphicswith John-Paul Ballard1h 30m Intermediate
1. Getting Started with Proto.io
2. Working with Screens
3. Using Components
4. Creating Artwork from Proto.io
5. Creating and Using Containers in Proto.io
6. Creating Animation in Proto.io
7. Publishing Your Prototype
Next steps1m 22s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.