Hello.
In this lecture we'll create our first interactive prototype.
First I want to assure you that the process is easy and straightforward.
And I'm saying that even though I want to show you a project that I've been working on for the past
couple of months I'm in prototype mode and I'll hit control a I know this seems daunting but it's really
a step by step approach.
Honestly it's all a matter of attention and focusing on logical connections.
Let's try it out on this project called personal finance that you can download from this Web site freebies
fluxes.
This was created by a designer called Andre and when you download it you'll be asked for a price.
You can type in zero dollars and you'll be able to download it for free.
You can also use any other random project.
Here it is.
And we have to switch to prototype mode.
You can't do that with a click.
But please do your best to remember the hotkey controlled tab.
We're going to use it a lot hit control a and see if there are any connections.
This is critical because working on another designer's project is usually much more difficult.
Here we have a blank slate.
Now let's take it from the top the first screen is this splash page it only shows the app's logo.
We can select it.
Grab this arrow and that's going to show us a wire.
We're going to use it to make a connection with an appropriate dartboard.
That would be this one right next to it.
So release your mouse click on top of it.
That's going to reveal a list but let's not focus on that for the moment.
Congratulations you've just made your first interactive prototype.
It play and test it.
Here's the preview when we hover our mouse cursor over the top area.
Nothing happens when we move over this logo.
The hand icon shows up meaning we can tap it click.
And there you go the other screen.
This is the entire concept.
Nothing more to it.
Just subtle nuances for example does it really make sense to force the user to tap this specific area.
Why can't he just tap anywhere to move forward.
That would be friendly.
Right.
Let's make it happen.
Grab that arrow detach it and let go.
We've just broken that connection.
By the way when you want to test the prototype you don't need to save your progress.
It just works.
So let's allow the user to tap anywhere on the screen in order to move forward to do that.
Select the art board and that will reveal its own arrow.
The difference between the two cases is crystal clear.
Here's the individual letter and here's the entire art board.
OK make the connection and test it out yeah.
We're good for this second screen we need to connect the button alone.
While we could make the entire screen clickable that wouldn't make the app seem real to create an accurate
simulation.
It's best to target specific parts of the design like buttons arrows text letters and so on.
The user is going to notice the difference because his mouse cursor is going to change to the hand icon
which means there's an action available.
Okay.
Drag this arrow and let's take a look at this list.
These are things that can enrich your prototype but you shouldn't consider the mandatory still after
you use them I'm sure you'll be hungry to find out more.
For example we can change the type of animation the default one is dissolve but we have an entire list
of behaviors.
Let's choose Slide left and test it out.
Hit play
did you notice the change.
Let me show it again this time from the top.
This first one is dissolve and this other one is slide left.
If you're completely new to this I'd say this isn't the best use of your time so I recommend you stick
to the default settings.
Moving on when you want to test your prototype after you've made some progress.
There are two ways of working.
A you start the prototype from the initial screen by selecting your art board b you select one specific
whiteboard that you're interested in and then you hit play this makes sense.
If you want to see this pin screen in action and there are 40 other screens between it and the initial
screen it doesn't make sense to plow through those intermediate ones.
So you select it and then you press play.
But what if you want to see the entire app's flow from the start.
You have to d select like so and then use the play icon in case you're not sure if an art board is selected.
Check the layers panel as a reminder if you see multiple art boards then you don't have one selected.
If you see layers then it's pretty obvious you're focused on it but a question may come up.
How does X do you know what the initial screen is.
It doesn't.
You set it while in prototype mode.
You can select any art board and in the top left side you'll see a small house icon that stands on a
grey rectangle hit it and it'll turn blue.
Now that's the initial screen to test it out deselect and hit play.
And there you go.
I'll move it backwards so we can keep things in order.
Now it's your turn.
If you find it difficult to download this project.
Use an empty one the principal is the most important thing.
We'll continue with our prototyping fund in the next lecture.