Ui/ux Design With Mike Kochenburger – 3 Of 3

Time like centering in that and making that perfect we just want it to kind of go like kind of bounce a little bit and kind of grab our attention because that really is the.

Easiest option to get through this screen so and then we’re gonna create we’re gonna dupe this.

Guy right here since that’s kind of already got that original resting state and in one of your demos you actually have it so that when you tapped on a heart it went from like kind of it went from bouncing from big small and that’s kind of what we’re gonna do here it’s going to kind of bounce I’m going to use the bounce animation Doughboy.

Maybe snap because that’s just super subtle and and slate right now let’s see what happens yeah okay so once we’re in this screen.

Let me go back to my prototype side okay so I’m gonna actually set up.

A vocal zero seconds actually do you want the the animation of.

Those suggested seats before or after the vocal after mm-hmm do you want to go down to the bottom yeah so let’s go ahead and set that up because we’re wanting to see this all in action yeah time is right we’re gonna take off at 0.3 seconds couldn’t make it zero seconds and the speech playback is just gonna say maybe choose they’re selected the suggested seating option or or.

Based on your past based on past showings or based on your past based on your history history there you go it’s been a long day these seats may be perfect.

For you yes perfect for you and so we’re giving them an audio cue and we’re.

Really kind of make it sleek and and fun and from here we’re going to actually just drag from this guy right here you’re gonna just do this and it’s going to.

Be suggested seeding looks perfect and it’s gonna be transitioned dissolve ease in out and we’re actually gonna kind of create you know set up.

A little animation to go with this.

Ticket with our checkout screen here I’m going to zoom in so you can kind of see the details we’re gonna let me make sure I’m grabbing the whole thing okay I’m gonna make sure I got all these grouped okay so that’s subtraction up to you see it’s green first man line huh okay so are a.

Little bit of a learning curve right.

Here almost almost okay I think those lines at the top might beeps you select it if you unselect those lines where is this at okay let’s pull that down here okay there we go we’re gonna.

Group those and I’m actually gonna take this delete this and redo this because I don’t want have to group those things right yeah so we got that selected and.

Don’t know what is it okay here we go in there and I think the is the yeah there’s nothing to do it.

Again okay I think you’re still missing a few these ones right here 1:20 October and.

Yeah in the price yeah sorry guys here we go oh my god we’re gonna get this guy’s we’re going to get this all the icons yes you know.

When you set these things up you think these icons are a good idea but right in this moment ok these are those buttons so this.

To make sure that your layers are all labeled a little foundational organization can go a long way teacher Kim and making sure that when you’re on a stream it’s not tedious okay so here we go I think we got this sorted out David just repeated it this is why structure is so important yes perfect okay so true.

Okay gonna dupe that cuz we don’t have to go through that again and we’re gonna grab this move it down and I mean I like to slide in stuff just because it’s super subtle that’s what we’re gonna do here I’m gonna make it zero opacity and we’re gonna have connect these two.

We’re gonna go back to prototype connect these two it’s gonna be a time delay maybe 0.5 I think we have it on zero on the other ones and it’s gonna be Auto animate and I love the snap animation cool so I think that should be good.

And for this we’re just gonna go with our credit card I’m going ahead and doing this now just so we can kind of kind of you know keep it going totally.

Yeah pay with my credit card on file sure I guess transition and in a real world I mean you kind of touched on this earlier in a real-world environment there are probably a few extra steps for verification of credit card putting your cvs cvs the little three-digit code but for times sake yeah skipping some of that yeah and even that stuff.

You could hook up to you vocal cues I mean I’m sure to really kind of do get into it and make the whole thing yeah and some rat work we’re just gonna focus on prototyping today we did design yesterday and I there’s probably a better ways.

To do the the seat choosing screen we’re let’s just kind of keep the flow going in this year we have about three minutes before portfolio review so listen chugging through and maybe if we have time afterwards we’ll tackle some of the other stuff okay so let’s start here I think way to do this what do you what do you think sir he’s good and then I didn’t I didn’t hear any sort of no were they linked up for a time transition to the top perhaps well.

There weren’t okay interesting so this is set up for time yeah you have.

To drag it to the second artboard right on yeah okay okay time and it’s going to be Auto animates mhm and yep sorry I forgot to do some of this you know for this one an easing of wind-up could be interesting and then balance on the second one so ease and wind-up a wind-up okay so it’ll it’ll get a little bit smaller then it’ll go.

Large and then it’ll bounce in the.

Final one okay and then we went so when we connect these yep oh no anime yeah and and so snap you can beep remove snap or bounce yeah let’s do bats and the duration is one second let’s say shorten that yeah it should be nice and quick 0.3 is somewhere around there you might have to go back.

To the other one and change that as well yeah okay so here we go mm-hmm so those best your history these seats may be perfect for you yeah let’s go with the suggested seats I think that was the cue okay and so our payment comes in and from here it’s just let’s pay with a.

Credit card okay so you will receive an email confirmation shortly and if we had.

A little bit more time I’d add the shimmer to this as well oh yeah and you know we it would kind of look cool and all that stuff but yeah so there we go I don’t remember all the vocal cues.