Designing a navigation bar with animated icons using Midjourney + ChatGPT + v0

We've got these little icons, but what's cool is when you click on them, plays a little video.

>> Wow.

>> And we can do the same here.

>> And freaking >> So, let me show you how I made those.

What I wanted to do was more to was to explore a different style. So, actually,

I kind of picked Mr. Ben. Mr. Ben as a kind of cartoon and book from the 80s or maybe even the '7s that I remember from my childhood, but you know, I just picked it out as something that was very

different from that and just see how these tools could adapt. And I suppose, you know, Tesco is very British brand, so this is a kind of a bit of nostalgia.

So, I thought it might be a nice fit.

So, what I was able to do, you know, I just simply, I mean, you can see here, can we have the fan side on and can you use the handdrawn style like Mr. event and I started thinking about how I could add little, you know, scenes and things

like that. And then I was like, can you

like that. And then I was like, can you give me a prompt? I can get to midjourney. I was able to then take that

midjourney. I was able to then take that prompt into Midjourney. And as you can see here, there's lots of prompts.

>> Oh, right there. Why ask Shad GPD to create that exact specifications? Why

not just get mid Journey to like like get it from scratch?

>> I mean, I have the same thought, but Folks, this is Jay and welcome to Sneak Peek. Today with me, I have a rockstar

Peek. Today with me, I have a rockstar designer from the Tesco design team, Rob, who's going to show us how you can use chat GBT plus midjourney plus Vzero

to animate your website or your apps navigation icons. Rob, super stoked to

navigation icons. Rob, super stoked to have you on here.

>> Hey everybody. Hey Jay, nice to be here.

So yeah, I just wanted to take a bit of time to talk about how you can use Gen AI and LLM to kind of create some cool fun things. Here's what it looks like at

fun things. Here's what it looks like at the end. We've got these little icons,

the end. We've got these little icons, but what's cool is when you click on them, plays a little video.

>> Wow.

>> And we can do the same here.

And >> so let me show you how we made those.

Originally, I was thinking about how to recreate that kind of iconic an Airbnb style of icons that was kind of

blowing up over Twitter and LinkedIn, etc. And yeah, those look great. You can

get some really nice things, but what I wanted to do was more into was it to explore a different style. So, actually,

I kind of picked Mr. Ben. Mr. Ben, it was a kind of cartoon and book from the 80s or maybe even the 70s that I remember from my childhood, but you know, I just picked it out as something

that was very different from that and just see how these tools could adapt.

And I suppose, you know, Tesco is very British brand, so this is a kind of bit of nostalgia. So, I thought it might be

of nostalgia. So, I thought it might be a nice fit. So, what I was able to do, you know, I just simply, I mean, you can see here, can we have the fan side on and can you use the handdrawn style like

Mr. and and through a series of prompts, you know, there's kind of like don't crop the van, put it on a transparent background. Then I started thinking

background. Then I started thinking about how I could add little, you know, scenes and things like that. And then I was like, can you give me a prompt? I

can keep to midjourney. Midjourney can

now do video as well. So, and you could specify the start and end frame, which is critical for this because you want it to be on loop. Some of the other tools you allow you to start choose the end frame or this or the start frame, but you never know what you're going to get

at the beginning. But what I wanted for this was to have it as a loop so I could it could be a seamless animation. I was

able to then take that prompt into midjourney. And as you can see here,

midjourney. And as you can see here, there's lots of prompts. I did actually start try prompting it midjourney directly to create the Tesco van, but didn't do so well. But taking the the

>> Oh, right there. Yeah. I was going to ask you why ask Chad GPD to create that exact specifications. cuz why not just

exact specifications. cuz why not just get mid Journey to like like get it from scratch?

>> I mean I had the same thought process.

Well, if if Chhat CPT can do it, why can't this? But I think it immediately

can't this? But I think it immediately always went for something, you know, a particular style. You know, some of

particular style. You know, some of these ones I'm using even can't actually see the the reference, but I think that's actually using the correct I just

said animate the van, but I used the actual the image it created. these as

photos. But when I started doing the videos, you know, there's lots of kind of trial and error. One of the things I found, you know, these backgrounds that

quite cool, but immediately there's always a bit, you know, some of the stuff here is just gone wrong. So like

for instance, this one, the things on the van for and then I was thinking in terms of how this is actually going to work, if these things just appear from the edge of the frame, it's going to look really weird on a white background.

So I wanted to remove those. Then it was more like, okay, let's get the driver talking or, you know, getting the hands moving. You know, his his eyes and mouth

moving. You know, his his eyes and mouth are moving and his hands on the steering wheel. One thing that I found Midjourney

wheel. One thing that I found Midjourney kept doing was making it rotate. So, I

didn't ask for that. I mean, this looks really cool, the 3D, but it was either kind of driving like a maniac or just spinning. And so you see it even more on

spinning. And so you see it even more on the the moped versions of this where like every single one is spinning. What

I wanted what you know what I was trying to go for was the wheels. I wanted the wheels to turn and a bit of kind of like dust to come up and maybe them to turn

around and some momentum. Some of them have some of these things, you know, like this. They look it it looks great,

like this. They look it it looks great, you know, if that's if you want somebody to spin around like that leg goes and it's just, you know, it's not it's not a push bike, you know, but it looks so

cool. Some of these things, there's a

cool. Some of these things, there's a bit of dust there coming, but then they're just spinning around. So, I

could have used any of these ones, I suppose, because obviously it's not for production, but I was, you know, there's a few where she's just like going crazy

and you could I mean, but I couldn't get it to not spin. That was one of the challenges. And then I tried I tried a

challenges. And then I tried I tried a different one here, but again, they just spin around. So, anyway, I picked one

spin around. So, anyway, I picked one that looked pretty good.

So, got this one. I did like the way this turned, you know. I think that that's quite cute

you know. I think that that's quite cute really. And isn't it just amazing how

really. And isn't it just amazing how it's done that? And then this one here.

And then literally what I've done is I've just saved these, exported the videos for these. And then go into V 0.

And what I did was I created just said, you know, I want to create a navigation with some tabs along the top. And then

provided the videos. And I think the videos are probably just dumped into a into a folder here. And then there's things like just getting this the past

the the spacing right. Okay. Put the

videos behind the text labels. For

instance, like the videos are on top, you know, basic stuff like that. How

does the hover work? You know, the scaling of that. And then yeah, I mean I suppose from

start to finish was probably a couple of hours, but I think most of that time was spent playing around in midjourney like desperate to try and get it to not spin.

You know, I was really want cuz what I was hoping to get is some kind of, you know, moment forward momentum stopping a bit of character and things like that, but I couldn't really get it. But I

think the overall effect is really powerful now. You know, this is

powerful now. You know, this is something that, you know, it it it looks it looks great.

>> Makes me smile.

>> You know, it's nice to know that you can do these things and obviously >> it's just going to get better and better with the prompting and things like that.

So, the the issues that I've had, I mean, that was a few months ago that might well have been resolved now. I

don't know. I haven't used my journey recently, but it's just, you know, it's easy way to kind of bring a bit of character to the to your interface. And

I mean, like a lot of the things now with J, it's just fun, you know, like unlocking creativity that you've not been able to do for a while or I mean, I'd never be able to create this stuff

myself. I'm not an animator. So, being

myself. I'm not an animator. So, being

able to do it just unlocking so many opportunities.

>> Makes sense. Thank you so much, Rob, for showing us how to create some slick icons and animations using chat GPT, MidJourney, and Vzero.

>> Pleasure. Thanks, Jay.

>> Hey, this is Jay. It means the world to me that you watch this video. If you

want to unlock the AI design and growth design interviews with designers at some of the top companies in the world, then head on over to sneak peek.design and

subscribe to the newsletter.

[Music]