Sometimes the art of motion is actually the art of magic. Learn how to create a simple UI switch using the drawing tools and the prototype panel.
- [Instructor] A common UI element…is a switch that turns things on and off.…You know, you can turn on Bluetooth,…turn on WiFi, turn off WiFi,…whatever you want to turn on and off.…But we've got an application, here,…that really doesn't have any motion…capability yet,…and so how do we simulate a switch being flipped?…Well, we're going to use, basically,…an optical illusion.…So, to get yourself started,…open up the Switch file that's located…in your chapter four download,…and when it opens, you'll see…we've got a little area, here,…that is going to hold the switch,…we've got a little bit of a background image,…so let's get to work.…
So, I'm going to zoom in, here,…going to put the switch in this area, here,…so I'm just going to zoom in, just like that,…and the first step is just draw your rectangle…for the whole switch,…so we'll just draw out a rectangle,…and it's got to be rounded off,…so we're going to just pull it in…until we get the rounded corners just like that.…Now, I want to make this thing 24 pixels high,…so I'm just going to change the height to 24,…
- Navigating the XD interface
- Using artboards and grids
- Adding content to layers
- Using the Repeat Grid feature
- Adding interactivity to a project
- Exporting content
- Sharing your work
Skill Level Beginner
UX Foundations: Accessibilitywith Derek Featherstone1h 20m Beginner
User Experience for Web Designerswith Chris Nodder1h 49m Beginner
1. Getting Started with Adobe Experience Design
2. Going from Concept to Interactive Prototype
3. Working with Images and Vectors
4. Build Stuff in Experience Design
5. Publishing and Developer Handoff
Next steps1m 13s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
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.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.