Learn about the location of the design patterns found in Proto.io and what they do.
- [Instructor] Now that you have a handle…on where everything is in the proto.io editor,…let's narrow our focus to the very thing…that we all created, a screen.…When it comes to UI design, you don't just…simply slap stuff onto the screen and move on.…As I tell my students, when it comes to UI screens,…everything has its place, and every place has its thing.…This may sound rather simplistic,…but that is a theme that runs through UI design.…Thus a good UI, even with a prototype…needs a strong base, and that is the function of a grid.…
It shows you the places where you can put things.…At the moment, our canvas is…nothing more than a blank screen.…It's just gray.…Let's give it some structure…and to do that, we're going to have to add a grid.…The grid in proto is found down here…just beside the preferences, and it says,…"Customize the editor," so you just click on that.…And a little pop-up menu appears,…and we're going to select grid settings.…The grids and guides menu is pretty interesting.…At the top, you can turn the grid on and off,…
- 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.