Ui/ux Design With Mike Kochenburger – 3 Of 3

To spend too much time.

On these because these are vanilla Amazon screens but when they.

Come here just a little you guys remember an Independence Day where Jeff Goldblum’s character opens up his computer and it’s like hi Dave I think I do mom and that was just like a really cool moment cuz back then it like hadn’t even really happened before that had really happened before so when we get to this area actually I’m gonna grab the whole art board so Amazon home – – up there and we’re gonna go over.

Here and switch to you time and just when we come to this screen like when you turn.

On your TV we’re gonna wait like maybe a second and then we’re gonna have a speech playback and maybe that speech playback says good or let’s do this how are you doing today Ralph actually let’s do something more concierge focus so what and here we go sorry I’m making this make sense right now in real time hey Ralph what can I help you with today so it’s.

A little bit more service so let’s go with that and so when we play this I hopefully this I did this right well let’s see what happens hey Ralph what can I help you with today boom there we go there we go so soon if this was to like kind of start up.

You would get meted with that voice message so now we’re gonna focus on here we go back to this we’re gonna focus on transitioning between two different screens so let’s if I pull this over to the second screen is it going to take away my voice playback that one will okay so you can technically use any layer on your artboard to use.

For voice playback ok a voice trigger so let me.

Maybe grab the this rectangle layer that we got and we’ll the work I think it will where is that where’s your mouse uh right in there oh yeah you.

Can do that or you can do any text layer doesn’t matter okay whatever have this whatever work them over to here and yes we’re gonna do a voice enabled mm-hm and it’s going to be.

Sensei what’s the weather like today it’s gonna be just a transition and we make sure that the targeting is correct and it is yeah and it’s just gonna dissolve right in here but before we get into this next screen let’s.

Do some groundwork on this artboard so we’re gonna dupe this a.

Few times do you know what’s this leading to so we’re going to kind of compartmentalize different parts of we’re going to compartmentalize different.

Parts of this thing so that.

They can kind of animate at different rates okay so we don’t just want this to kind of fade in because well that’s kind of cool we can make it even more cool so let’s go.

I’m all about making things more.

Cool yeah so I actually forgot to okay those are blocks so I can just do this group that I’m I just have to go through.

This task a little bit tedious sorry about that we’re just gonna group those and pull those off nope you’ve got a few forgot a few guys some stress cool and that’s what’s gonna pop up first and then we’re gonna go through colors should have grouped these and just.

Drag them down or whatever but so we get a I’m gonna group it this time and we’ll make sure that everything works properly you have to make sure if you’re animating this stuff that the groups are identical on both artboards yeah and that the names are identical as well so I’ll make sure to double check.

That before we get too far into it why I keep clicking on the wrong stuff here okay so we’re gonna group that and we’re gonna just bring that down a little bit see this so close so close we’re just gonna bring it.

Down a little bit and we’re gonna go to our design.

Side and just knock down that ax pass ‘ti to zero so that kind of disappears but it’s down a little bit and we’re gonna want them to kind of rise up in.

This nice snap animation mm-hmm so.

Actually just gonna do this one since I already got that bat stuff grouped here there we go make sure to grab them correctly trying to make sure I get it right get it back centered okay that’s close enough and it’s just gonna be making this 100% again so let’s go back over to our prototype side and let’s start the all this stuff this actually needs to go away okay what the art.

Board selected or now just oh I’m just dragging these out of here so that I can have just this base page John Louis all right so now we’re gonna select the art board we’re gonna just drag it down into this art.

A time delay mm-hmm maybe we do we’re gonna have to do a little troubleshooting to get it right but it’s just gonna be 0.5 seconds Auto animate and it’s targeting the right screen and it’s just gonna be mm we’ll do ease in out and that will take also do point five seconds there and then we’re.

Gonna go here go back over to our tablet once again I selected the art board and by the way if you’re doing if you want to do a time trigger it’s only available if you have an entire art board selected okay yeah that’s correct I think it would be incorrect.

I’m just Mac whatever okay so we got that go and I wonder if I could just probably do that with the transition but we’ll see once again we have to play around a little bit that’s the fun about designing yeah just it takes a linear iteration yeah trial and error grab this guy and in a short amount of time hopefully we can get this anime and we’re gonna have that stuff snap in there now.

Based on what you know did I do that at least in a passable way possibly through the master yes the UM the actually there on the pasteboard now but those the clouds and the whatever they’re called the weather icons for the second artboard if you would have had them on the artboard it might have confused Auto animate because the groups were not the.

Same as the other one but because they’re not visible it should.

Be okay okay let’s see what happens yes let’s.

Check this out okay so what we have here is that this stuff didn’t really have didn’t really fade in the way we wanted but those clouds came in exactly how we wanted them to so we just need to go back and retool a little bit there we go so wonder what we need to do here with these.

With this guy is it I wonder if it’s just because these are not grouped together and that’s called let me just trim that down to just.

Group one and go through group this again this would have been if I would have laid a better foundation this would not be how it is right now where I have to go through and regroup all these.

Things but then wonder if you can.

If you can just get rid of that second artboard right here yeah okay.

I mean if I did that I’m gonna have to go ahead through and reconnect some stuff but yeah cuz I think you can basically go from oh wait I can’t undo so this.

Is okay yeah I think so on the third artboard if you grab that new group you just created with those weird elements whatever they are you’re talking about here no the the second one there right that one uh-huh just grab that stuff where it says like Saturday and everything and paste it on the first artboard okay turn.

Down the opacity and then that should transition it in okay that’s a good idea once again yeah just kind of figuring it.

Out as we go yep and just so everybody knows this is a new feature and I only started playing with this last night yeah so but in a matter of hours I was able to go through and.

Do some really cool stuff and in these animations and everything and figure it out so it’s an extremely intuitive to learn but I mean even with knowing that stuff it’s still a little little trial.

And error so absolutely so we’re gonna dial down that opacity mm-hm and we’re gonna go ahead and switch back over to our prototype side and for all I know I could have just broken everything but well we’ll find out okay.

Maybe we’ll just bump this up just a little bit point five seconds okay it’s cuz I put the s in there that it was like what are you doing all right there we go just double-checking all my settings here making sure they’re consistent let me make sure this group yeah okay okay so let’s give this a whirl let’s do it see what happens okay so I think.

It may have faded in but because it played and then full went fullscreen we didn’t see it so maybe if you start from the first artboard okay let’s do that yeah start from the one at the far left and it will see the whole transition in action I hope so when you’re starting your animation you have to press down on the space bar just to kind of.

Your microphone so sensei what’s the weather going to be today perfect okay so that was what was going on is we didn’t transfer from that first screen and that’s why it was kind of kind.

Of showing up weird that happened exactly how we wanted it to beautiful so let’s just keep moving.

On except for the weather that’s not people yeah the weather is actually super yucky so what we’re gonna be working on next is moving into our movie screen selecting movie screen because going out on a day like this would just you would just.

Get soaked you put maybe even get electrocuted but that’s a possibility but let’s do some playback actually sure I mean and Hector’s loving the gradient over to the right you leave.

On the flicks logo and that’s yes that’s the actual gradient in XD right yeah yeah that was set up in XD and let me see if I can pull out my if I.

Have to switch over design I’m not sure but.

My assets panel that was just set up in the assets panel we were able to pull in that color super fast I didn’t have to go through and manually set the gradient every time so and wait till you see what he has planned for that splash screen it’s gonna be.

Really cool but here let’s set this up oh maybe it’s because how come my oh because you have a I did break it didn’t I so I did break.

It oh no so you’ll have to duplicate that one downwards yeah you were right the first time cuz that first one should be a time transition to a speech playback okay and you can only have one time transition on each artboard okay so I did break it for you alright so.

So we’re just gonna do that yeah and it’s gonna keep it’ll maintain our connections but it’s funny how it shows up oh oh no get everybody so we’re just going to how do we connect these two I wonder then unless you do know now here’s like here’s.

A question yeah when you want that speech to.

Playback right let’s say it’ll take a few seconds to playback or maybe I don’t know 10 second or so do you want the screen to be blank with no weather icons or do you want the speech to playback only when the weather icons are visible only when the weather icons are okay so you’ll probably want to undo that and go.

To the last screen and do the speech playback there okay yeah let’s do that because there’s all right the time transitions won’t kick in until the speech has been playback and then to transition to the next splash screen we need to just grab maybe this image layer or whatever and then transition that one yeah if you’re if you’re using a voice trigger yep absolutely okay yes.

Timed and we’re gonna go down here speech playback mm-hm and let’s kind of make it more fun less robotic so well the weather is going to be lets say junkie today.

I help you find something else to do maybe sure we’ll stick with that for now okay you know.

Who’s come back and yeah yeah we play with it so we got a point five second delay me we should just up that to one second delay because I’m not sure if it’s going to I would say lower the better.

Cuz there’s still some even if you put zero seconds there’s still a little bit of a delay once the transition takes place and then it transitions to the time speech playback okay so let’s go ahead and play this from the very beginning again mm-hm so that we would get that sweet.

Animation on this this screen right here so sensei what’s the weather going to be today the weather is going junky today can I help you find something else to do yeah so is going junky today is probably not not the baby noticing but you guys get the gist of what’s happening here it’s.

Super cool to have these things kind of able to be programmed into it so let’s go back here maybe this is it’s not going to be let’s just go with is junkie today that works yeah everyone’s crazy.

Yeah yeah good okay cool so here we go maybe just go ahead and grab those artboards and move them up something yeah yeah nice snug together alright so let’s go ahead let’s go ahead and.

Connect this but before we do the actual kind of transition animation get too far into it I’m gonna go through and build this out first so when we do that first transition it kind of makes it happen.