Ui/ux Design With Mike Kochenburger – 3 Of 3

It yeah so I don’t naturally pronounce your name Gina ask XD where the name came from it actually started as project sparkler and then it went to project comet okay and I believe it was Adobe experience design okay but that’s way too long no one wants to say the whole mumbo-jumbo so it just shortened it to experience design there Peter Peter jumped in.

There yeah experienced as I XD so fun stuff okay here we.

Go but it does look like an emoji face which is great yeah okay so let’s just play.

That real quick so those come in show me more that comes in.

Nice and pretty go back boom hey there we go and heard you impressive how well this is handling it yeah it’s doing a lot for me you and you would imagine when you’re when you’re prototyping and designing for voice that there would be times where just doesn’t recognize something or it just doesn’t work but I don’t think we’ve run into that yet.

No yet we probably will but Disney XD we should do that.

Thing where you just yeah Metro that’d be really cool you’re watching the XD Channel alright so we’re going to from this screen I guess so it’s.

Going back to the screen yeah so this is.

Where we’re gonna pull our stuff from if I’m not mistaken like when we do our transition sure gonna mess this up at all no I don’t think so okay you can add a voice line to another voice command from that second artboard okay I think that’s what you’re trying to go for right yes okay so from this I can go ahead and pull it to here cuz we’re gonna go to venom first sure actually if you’re gonna yeah so what.

I would recommend is select the actual venom poster but I think right now you have the whole line selected okay so select the individual poster good idea let me actually make sure or any individual poster but as long as it’s not the whole group because then you’re limiting your options okay cool yep so let’s go ahead and.

Drag that over yep yeah and voice we’re just gonna say select let’s make it more.

Casual let’s choose venom and auto animate actually is plug gonna be transition maybe we do dissolve let’s just keep it simple and.

Ease in out let’s knock it down to 1.

Keep it consistent across the board so let’s keep it to one sec okay yep yeah okay here we go so let’s so I think if I just go to the screen I don’t need to like go through the whole rigmarole going that you know.

Selecting more going back I can just from that second artboard go ahead and just select venom and it bring me here actually the first time just do.

The whole thing okay so go to the set the third one and then go back just so we can really see how multiple voice commands work with this okay here we go I didn’t play this stuff is gonna come.

In show me more I think I actually.

Use a different voice command but it it picked up the more option okay and from here go back and then from here let’s choose venom hey there it is so cool and with this screen we can have we can do a bunch of.

Kind of we can do a bunch of cool stuff we can have this guy kind of when it comes into the screen this guy maybe slides in we can maybe do a little animation with this but it’s it’s important when you have in a bunch of information.

So we got a bunch of information on the screen that you’re not automatically taking people away from the information that pertains to the option that just shows so this popular right now its tertiary and.

We want to make sure that it’s kind of an afterthought so maybe it just pops in kind of slow and super subtle so it doesn’t detract yeah and Kyle’s asking or their hover effects.

In XD yet not yet but it’s definitely a one that actually might be the top requested feature on user voice right now so the team.

Is definitely working on it you can fake them kind of with time transitions and things like that but it’s definitely on the radar okay so I might actually need to move these both down because we are going to be editing this first man a little bit okay okay so here we go move that down here and once again the the tether remains intact.

Yep so we’re gonna kind of go to our design side we’re.

Just gonna drag it off just a little bit it’s yeah I think this is gonna be fine because by the time it materialize it’s gonna be past this our gradient in the background there so.

We’re gonna knock down the opacity so that’s totally an out there we just kind of got.

Our blurred background which you know makes a little it a little interesting.

Back there and we’re just gonna connect these two so go ahead and do that but okay there’s also depending on how messy you want to get with things this.

Is definitely keeping things organized right okay depending on how messy you want to get you could technically take that large venom poster put it on the previous artboard the.

One with all the movies uh-huh make that hidden and then if you just you can basically skip to that third artboard if that makes sense go ahead and explain that again because I I need to I need to get my head around it so the large venom poster on.

That last artboard at the bottom right yeah if you take that copy it on to the large poster.

Or the lar the image with all the the artboard with all the posters on it uh-huh turn down the opacity and then you can skip you can skip that middle step okay so it can animate from the side entrance isn’t it gets a little messy because then you have extra layers on that artboard that the second one.

Yeah but it’s a it’s doable if you if you.

Want to keep things organized and reduce your artboards okay okay yeah today less or less yeah keep going um that’s really no confusing no.

Do you know I mean it’s cool but I’d have to like kind of tinker.

To more keep the tinkering yeah totally now moving through yep so yeah so we got the correct destination we’re gonna do we’re gonna do a snap because all of our other movements similar.

To this a snap and we’re going to create we.

Want to make sure that it’s consistent actually we’re gonna shorten this maybe just 0.3 I think that’s how we have it on other.

Screens so let’s start here Oh let’s choose Benham okay and that slid in nice and nice and easy yep so I should have programmed in that that go back from this so we could just go back to our other one but here we go let’s do it real quick and we’re just gonna drag this gonna drag it all the way back here and it’s cameras asking if you can.

Add squeeze in and out while you’re saying show me more inch and go back that could be interesting more advanced yeah but it’s probably doable if you just separate the posters in the initial state a little bit yeah and then they kind of move in all together yeah if we have time at the end we can always go back and add.

Some a little bit little fun effects yeah and I want to say this about Auto animate I’m noticing people saying it’s like tweening between frames and all.

It’s a little bit more than that maybe you can have elements in completely different places and then when you have it set up on this other artboard they’ll move and resize and do all this different formatting in between that to make it happen and it’s just oh it’s a bit more dynamic the algorithm that decides how that proportions is extremely refined yeah smart stuff um so yeah it’s really smart and then that’s just you go back yeah well just keep it simple go.

Back and so let’s start from here let’s choose venom and it’s gonna slide in and I forgot to add another thing of this screen oh my goodness okay but it’s okay but it’s it’s happening it’s coming together really cool so let’s add one.

More thing and we you know we talked I think we talked a little bit about maybe visually impaired people going through this app so let’s let’s add in a.

Voice playback for to read the synopsis mm-hmm so I select the artboard looks like you might have.

A timed I think I already have a time yeah it’s going with this.

Guy right here so I can only have one time trigger am i able to select this into your time no because it’s not an artboard so I’m gonna have to do voice activation here we go oh yeah yeah.

Yeah oh no please read synopsis oh yes yeah then you can have another art board with the.

Timed yeah okay that works yeah no target right but I’m just target yeah I would have to have another art board for the speech playback okay that’s no problem just do this and I think okay so it maintained the tether from this artboard to this one going all the way up to here so that should work right I mean I shouldn’t really which one what does that do so that says we’re working through this right now is that for go.

Back yeah okay I would recommend because I think you have the entire artboard selected keep that specific for time transitions.

So for something like a go back voice trigger I would link that directly from the back button okay good idea.

Good idea yeah so go ahead and break that like this yeah and just to break it I’m just gonna pull just drag it off and we’re gonna select this drag that sorry man here we go I forgot my mouse and.

It would really come in handy and yeah this is just gonna be tied to you go back mm-hmm Auto animate actually said need more transition we’ll just do dissolve I think that’s gonna work fine then make sure to.

Tap out of go back just so it accepts it okay perfect.

And so here I’m going to have my voice is that this is all good I think this is gonna be fun so please read I think you had that in the second record that’s right that’s yeah so this is where we go yeah this third one is going to be yeah that’s the speech okay yep and just and this you probably just want to transition with none for the yeah yeah.

And we got a correctly selected mm-hmm and then I can select this do.

A time right here and not overlay we’re gonna do a speech playback and yeah I’m just gonna type out this real quick Eddie rock up super powers after yes I am reading this back to myself out loud okay so I’ve done this at home and it’s kind of funny to hear her.

Say parasite and like all this kinda stuff but it should work yeah so let me.

Double check my vocal queue here okay so here we go we’re actually gonna start from right here just so we can keep it easy that’s lit in please read synopsis report already brought develop superpowers after becoming a host to an alien parasite hurt him so here we.

Go that was just I mean it’s not very hard to do we didn’t it didn’t take us a lot of time the only you know the only like time distillation between all this stuff was me just literally.

Learning it in front of you you know how to do this so it’s super easy to learn super easy to kind of work through and yeah so but so we’re gonna go back actually so let’s go ahead and play this report already brought develop superpowers after becoming a host to an alien parasite okay.

Go back I might have hit spacebar too soon go back okay so we came back here and from here we’re gonna set it up so that first man so that when we you know we’re gonna kind of create the scenario that maybe venom is really cool but he wants something more historical.

Something a little bit more straightforward kind of drama yep.

So let’s go back and set that up.

Okay so probably select first man maybe sure and we can just kind of drag it over here we can.

Kevin says it listens to you unlike my cat okay.

Cats can’t have a coronary cat nice cats don’t listen to anything no they’re cool yeah Pasha’s asking what happens when anyone says wrong command basically it depends depends how wrong you say it yeah like.

We mentioned earlier there’s a little.

Bit of a wiggle room so if it picks up enough words that are part of that voice command it will recognize it if it just completely off it just nothing will happen okay so before me we kind of went through all that stuff so I don’t know if I’m gonna go into all the details to kind of recreate some of this yeah for here but let’s recreate at least that snap-in of this guy sure Sarge gonna dupe this all right so we’re gonna go back over to design side I’m gonna drag him off.

A little bit and decrease the opacity opacity yeah and so we’re going to just like the art board go back to prototype and create kind of a time cue and yeah it.

Starts right away that’s fine Auto animate and we’re gonna snap one second that’s cool Kevin’s asking if it recognizes other late languages other than English not yet but that is definitely being worked on all right so get this going I’m making sure I got all my eyes dotted and and everything so okay so it’s going to transition and.