One.
All right guys welcome back.
Well we're going to do now is export all these screens out and put them in the invasion.
But first there's something that I forgot to add.
So let's go let's go at it right now in our article view.
I forgot to add a backbone.
So once we get into this view how do we get back out of it.
How do we go back home.
We're going to need a back button somehow.
So go ahead and positive video.
Go to nown project or maybe there's a back button that you use often in your designs.
Go ahead and grab that and throw that in there.
And also don't forget to create a place from the home screen where you can access your favorites right.
And that should be the screen that you just created.
I'll show you mine right now.
And kind of walk through the the the thinking behind it.
So like we said before we want to cater to our target audience is someone who is either a saving them
because they want to read them later or want to reference them later after their read.
So what I decided to do was first have a search bar I thought that would be really cool.
And the reason why is there's a lot of articles that I know I've archived or saved or bookmark and I
wanted to go back and read about it or pull a snippet or a quote maybe a statistic but I didn't remember
where I found it so I thought a search bar would have been super useful.
The second thing that I want to do is replace the comments with unread or read and the the thinking
behind this was
it.
Well first of all if you haven't read it already you can easily see which ones you haven't read and
dive back into them.
Also these are be organized by the date in which they were put into the favorites folder.
And the reason why I decided to swap out the comments for this is if you go back to our home screen
the comments when you really think about it are enticing you to click into that article right.
So on the surface if I saw that Company X sells for 1 million let's just say they had I don't know 20
30 60 comments right.
This collectively.
So the date the title and the fact that it has 60 comments already sold me on either jumping in reading
the article or wanting to save it for later.
Right so in Favorites we could have you know keep the 60 comment line there just to get us excited again
but we've already passed that motion we've already passed the use case for showing that there are 60
comments.
So instead what I think is good or is a better experience and more clever is putting on red or red so
I can quickly scan through by the title because that's still going to be the eye catcher for the favorites
folder.
But then go ahead and see OK.
I haven't read this one yet.
Let me go ahead and dive right into there.
So and then obviously once I've done reading it it will change from unread to read so that is my favorites
folder.
I'm excited to know what you guys did for this portion.
But remember to put a back button for our favorites back or dismiss button however you want to do it
and then back over in the home screen.
We are going to need to
design or at least have a button that denotes the favorite.
So for now what I'm going to do is I am just going to take this icon and recopy it and I'm going to
go over my navigation bar will favorites icon go ahead and put this in the
out because it's below it.
Most.
So now we can grab our icon.
Let's scale this down a little bit.
So it fits nicely
and I want to make sure that it aligns vertically with our Or actually we can just align vertically
to the bar itself.
So
that's great if you'll notice.
Now we have all of our buttons hooked up.
Well we're going to do now is go ahead and copy that over and put that in our other our board.
And once you paste it it should land right where it was in the screen.
And lastly what we're going to do is grab the navigation bar hold down shift and grab the table view
as well so everything that's in the home screen.
Let's go ahead and command C to copy and go over to where we created our micro interaction papa are
saved favorites and let's just go ahead and save it or I'm sorry paste our home screen and it should
be right behind it.
So right now it is on top on top of it as you can see.
Go ahead and drag it right underneath save favorites and that's going to put put it behind it.
You'll also notice we need to change the background color to black.
All right.
That is looking great.
And just to give a little bit of depth I am going to add a shadow.
These devout priests are fine.
One thing that's really great about sketch is their defaults for shadows and grades and things like
that work really nicely out of the box so that that definitely helps.
Great.
So here are our screens now while we're going to do is.
So we have three screens in our home.
We have one article screen and our one favorite screen so let's go ahead let's start with home first.
And with our art board selected so select the homescreen we're going to go down here on the bottom right.
And this is how we export all of our assets and sketch what will will all dive into export more in a
little bit but for now our going to do is click make exportable and you'll see you'll have an option
you can do 1 x 2 x 5 x 3 x and so forth.
We are going to just click to X for now.
Right.
So let's go ahead and go to our home screen swipe just your favorites.
We're going to make that exportable as well.
Make that 2x and our home screen saver favorites.
Interaction do the same thing at X and now we can go ahead and grab all all three of these so hold down
Shift.
I'm going to select all three of my I-Reports and they'll show up right here what you're planning on
exporting.
And I wanted to go ahead and click export our boards and save it to a for there could be on the desktop
or you know where we keep your projects.
It's going to save it by the name of your art board so we don't have to worry about naming anything.
Let's go and click export
right now.
Let's also do that for our article
so we'll click make exportable.
Go ahead and click to X. Now you'll notice there's a little checkerboard behind the preview and what
that's telling us is there is this is a P and G.
There is a transparent layer.
And the reason why it's not showing up is because we did not click this check background color.
So right now we have the background color of the art it is white but it's actually transparent.
And you can toggle that by including the background color in the export or not including it.
So for this one we're going to include it because we want the white the white background.
Let's go ahead and export article.
And lastly go ahead into the Favorites folder that you made select the cardboard we're going to make
it exportable and let's go ahead to X and export our favorites.
All right so that is looking great.
All right.
So now let's go ahead and head over to invision dot com.
I'm sorry it's going to be Invision dot com and if you have an account with Invision go ahead and log
in.
If not I highly recommend you sign up or signing up is free actually but what you can do is they have
paid versions which I think are superpowerful it's up to I believe three mockups are prototypes.
I am I have the first tier payment plan and I haven't really looked back.
And also great is they are making plugins for sketch now.
So a lot of high functionality going on with Invision and sketch but.
OK so once you're in what we're going to do is click this plus and that's going to add or create a new
prototype so we'll call this top 10.
And for the type Let's just go ahead and click iPhone and then click Create prototype.
So it's great.
You can just actually drag and drop straight into invision.
So go to wherever you export our boards and grab all of them you should F5 and just go ahead and drop
it right into invision.
And you notice they're all just kind of pop up which is really cool.
This set of loading screen is great.
Basically what this means is every time Invision is loading your prototype you can have kind of a simulated
launch screen.
It's really cool but we'll go ahead and leave that blank for now.
So here's our home screen.
I'm just going to move this over to the top and go ahead and click view screen
so this is the main interface for sketch and it's broken up into four main areas so the first one as
you can see we are in preview mode and that allows us to click around.
We don't have any buttons hooked up right now but this is the interface that allows us to play with
our product as if it was an actual app.
This build mode is where you are going to start plugging in and wiring up all your art boards and wireframe
is basically the way this works is you click and drag and you create a button so to speak and you can
link it to any other screen and stylize it any time any any way you want.
And this is kind of where I live the most as I toggle between preview mode and build mode back and forth
to start hooking up my outboards.
The third one over here is common mode it basically allows you to make comments on certain things.
If I was working with another designer or a developer or client who also has access to this envision
they would be able to see my comments they can make comments and we can kind of have a discussion based
upon them and then lastly there's history mode you can view past versions of your design to be honest
I haven't use this too much but it is very very powerful.
The ability to go back and look at your previous work just to close the circle is as great functionality.
So let's go ahead and let's create our first hotspots what they call it and we're going to do is hook
up this cell to our article view.
So go ahead and click and drag over this entire cell and let go.
And you'll notice we have linked to and then select a destination you'll have here you know basically
all the options are assigned from another screen.
So you could link back close the last screen visit visited screen as an overlay which is really cool.
So one option we could have done with our micro interaction is have it be an overlay which we'll get
to in a little bit previous screen.
The next screen or another your l.
But for now we're just going to go ahead and find our article and what's really really cool is if you
hover over the names you can kind of see a preview of what they are which helps out a lot.
So go ahead and click article and you'll notice there is a gesture and the transition.
So if we click the gesture to tap double tap.
These are all gestures that you could use to simulate in your prototype.
For now I would just keep it to tap and the transition if you remember we used a back button that goes
left so we were going to want to I guess in this case would be push left which would be really going
to the right.
And if you hover over them you can actually see kind of like a preview preview of them which is really
cool.
So let's go ahead and click push left and hit save.
So now if we go back to preview mode we can go ahead and click.
Apple releases new Mac.
But this first cell and boom now are in our article view.
How cool is that.
All right.
So let's go ahead and start hooking everything else up.
Let's go back into build mode and we're going to drag over this back button and let's link that to our
home screen.
Tap is fine and transition if you guessed it we're going to go ahead and push back push right here push
right to slide right.
So now if we go back to preview mode we can just head back and now we've kind of close the loop here
on on everything that you can do.
What I also like to do is if I have a table view like this which is all whatever is clicked in here
is going to end up looking like that article view is if I was to send a client I would actually drag
this down through the entire screen.
So that way anything that they clicked they will be able to see the article view because that's what's
going to show up anyways.
The thing that's different is the the titles and the actual content which you could change if you want
but this is fine for now.
All right.
So let's also hook up our
favorites screen.
So go ahead selected destination.
We're going to do our favorites tap is fine and we'll also push left
go back to preview mode go ahead and click that and look here is our our favorite screen so go back
in build mode and we're just going to go link this back up to our home screen.
Can push right and say and then preview mode to test that out and go back.
So we've got two screens working now.
Things are looking really really good.
This is nice.
What's also cool about Invision is if you had created a market that extends down to let's just say we
wanted to actually have 10 cells for 10 different articles.
We could have made it longer.
And then invision it would actually scroll down as if it was an actual actual app which is really nice
but we don't have to worry about that for now.
And lastly what we're going to want to do is create the micro interaction finally right.
So let's go ahead and I'm going to bring this back up because we want a cell that we can swipe on.
All right.
So I am going to choose this one.
It's going to drag over it.
And let's go ahead and select a destination.
It's going to be the swipe gesture favorites and it's going to be swipe left right because if you remember
the icons on the right side which means that you were swiping the cell to the left and for this well
let's go ahead and choose dissolve and dissolve is basically going to blend the two together in a smooth
transition.
All right.
So go ahead and start to the left.
And if you notice that it actually dissolve.
Now we're actually stuck on this page because we haven't created any hotspots for it.
But what I want to do is this is going to act as a transition to the saved screen.
So let's go back to build mode and up here at the top you'll see this this little stopwatch icon go
ahead and click that.
And what this is going to do is it's an automatic redirect.
So instead of clicking something in however much time is specified it's going to jump to the next destination
or the specified destination.
So we're going to go to our home screen save to favorites that little pop up on it.
And let's go ahead and make the transition dissolve
and so we'll go ahead and save
and let's got a preview mode and watch it happen.
Isn't that cool so.
Eight hundred milliseconds went by and it transitioned to the screen.
We're going to do one more and we're going to go back in the build mode on on our saved favorites micro
interaction screen and we're going to do the same thing but we're just going to go back to our home
where is it our home screen and let's make this a little longer because we want the user to be able
to read that it was saved to their favorites.
I'm going to try 3300 milliseconds.
I think that should be good.
And let's do dissolve as the transition so hit save.
Quick preview mode.
And now we're back at our home screen.
So let's go through the entire entire interaction together.
So go ahead and I'm going to click and drag to the left and that's going to save it to my favorites
and I didn't touch anything after that.
Right.
So what we did was we linked it up to one screen which did an automatic redirect to another screen which
brought us back and did another automatic redirect to our home screen and then go ahead and click here
we can go back we can go to our favorites we can go back.
So I began to see this one will see this one more time.
That is so cool.
All right so last night as you can see you know this is a super powerful tool we basically designed
in app in an hour and basically are prototyping it already.
And what we could do is go ahead to appear at the top right.
You can actually enter a telephone number and send this entire mockup to you a client a developer a
team mate whichever you see fit and they'll be able to download this mock up and play with it on their
phones so highly encourage you to mess around with this.
Like I said there's a lot more functionality.
You know we're just kind of getting our feet wet but it's already proven to be super powerful.
So yeah go ahead we'll see in the next video.
When.