- Overview
- Transcript
1.1 Course Overview
Welcome to UX Prototyping for Mobile Devices with InVision. In this lesson we'll look at what you'll learn in this course, and the new skills and creations you'll have by the end of it.
1.Introduction4 lessons, 14:32
1.1Course Overview02:02
1.2Project Brief04:03
1.3User Features02:58
1.4Mock-Up Options05:29
2.Creating a Mock-Up in Adobe Photoshop5 lessons, 39:54
2.1Create the Basic Elements07:27
2.2Create the Main Content Container11:12
2.3Create the Sign-Up Form07:38
2.4Create the Filled-In Form04:22
2.5Create the Confirmation Page09:15
3.Building the Interactive Prototype With InVision5 lessons, 46:22
3.1InVision Overview11:13
3.2Create Project and Add Screens11:40
3.3Add Interactive Hotlinks and Animations11:04
3.4Screen Settings and Modes04:09
3.5Asset Generation08:16
4.Sharing and Gathering Design Feedback4 lessons, 26:57
4.1Share Project Options05:40
4.2Client and User Comment Reviews06:23
4.3Live Sharing in Adobe Photoshop09:37
4.4Replacing Screens and Version Control05:17
5.Conclusion1 lesson, 01:41
5.1Conclusion01:41
1.1 Course Overview
Hi everyone, I'm Nikki Hart, and welcome to UX Prototyping for Mobile Devices with InVision. This course is gonna guide you through everything you need to get started prototyping in Photoshop. And we are going to start with a design completely from scratch, working in Photoshop to develop a user form that we're going to then mock up the interaction with InVision. This is going to allow us to save a lot of time in our production because we can essentially create our prototype exactly as we'd like to see it live online. But we're gonna mock it up first as an image and then go right into InVision and create the interaction that we would think that our users would go through. And then we can share that with clients and our team for immediate feedback. This is an awesome time-saver and a great way to test out some user interactions that you may be thinking of for your user interfaces before committing to the code. And before getting too far along in your production to where it's going to be extremely time consuming and a problem to go back in time if you need to. We're gonna go through all of the features of InVision to get you started prototyping and adding all of those interactions to your prototype. Now we are going to be using the latest version of Photoshop CC 2014 for this, but you are free to use whatever version of Photoshop you have available. There is one feature that we are using in InVision, that is their LiveShare Photoshop plugin. That allows you to essentially stream your Photoshop workspace online with your team and clients immediately and get instant feedback. That does require the latest version of Photoshop CC 2014 and a Mac to do it right now. So that is the only feature that we're discussing that's gonna require a very specific version of Photoshop and setup for you. Everything else though is going to work regardless of what you have and is flexible. So let's go ahead and get started with our first lesson. [MUSIC]