Ui/ux Design With Mike Kochenburger – 3 Of 3

Of darker or something back there yeah and maybe move away from a pure black and maybe go for like a darker purple yeah kind of give a nice flare and we’re saying this but this is.

Really solid work you should be very proud of this is good and this is okay there’s some different screens here yeah yeah so again with the shadows especially on this screen over here to the right elimi up quite a bit too harsh I would say yeah and what’s cool about what you have with.

This flight detail screen is you kind of have these different elements that’s floating almost if you could go through and kind of keep it in this floating kind of animation set where.

That plane icon is um you know maybe it floats along at a slightly different pace with the rest of it and kind of gives a cool animation yeah I’m also noticing the text on search flight on this screen is a little bit it’s not as heavy as this screen.

Yes maybe make sure to keep those consistent I.

Would assume that they should be consistent maybe it’s just a little bit of an oversight yeah yep okay fancy yeah that’s really cool yeah really cool and then this.

Week you have this kind of 3d almost like it’s lifted off yeah well done you can definitely see a little bit of the harsher shadows here so definitely dial that back a little bit yeah yeah and there’s a video excellent love videos cool okay simple yeah you don’t want the transitions between these to be.

Too long yeah because if people know what they’re doing they’re gonna go through this really quick yep okay cool great yeah with you the whole interaction well done love it yeah let’s see something a little bit older yeah it this is kind of cool to see your older work.

Because it can kind of tell us how far you’ve come yeah so this one is portfolio of Matt of Master of Architecture okay I love that design I don’t know if it’s supposed to be a logo or just some sort of.

Fun design but it’s really nice yeah really fun.

Yeah although it does that little circle it kind of interferes with the P so for a.

Second I thought it was a bee yeah up against the black there it’s kind of tricky unless it’s a portfolio I think you could really just do it do away with that circle cuz the rest of the day I mean the rest.

Of its really strong so yeah okay cool colors are nice very pan Tony yeah yeah I like how you set this at the proper angle this is probably like you know you put.

It into Photoshop put it into that dot PSB file and everything but I would go through make sure you’re you.

Have like a stronger a stronger sense of hierarchy in your text there just from an editorial standpoint but it’s really solid well done alright more shots great mm-hmm great use of imagery yeah when you have something like this I don’t know if you’re gonna have a video at the end that you know down below but there’s a few magazine websites out there.

That let you export like an iframe and all that so where somebody could literally go through this and the pit it looks like they’re turning a page.

Just digitally and that might be something to kind of put at the bottom.

Just a link to that yeah yeah let’s check out one more let’s do another daily challenge really solid work that let’s see this one here join is this daily challenge number four oh this was the music app I think yeah this is looking pretty.

Solid yeah it looks like the very subtle gradient on the left yeah very subtle which is nice yeah it’s not too strong because then it’s if it’s too strong and then it’s distracting and drawing the eye over to that way yeah and the eye in this case obviously should.

Be in the center right right on and also you have so you have your kind of highlighting I would put a little bit more.

That where the heart is and then where the that kind of highlighting just has a.

Little bit more breathing room yeah but this is really solid these are just small things yeah what do you think of the black progress bar is it working it’s working okay but maybe you might not need that I don’t know.

I mean it looks fine to me but it would it would be cool to see maybe a different kind of iteration on that yeah I’m not sure how to improve it but it almost.

Looks like the white is filled up and the black is not yeah often times you’ll see a black progress bar for the whole thing with the opacity drop to like.

20% yeah and then a much lighter color like white or green or whatever it might be greens not going to work in this example but as the the progress bar as the fill it fills up so here’s maybe a quick solution instead of that being also your red gradient may be making that black and then your gradient is that.

Bar did you just say that no okay okay just make sure you didn’t accidentally Incept me so yeah maybe that bar is the gradient instead of black and we’re just kind of reversing the colors there that could work too and.

There’s a video cool all right cool got some interaction there yeah sure it’s looking good yeah great love it yeah well done I mean you’re showing kind.

Of the core feature I guess and if you have if you have time I would go back and just add a little bit of animation to some of these daily challenges.

To go back and so my portfolio stuff and I’m gonna take the apps that I made and and animate that absolutely so alright moving on to Osama let’s see what stands out to you with this one yes Carla Carla LexA to me daily not Alexa Tesla day.

31 I love you I child are daily challenges sometimes so it’s a personal car screening interface really cool interesting how you came that’s amazing I wonder what this was After Effects probably yeah looks like XD and After Effects okay yeah yeah and if you guys didn’t know you can pop your XD file and after effects yeah we have full customization over the elements yeah very neat okay so there’s multiple okay let’s.

Just go through some of these okay interesting I would say that the.

White text is a little bit difficult to read in some of these especially on the yellow so I would pay a little bit more attention to that yeah yeah it’s a little light go harsh or under gradients your PDF one.

Looks really good mm-hmm ight have an opacity layer over it to kind of kind of like hinder how bright it is yeah I’d actually encourage you to let those be bright you know and then your whites really gonna stand out and you had stupid that’s.

This is a crowdfunding page and this challenge I tried to come up with a quick.

Interaction for a crowdfunding page concept oh cool Wow okay I like how it came in like that yeah that’s interesting let’s play that again yeah soothe again it was kind of angled and then it’s straighten itself out it.

Was nice oh he’s in the chat.

Right now he is okay interesting I like how.

Subtle it is you know it’s although I.

Would say the donate that cross there with.

Donate I’m not I don’t understand that exactly yeah don’t put a cross through donate I would say because it’s making it seem like you don’t want us to donate right yeah maybe just like put maybe something behind it – I don’t know.

To emphasize it yeah okay cool interesting interesting I like how clean that is yeah very clean yeah this would be good for an e-commerce like fashion site yeah and I think you can definitely tell that medium is selected yeah well done yep actually go back up real quick yeah you could actually play with making some of your tech all your type is like.

The same color black this is a really cool screen so don’t take this in any kind of like super negative way I would play with different opacities.

To kind of add more hierarchy more distinction between the different text groups so yep okay so these always intrigued me these kind of these screens that kind of break the grid a little bit I myself when I actually get into some of that I kind of break the grid see how it.

Goes so this is looking kind of this is looking really cool your read more seems a little too spaced out Oh down here yeah a little bit.

And then your hamburger menu I didn’t know that was a hamburger menu.

And burst so only two things but I mean once again this is really solid so cool let’s check out another project what what stands out let’s go to you that watch because I actually debated doing a watch Oh animations built in Adobe XD okay really cool especially how you have it I like it yeah.

And I like how the background also moves in from the top yeah I think there’s a fight.

I think it’s light gray just text yeah but also on the background when it comes in there’s the mask slightly moves yeah which is nice this is really solid I like this this is showing off a really cool feature of XD and it’s it’s really nice.

Very nice yeah that’s so cool I almost got a watch app for this whole stream so this is really cool to see yeah it’s nice seeing watch designs because we don’t see them very often it’s usually desktop and mobile yeah and watches mobile but usually phones or tablets yeah I like it from I don’t know if you’re a freelancer but from a parallax cool hmm if you’re a freelancer and you can kind of get in on that watch space that’s.

A really cool space that doesn’t have a lot of designers with experiences right though it’s a very clean to-do list yeah okay interesting trying to figure out.

What the timers for I mean I like how it’s kind of cascading in the background I would actually once again solid I would actually maybe reverse that so that it’s from above it looks like it’s cascading because when you scroll down it kind of it looks a little I don’t know it’s like a weird distraction when you’re scrolling so but this is this is really.

Cool once again I think the timer’s counting up because their voice.

Recording okay I think I that makes sense you know cool now we’re gonna be hungry yes I like the hierarchy I would yeah.

Looking good looking good I like.

Your drag effects um the only thing I would say because I want to give you like good feedback I also want to give you stuff to help.

You grow your unselected States make those a little bit brighter because you almost can’t see them at all hmm so maybe just up a little bit but you still you know you’d still want them to be able to know what else is there in case they change their mind right cool let’s take a quick look at one more then we’re gonna hop back over to your screen okay to finish up.

Let’s see oh okay this kind of goes in the concept of.

What you’re kind of working on this is Netflix reimagined okay play this video okay interesting kid so this I’m assuming is really meant for the desktop yeah because when it translate to a television screen a lot of these interactions would be very difficult.

To navigate around yeah I mean it would be easier now that we can kind of program voices and stuff that’s true yeah but I would say the rounded corners on this screen probably you’re not necessary I would just go full widescreen use that real estate if you have it yeah agree yeah again with the rounded corners here I don’t know.

If they’re working you don’t need them no but it’s I mean it’s super big and all that stuff you don’t need it that big either.

Especially but I mean if this is on somebody’s screen they’re right here you know they’re only right maybe two three two and a half feet away you know it doesn’t need to be super huge in your face but the work that you’re doing like surrounding this and kind of making a contextual ecosystem around this redesign is really impressive yeah but yeah it’s it’s a lot of good ideas let’s just put you know kind of buttoning them up a.

Little bit cool great so thanks so much beau Hana and Osama for sending in your portfolio’s let’s hop back over to Michael’s screen take a look at what we’ve been working on what you have been working on I’ve done.

Nothing what I do want to see you do.

Is add one more voice line okay you probably the the screen where all the movies appear okay this one right here yeah and I want that voice line to really.

Just allow a user to go through the entire process if really if they know what they want.

Can say a single voice line and hopefully if all works well it’ll go directly to that ticket screen at the end okay so how would.

You go about connecting this and maybe the last screen yeah so it would be so you basically drag out a handle from any one of those layers it could be the text layer it could be whatever whatever is not being used okay and we’re just gonna move it all the way over drag it all the way over to that ticket screen right here yeah right there okay now it’s going to be a.