Up next in 10
How To Use MidJourney For Web Design
6K views
Apr 18, 2024
"Explore the dynamic world of web design with MidJourney in our comprehensive tutorial. From beginners to seasoned professionals, this guide offers step-by-step instructions on leveraging MidJourney's innovative features to create stunning websites. Learn how to navigate the platform, utilize its powerful tools, and implement cutting-edge design techniques to bring your vision to life. Whether you're crafting a portfolio, launching an online store, or designing a corporate site, unlock the full potential of MidJourney to elevate your web design projects to new heights."
View Video Transcript
0:00
How to use Mid Journey for web design
0:04
Hey guys, welcome back to the YouTube channel. Today we'll be getting into a different use case of Mid Journey that you might not have thought of before
0:13
which is web design and this is especially helpful in web design because Mid Journey not only
0:19
enables you to create images from a prompt, but it also allows you to customize images from a
0:26
pre-existing reference and you can design a lot of websites. websites with this kind of method. These designs will be customized, they would be new, they
0:34
won't be based off templates, but will combine all of the UI interface elements that you might
0:41
love or that are loved by customers or clients. So let's get into it. Now Mid Journey is no longer
0:50
available for free, so if you want Mid Journey, you have to subscribe to one of their subscriptions
0:56
It starts at $10 a month. And you have to you go before the pro plan if you want stealth image generation which basically means that if you
1:04
want your images to remain private the ones that you generate then for that you have to go for
1:10
their pro plan i'm using the basic one and just so you know um mess around and get started with
1:15
mid journey the basic version goes fine even though it has limited generations still it works
1:22
pretty adequately now just to explore around let's go into the explore page of mid journey's
1:27
app feed and let's search for web design and if you actually search for web design it will pull
1:33
up the different designs that have been created with this kind of name in the prompts and you can
1:39
see multiple different people have used beautiful website for a software development agency and
1:46
mid-joney has basically designed something like that so you can provide a detailed prompt
1:51
you can provide it with multiple different keyword terms that you want to be included Plus you can even also go on a place like Dibble Dibble is a platform which has multiple different inspirational designs or it basically a Pinterest for websites So let say I want to create a
2:12
website. I will just search for a website and I can use a image that I get on Dibble
2:17
and I can use it as a reference point on mid-jurney. Now first off let's start with a
2:22
basic text prompt and then we will move on to how to to use a image as a reference point
2:28
Now once you're on Mid-Jurney, you want to just click on the Mid-Journey bot over here on the right side
2:33
click on Add to Server, and add it to a personal server just so it's easier for you to work on
2:39
Now, once you do that, you are just going to type in slash, and you're going to type in slash settings first
2:45
Now, what this allows you to do once you type in slash settings is that it opens up your Mid-Jurney settings
2:51
and from here, you want to open up the Remix mode. Now, the remix mode actually allows you to customize your prompt whenever you are creating variations of a mid-jurne generated image
3:03
This can be especially helpful if you're looking for more customized images. Now, once you go on here, you want to just type in Imagine, and then you will enter your text prompt
3:12
So, let's say I want web design. So I've just entered my prompt
3:17
It says, web design for a skincare brand, launching three products, a cleanser, a lotion, and a lip gloss
3:23
soft pink tones, Figma, U.I.U.X, called action buttons. Now it's beginning to generate our image and well, you can see in just a couple of seconds it has been generated
3:38
So we're just going to wait a little while for this to be completed. Now you guys can see it's giving me quite a lot of different options and we're just going to wait for this to be completed
3:48
Now you guys can see I have such an amazing little example
3:53
set over here so these are quite amazing and i really particularly like the first one so what you can do is if you like it as it is you can just click on U1 which basically allows you to upscale it and create get you know the full resolution image
4:09
But if you want to further customize it, then you can click on V1 over here
4:14
And now we turned on the remix prompt. So this is what we turned on in our settings
4:19
And now this allows you to create variations of the first item. plus you can also add a further prompt
4:26
So now I'm going to add a prompt for the first image
4:30
Now what I'm going to do is I want to add a... So I've added a shop page, a home page recommended by dermatologists
4:37
and lip gloss. I think I'm going to change the packaging. So now I'm going to..
4:42
I've just added a new prompt for the first image. It's going to now take the first image
4:47
and create variations based upon the prompt that I have provided. So let's just wait for this to be completed
4:55
And while this is going on, let's go on to Dibble. And we will go on ahead and take a reference now
5:01
So I'm going to take a landing page example from Dibble, and we are going to create variations of that
5:08
So let's go on ahead and keep on scrolling. And you know, when you're looking around
5:13
you find a few web designs that you really like and you want to customize them to make them your own
5:18
So I will just go on ahead. and take a look and I really like this one so what you're going to do is you're going to
5:28
click up over here and click on open image and new tab and this will just open up the image and
5:34
you just want to save the image as it is so whatever website that you like you can just take an
5:40
image of that and we're going to use that as a reference in mid journey and you can see in the
5:44
meanwhile our new variations have also been generated so you guys can see they look super
5:50
nice and I really like how they came out but let go on further and use a reference so to use a reference just download the reference image then you want to click on the bottom left over here click on upload a file and you will just go on ahead and upload the image that
6:07
you have of the reference just enter it and just upload it once it has been uploaded click on
6:15
the image click on open and browser and what you're going to do is now go back to discord type in
6:21
slash imagine and then you want to copy the URL of the image so the image you opened up in your
6:28
separate tab you want to copy the URL enter it into the prompt and then you can add whatever you
6:35
want however you want to customize it so and now i have some key terms over here so we have
6:40
um website visual hierarchy ux web design beautiful website fake awards CSS design award usability you know
6:49
you're going to add the relevant keywords for your website and just click on paste and match style
6:55
And now I'm just going to enter my prompt. And now it's going to take my reference image that we have used
7:02
And now it's going to pull from that. And you can even do this with your pre-existing website and customize your web design accordingly from your pre-existing design
7:11
which can be a great way to make small yet effective changes to your website
7:17
So let's wait for our website. and it already looks pretty good
7:22
I'm just going to wait for this to be completed. And this looks fantastic
7:27
So you guys can see it has these amazing designs. It's used like the basic kind of reference from here
7:35
and created web designs accordingly and I really like them. So in this way you can customize your web design
7:42
and create multiple different website designs and layouts for your website. I hope you guys found this video
7:49
helpful make sure to leave a like and subscribe to our youtube channel and if you have any questions
7:54
or queries leave those in the comment box down below and i will catch you guys in the next video
#Business & Industrial
#Computers & Electronics
#Skins
# Themes & Wallpapers