Learn how to use the slide in menu design pattern in Proto.io
- [Instructor] This one's a little bit tricky,…and it's tricky because of the fact that…this object here, the menu itself…is an odd size.…It's 300 by 736 pixels.…So what we've got to do is sort of…make sure that the menu slide-in matches that.…Now here's how you do that.…Click the Patterns, pick the Slide-in menu,…don't worry about the number of links,…and you're going to add it to the project.…Now, the whole key to this thing…is right here in the containers.…
So the first thing I want to do is add the navigation menu.…We don't need this list here,…but what we do need to do is change this screen,…or the container properties.…We've got to make them 736 pixels wide,…or 736 pixels high,…and 300 pixels wide.…Click save, and then double click the menu…and in it goes.…Now, this is where it gets really interesting.…So that's the menu itself.…Now the slide-in.…
Now the slide-in has two states,…and you'll notice that there's…a Navigation Menu area and a Menu background,…so let's fix those.…So this one, the Navigation Menu…has to be 300 pixels wide…
- 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.