One
are right.
So let's go ahead and make this micro interaction.
What we're going to do is well first of us think about our target audience again and our use cases so
I think it would be really cool if Since we're giving the user 10 articles a day or a week they might
lose track of them or you might want to refer back to one that was interesting that they read so let's
have a way where the user can save an article.
And what I'm thinking we could do.
Well there's two options that we can do.
The first one is to have some sort of icon like maybe a star or a favorite's icon a little bookmark
icon in one of the corners.
That's what I'm thinking.
So the user can tap on it and automatically they could they can save it.
But what we could also do is have a swipe gesture where similar to a spot where you just swipe it and
it'll get saved to your favorites or bookmarks.
I can see a habit where the user would open the phone see an article that may maybe looks interesting
to them swipe it to save for later.
And then you know they don't have to worry about reading it at the end of that day or at the end of
that week because they have it in their archives so there's two things to think about here.
A two case scenarios the first one is the user sees an article that they're interested in and they want
to save it for later.
And that's the one we're going to use a swipe gesture on the second one is going to be once they've
read the article.
There has to be a way for them to save it.
And that's that's the second use case that's the one where you know they just want to reference that
for later and to refer back to it.
So let's start with the swipe gesture because that is the most exciting in my opinion.
And the way I envision this is you swipe it and you don't need to tap anything it'll just swipe and
register and then it'll just fighting back or flying back.
It will go back to its original position.
So what we're going to do is with the art board selected the homescreen are selected We're going to
hold down option and we're going to click and drag and it's going to make an entire copy.
As you can see it's home homescreen copy we'll just rename it something comprehensible like home screen
swipe gesture.
Save
right.
Actually you know what I'm going to make this a lot more fun.
Do favorites save reminds me of a little those little disks that you click on Save way back in the day.
All right.
So just your favorites and what's awesome is since we've already put these in groups as you can see
we just kind of pick one and move it over a little bit and it'll just slide off the board.
And we can easily just make a graphic right here.
Remember this over just a little bit.
So you got some room
cool.
So what I'm thinking is we'll just put a little icon here and some text and we're going to want to find
a favorite's icon that we can use throughout the entire app so that when every time the user sees it
they know exactly what it's there for.
So let's go ahead and
roam.
Let's go over to the Noun Project and the Noun Project is a great spot for finding icons.
So we're going to go ahead and type in
Favorites
so we could go with the star seems very generic
but it might serve us the best.
I'm not sure.
Yeah go ahead and go over to the Noun Project find an icon you like that represents favorites.
I might actually end up going with a star because I think it'll be the best.
Seems like a winner.
So you can download it as a PNB and you can just give the artist credit.
So what I like to do is every time I Dallam I come from the Noun Project you know you've got to give
you've got to give credit to the artist already down in a Pages or pages document or document and at
the end when I'm done with my app I will link it to my Web site and there will be a link from the app
to the Web site that says you know here's where all the icons are.
Here's the artist for the for these icons so make sure to credit your artist so you don't get you don't
get sued or anything.
All right.
So I just clicked in drag the icon on here and now as you can see it is ginormous.
Let's go ahead and scale this down.
I'm holding down shift to keep the dimensions proportionate.
And as you can see there's NCDC a little more.
There's some text right here from the PMG.
We're going to go ahead and double click our image and now we're an edit mode so you can either double
click it or you can just go here and click Edit and with selection selected we are going to click and
drag over this text and hit delete and then enter or return.
And what's really cool about scatch is it senses where pixels are.
And so once you delete the text it automatically knows that you know there's nothing left here but this
icon and so it you know kind of forms around that shape which is really really nice.
So what we're going to do now is we're going to put this in here.
And for now go ahead and make the fill light just so we can see it.
Want to be able to see it.
And let's rename this favorite's icon.
All right so now we have our favorites icon First of all.
I want to put this into the cell folder that it's that it's currently in.
Only because as you can see you know it's it's snapping to the center of the board because it's not
in the cell folder.
Once we put it in the cell folder it will recognize what context is and now is starting to pick up all
the grid lines from within that cell.
So let's go ahead and leave that there.
And we kind of want to make this a color we don't want to keep it black and white seems kind of boring.
So I'm going to go to a Web site called Paletta in Palatine.
Not entirely sure how to say it but basically this is a tool that's used to help create color schemes
and palettes that's really useful really powerful.
And I like to use it too.
I just as a starting point you know you don't have to go off of these colors verbatim but it gives you
a really good idea as to what you can use and it's super helpful.
So I'm going to grab this hex and I'm going to throw it in here.
So that was four zero be five for nine.
So here is our original hacks.
And as you can see up here there's a bunch of different options you can scroll through adjacent colors
try triad tetrad all these cool things so feel free you know throw some hexes in there mess around with
it see what works.
And I like this color.
This is a cool color.
Ali's first starting point.
So I'm going to go ahead and copy copy this hex over and drill down to my favorites icon Let's go ahead
and paste it in there.
It that looks pretty cool.
We are also probably going to want to fill in that star a black Blackstar looks kind of kind of morbid.
What we could do is insert a circle behind it too start come to life.
So let's go ahead and insert novel and hold down shift.
So it's a complete circle and with the favorites icon selected we can align it vertically and horizontally
just to get it nice and square it away or circle away and each and let's get rid of the border to make
it white.
And we can just go ahead and dump this right behind our favorites icon.
And let's go ahead and with those two cycles of Scroop it let's call it favorite's con Alex cool.
Alex great.
So yeah I mean like I said you know you can use it as a starting point if you like the color red out
the gate which I kind of do looks good can always brighten it up a little bit like even that gold yellow
looks really good.
I'm going to go with.
I'm actually going to go with that.
I like that a lot.
So you find a color you like that will exemplify the
exemplify the favorites icon as best as you'd like.
And I was going to move it over a little bit.
I'm going to eyeball it for now I'm to be in the center of this little box.
This is what's going to show up when they swipe to save it.
And then once they let go it's just going to go back.
And what we're going to do is once it's swiped and it goes back we're going to have a little modal pop
over that says you know you've successfully saved it or favorite it and that's going to be a micro interaction.
So let's go ahead and well first let's go ahead and do our favorites in our article.
So now that we know what it's going to look like I don't think we're going to have anything up here
at the top right.
So I kind of want to throw that icon up there.
Let's go ahead and copy our favorites icon with command see school retard article.
It's just pasted on here.
And let's scale this down so it fits a little better.
And if you'll notice it's actually snapping to to our margins that we've already created which is really
nice but I want to go ahead and put this in the navigation bar.
And then just to make sure I'm going to click the rectangle the navigation rectangle and I'm going to
center it vertically.
It's already it's already good to go.
All right.
So there is our favorites button so if you're scrolling through you'll like what you're reading you
want to reference it later.
Boom click the favorites button and it's in your Favorites folder.
All right.
So let's go ahead and make this a modal pop over.
And so once the user swipes and this little star displays maybe it lights up a little little message
Rap-Up up saying like hey it's successfully saved.
And we won't have that user have to tap anything.
It should probably just fade away in a couple of seconds.
So what's incertain our board phone 7 is fine.
And since this is just a template I am going to going to give it a background color so we can kind of
see what we're working with.
Just give it a gray or something that's fine.
Let's go ahead and insert a rounded rectangle.
And we'll just go ahead and make it around that size
I'm going to decrease the radius around eight.
And let's go ahead and remove the borders and I kind of want to make this black and white or gray I
want to make it dark of Matra theme.
That look really nice.
All right.
So like I said before you know this is going to pop up for a couple of seconds once these are swipes.
This would be a really cool opportunity for an animation as well.
If you guys want to take this and run with it if you're actually building the app but all we're going
to do is kind of have a little checkmark or we could even use this icon.
And then it's just going to say save it at the bottom so let's do that first.
Go ahead and insert text and change changes to whites.
We can see as we're typing.
Well let's go ahead and type saved to favorites
and I want to make this a regular I'm a center it and I'm also going to decrease the opacity just a
bit because I don't think it needs to be super out there.
Well I think 85 is fine.
And let's bring the size down to maybe 17 17 is good.
So go ahead and select it and click shift on the rectangle area to align it horizontally
and let's go ahead and find a checkmark.
Let's go back to the noun project and you can type in checkmark.
A lot of times with Noun Project you can even think of synonyms like confirm or complete that or help
you you know get some some other cool results.
And but I like this guy.
This guy's pretty cool.
Let's go ahead and download it and we'll drag it over.
Let's bring this an.
All right.
Now you'll notice it actually got thrown into the this art board.
That's why it's not showing up so we just got to go here and drag it into our correct art.
Let's double click it and let's click and drag over the text again we're going to delete and hit enter.
And bring it in a little more
all right and you know what that looks really good I'm just going to get it correct vertically so that
we can just align it horizontally.
I think that looks good.
I aligned it horizontally and I want to see what it looks like when I give it the fill of my green color.
So let's just go ahead and fill that in.
And that looks really really good.
And then I'm going to do the same thing I did with the star.
I'm just going to put a white oval behind it so that we can fill in that check mark.
So let's get rid of the border make this white and we're going to click this area and click our checkmark.
Let's align it horizontally and vertically.
Let's go and let's just throw that behind it.
Looks great.
It's also rename this.
This is the check mark.
And then with these selected we'll do command Jeeta group them and then checkmark.
This is actually probably bad practice.
Let's we want to denote this as just maybe just image or icon or there should be the image and image
should be the icon.
You don't want to name them to do the same thing because then you will know what's what's what.
All right.
So this is great.
Now let's go ahead and group these well call these say we'll call this details and then let's go ahead
in
Shift click the rectangle and let's group this also we've got one group in here and we'll call it saved
two favorites.
Awesome.
Awesome awesome awesome.
Oh.
One last thing.
We're going to rename this laju home screen save to favorites so you might be wondering where are all
these favorites being stored right we haven't created a screen for them yet.
And that is what I want you guys to do.
So think about the three questions that we answered in the beginning you know one of them being who
is using this app what type of person are they and how are they going to be using it.
And think about if you were saving articles to read later or to reference later how would you want them
organized.
How would you interact with this app.
And I really encourage you to think deep on this because this kind of thinking and this kind of exercise
is what separates the good apps from the great apps.
And you know the great apps from the ones that actually become amazing products and go viral et cetera.
So exercise the idea muscle exercise your creativity design a screen and you know you may not get in
on the first on the first try you know I never get my final designs you know down on the first try so
wrestle with it makes something that you're proud of that you like that you can see and envision in
the app and once you're done with that.
I'll see you in the next video.