Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Video Player
00:00
00:00
00:00
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
In this video, we demonstrate how to use Midjourney to spark ideas for web design.
Tools:
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
All right, so I'm here in
Discord to work with Midjourney.
0:00
I'm in my personal server where I
make my Midjourney generations, and
0:03
I'm going to go to the UI designs channel.
0:07
Perfect, all right, so we need to
come up with a prompt for our bakery.
0:09
Let's just start out with
the /imagine command, all right?
0:13
Hit Enter to start writing our prompt and
the prompt will be Web Design Layout for
0:16
Artisan Bakery.
0:20
And we'll use the suffix command--R9:16 to
tell MidJourney to add our aspect ratio of
0:21
9 by 16, so we get a longer image similar
to traditional websites or layout designs.
0:28
I started off with a very simple and
generic prompt, and that was for a reason.
0:34
We will get more descriptive and
direct with our prompts as we iterate, but
0:38
I personally like to start wide and
narrow in on my results.
0:41
Okay, we have our first set of results,
let's open the designs in my browser so
0:44
we can take a better look.
0:48
I'm really digging
the product photography here.
0:49
The setup on the right is pretty cool,
mainly because of how the bread is placed.
0:52
It has this nice background blur,
giving it a 3D vibe.
0:55
And the way that loaf in the center
is positioned, it kind of naturally
1:00
draws your eye downwards to the next
section, which is kind of neat.
1:04
On the design to our left,
1:08
I like the concept of this
badge element inside the menu.
1:10
I think this is an interesting
way to help your menu stand out.
1:13
Going back to the design on the right I
wanted to say I liked this top banner as
1:22
an alert banner for the site it could have
announced promotions in store events, or
1:26
limited run items I also
just wanted to point out.
1:31
I like how the bread is not only leading
your eye to the next section, but
1:34
leading it directly into
the call to action button.
1:37
As you can see,
it's already making me think and
1:40
giving me ideals of things to consider.
1:42
Moving on, though,
1:45
I'm really liking this background image
with all the stacked baked goods.
1:45
It's got this authentic kind of
rustic vibe with the ovens working in
1:49
the background and everything,
I'm really into it.
1:52
Feels like a nice touch.
1:55
Okay, there are some other decent
elements going on here too.
1:57
Of course, there are a few mistakes and
rough edges, but
2:00
that's kinda expected at this stage
of Mid Journey's development,
2:03
especially considering where
we are with version 5.2.
2:06
But yeah, overall it's shaping up nicely.
2:08
Let's jump back on Discord and
maybe tweak a few more things for now.
2:12
We're gonna keep that same prompt,
we're just gonna re-roll again by clicking
2:17
the refresh icon, we'll get 4 new
images based off that original prompt,
2:21
which was Web Design Layout for
an Artisan Bakery.
2:26
Again, aspect ratio, nine by 16.
2:29
All right, and
let's check these out in the browser.
2:32
Okay, on this left side
of this design here,
2:38
we kind of have an example of a mega
menu with some images and more links.
2:40
Interesting but again, for this client and
this project in particular,
2:44
I don't know if the situation calls for
that yet.
2:47
It's an interesting take on
what the menu can look like and
2:50
it can be something we use down the line.
2:53
Especially if it makes sense.
2:56
All right,
let's check out our bottom two designs.
3:02
While both have strong product images,
which has been a trend,
3:05
I'm really enjoying this
design on the right.
3:08
The color palette introduces a blue and
orange combination, which really works,
3:10
as these colors look great together and
have a nice contrast.
3:15
It's one of the reasons you'll
see a combination of blue or
3:18
teal and orange in the color
grades of many movies or images.
3:23
I'm not a fan of the rest of the website,
but
3:27
I do like that header hero section
here on the left here again.
3:29
It's another example of having the badge,
or
3:32
whatever you like to
call this design element.
3:35
Really stand out and
be a centerpiece that draws your eye in,
3:38
but also overlap sections in the menu.
3:43
So it gives it more of
a dynamic modern feel.
3:46
This example is also more clean-cut and
defined.
3:50
I like the call to action here,
both the layout and colors.
3:53
The placement of some of the text makes no
sense and has a lot of errors in it and
3:56
it's cut off in places, but still,
it gives me the general direction.
4:00
I see that it should be a large
bold Serif font for the header.
4:05
The subheading is all capitals.
4:09
Our paragraph text is slightly
smaller than the subheading,
4:11
and then we have our
call to action button.
4:14
However, I don't know if two
buttons are needed here.
4:16
And if I were to use two CTAs, a main and
a secondary, I would more than likely
4:19
place them side by side, but again,
this is just to get us thinking.
4:23
We also have some basic design
patterns for a product or
4:27
feature section on the left and a product
gallery on our design to the right.
4:30
Nothing extraordinary here, but overall
there's some decent design inspiration,
4:34
so let's keep the ideas flowing.
4:39
Okay, we're going to put forward/imagine,
Enter, Web design layout for
4:41
an artisan bakery, modern,
sleek luxury, aspect ratio 9:16.
4:46
Let's see what we get, but
I'm hoping for more of a sleek design,
4:51
more negative space, more spacing,
more cleanness, more attention to detail.
4:55
Let's see what we get compared
to our previous designs.
4:59
Okay, see, Midjourney has made a few
interesting design choices, like where,
5:04
as before, we were getting a lot
of lighter colors and earth tones.
5:08
These are already starting out with a
darker palette using black with white and
5:11
gold for accent colors.
5:16
I'm a fan of this direction as well,
I like the imagery on the left here.
5:17
It actually reminds me of some designs
that we got in the video AI tools for
5:21
designers.
5:25
We had some creations in this realm,
so that's pretty interesting.
5:25
I absolutely love the imagery
on our design to the right.
5:30
I feel like the baked goods on
the different textured surfaces along with
5:33
the coffee beans added
context to the composition.
5:37
To be fair,
the design on the left also did this.
5:40
It featured a cake placed on a gold plate,
5:43
accompanied by golden utensils
all set on a wooden table.
5:45
Both of the designs feature images that
add layers of context to the design and
5:49
brand identity to help sell the voice and
tone of the design.
5:53
However, it almost seems like the design
on the left features two hero sections.
5:57
Even if the second section,
with the pastries and berries spread out,
6:02
continued to tell the story or was going
to act as a call to action section.
6:06
I would still move it
further down the design, so
6:09
it doesn't come directly
after the hero image.
6:12
And I would put a few different
sections in between for variety.
6:14
This would help the design feel
more unique and less repetitive.
6:17
I've observed that many of the images for
various sections and
6:27
categories are either circular or
plain squares.
6:30
However, I'm particularly
drawn to these rectangles.
6:33
They're unique and stand out,
especially in this last example,
6:35
I'm not sure if the items are pastries or
possibly marshmallows,
6:39
but they're visually captivating.
6:42
These images truly pop
against the dark design.
6:44
I like these design element
decorations here, very, very cool.
6:50
It's looking pretty simple over here,
nothing that stands out to me.
6:54
This menu, however,
does stand out, it pops.
6:57
I don't think it necessarily fits, though,
but it's still something to consider.
7:00
Now over here to the left,
Midjourney has nailed this direction.
7:08
Well, minus the duplicated gold emblems or
7:11
sets of gold typography
acting as the logo.
7:13
I would say you only need that once,
but back to what I was saying.
7:16
Between the black and gold theme with
the perfectly composed hero image that
7:19
features a dark silhouette giving room for
the nav bar elements.
7:23
And putting focus squarely
on the bakery's products.
7:27
Midjourney has nailed this luxury design.
7:30
It's simply wonderful, in my opinion.
7:33
I like the different styles we have here,
so that's cool.
7:39
These are really good so far, but let's go
back to Discord and we're gonna try again.
7:41
Same prompt, just like before.
7:46
Let's re-roll our last prompt, and we'll
see our four new options from Midjourney.
7:52
All right, both of these
designs look quite clean, and
7:57
they seem to be sticking with
the same theme of centered elements,
7:59
where everything is center aligned,
but that's all right.
8:03
I like the idea of this more custom font,
maybe even a hand-drawn serif font,
8:09
so that has me thinking.
8:14
I also like that we're starting to get a
little bit more diverse with our pastries,
8:15
and treats, and elements.
8:19
Because we were getting
a lot of bread at first, and
8:20
bread still seems to be the center
point of all our hero images.
8:23
So I'm just gonna try to
adjust the prompt a bit.
8:26
Back in Discord,
we'll use our imagine command and
8:29
our new prompt will be website
design layout for an artisan bakery.
8:31
Modern, sleek, luxury, but this time we're
adding variety of baked goods, pastries,
8:35
cupcakes, cakes, breads, treats, etc.
8:40
This should hopefully diversify some
of the images we're getting, and
8:43
of course I stuck with
the aspect ratio of 9 by 16.
8:47
Okay, let's open these in the browser.
8:52
These definitely look
a little different here.
8:57
I love the white as it's bold, it pops,
it shines, but The black's good, too.
8:58
It certainly works, but I don't know.
9:03
This is a tough choice for me.
9:06
I feel like the design to our left really
gives off the artisan rustic tone,
9:08
but I feel the design to our
right is more warm and inviting.
9:12
And of course,
that's what we're looking for, I think.
9:16
But this is where talking to the client
would come in handy and getting a feel for
9:18
that person's personality.
9:22
As well as the business's personality and
goals, so you know what you're aiming for.
9:23
I'm also digging how the design on
the right is using drop shadows to help
9:30
the header and badge elements pop and
stand out a bit, While
9:34
the badge at the top aids in conveying
the bakery's vintage, and rustic ambience.
9:39
I'm also a fan of how they've paired
these treats with the pictures.
9:48
With the totally white backgrounds,
it feels like they're just sitting there,
9:52
almost like they've been cut out or
something.
9:56
I'm into that aesthetic,
all right, not bad at all.
9:58
Let's give another version a shot.
10:02
All right, for the third version of our
prompt, we're gonna use web design layout
10:04
for an artisan bakery,
handcrafted warm, earthy tones.
10:08
And we're going to include variety
of baked goods from that last prompt
10:12
modification as that seemed to work.
10:16
This time I kind of wanna lean into
the handcrafted artisan direction,
10:18
that sort of feel.
10:21
I wanna go for something a little more
different, a little more traditional,
10:22
and I don't necessarily wanna go for
luxury on this round.
10:26
Now this part right here
kind of gives off a menu or
10:32
maybe an ingredient section vibe, right?
10:34
It's got the potential to be like
a poster or even an infographic.
10:37
But with our individual product pages and
category page,
10:40
plus a couple other features,
this concept could be a winner.
10:44
We should consider exploring this
avenue more, but let's continue on.
10:48
And just overall I'm really loving
the improvement in the images.
10:53
I feel like this is our most
diverse set of images yet.
10:57
I'm very happy with the results this time.
11:00
Let's check out the bottom two designs.
11:02
Okay, on this design to the right,
I would put some text underneath here,
11:13
like a paragraph text.
11:16
I wouldn't necessarily put this image
above four different categories, but
11:18
it all just depends.
11:21
I can see what MidJourney
was trying to do there, but
11:22
I think it's more of
an error than anything.
11:25
Again, I think this cutout look on
these design elements here are nice.
11:32
Well, I know these are actually circles,
but I think it still works.
11:35
Let's reroll this another time, I feel
like this prompt gave us great results.
11:40
Okay, I'm really digging the photography
here, the composition is on point.
11:50
I'm also quite into this part where
we're introducing some sans serif fonts.
11:54
It's a fresh change,
really stands out and contrasts well.
11:58
I'm also quite fond of this section here.
12:01
It's got this warm,
12:03
rustic vibe that kind of puts all
the focus squarely on the food.
12:04
It feels like we're really
spotlighting the food here,
12:09
putting it front and center.
12:11
Making it the star of the show,
I'm all about that.
12:13
However, this part with the dividers is
a bit hit or miss and a tad rough, but
12:16
I appreciate the direction it's taking.
12:20
I gotta say, I'm not super keen on
the little circular faded images.
12:22
They're just okay,
not too exciting or anything.
12:26
This design on the left is giving me
majestic vibes, I really like it.
12:31
And again we have some strong photography
used in the design to our right.
12:35
Overall, this was some quality work,
I'm quite impressed.
12:39
But let's head back to Discord
to use our last prompt.
12:42
For our final prompt, we're going to use
Web design layout for an artisan bakery,
12:46
bold, loud, bright, modern,
unique patterns, backgrounds, and
12:51
elements, variety of baked goods.
12:55
And this version of our prompt is
going to be our most diverse and
12:57
something that tries to really take us off
the beaten path of what we've created.
13:00
Let's see what we get.
13:05
Alright, the right side here is rocking
an awesome hero image and header.
13:09
I'm really into the floral
design elements.
13:13
They have this hand-drawn or
maybe painted vibe,
13:15
kinda watercolor-esque,
which is a really cool approach.
13:18
It doesn't exactly mirror real flowers,
but
13:21
the food in the image
looks super authentic.
13:23
I find this mix pretty captivating, plus
the backdrop with its vibrant reddish pink
13:26
hue just pops, adding a lively contrast.
13:31
I love how the flowers kind of
spill into the next section,
13:35
giving it a bit more depth and breaking
away from the usual boxy patterns.
13:37
This image is really catching my eye.
13:41
The design has this lively, playful
vibe that just kind of jumps out at you.
13:43
But this is where we really need
to dive deep into brand strategy?
13:47
I'm really digging the cakes here and
the assortment of treats.
13:51
They have this original, one-of-a-kind
vibe, really catching the eye.
13:54
Both designs at the bottom
have a nice visual draw, but
14:00
I gotta say I'm particularly
drawn to the design on the right.
14:03
It's just bursting with energy and
14:07
has this upbeat feel to it seems like
a website that'd be fun to visit.
14:09
Again, we have an example
of these cutout images or
14:14
product images with no background, which
I must admit I've enjoyed every time mid
14:17
journey has featured
this style of pattern.
14:22
But let's head back to
Discord to try again.
14:25
All right, so we'll do one more.
14:29
Let's click this refresh button one
more time, and then I think we're going
14:30
to have a lot to work with as
far as design inspiration goes.
14:34
All right, let's dive into this,
I'll pull it up in the browser.
14:37
Okay, this bit over here on the left side
of the design is really catching my eye.
14:40
Our hero image is just stellar.
14:45
We've got this array of pastries
mixed with floral elements, and
14:47
the colors are just popping so vibrant.
14:50
It's kind of giving me
this rich cultural vibe.
14:53
This project feels really good,
14:56
I'm even getting a bit of an Indian bakery
feel thanks to those bold, bright hues.
14:58
It's honestly fantastic, a true departure
from what we've crafted before.
15:02
Now the right side here has a solid yet
more familiar feel to it.
15:07
Keeping to our usual palette of golds,
browns,
15:11
and earth tones along
with the badge elements.
15:14
I'm leaning towards using these
cutout images in various sections.
15:27
I'm really liking the standout effect
they're bringing to the table.
15:31
Design on the right possesses a unique
blend of simplicity and elegance,
15:46
I'm fond of the font pairing.
15:50
The cursive thin stroked font combined
with the slender all caps Sans serif,
15:52
I think that could work as well.
15:57
The hero section on the left
design has got something going on.
15:59
It's definitely catching the eye,
visually speaking.
16:02
But to be honest that seems to be the main
highlight of this page the rest of
16:05
the design isn't really doing much for
me still this bit is pretty neat.
16:09
I reckon we got a bunch of material
to play around with in discord so
16:13
let's head back.
16:17
Now, I'm going to upscale my favorites
from each set of generations.
16:19
For example, I'll choose the first and
fourth from our last set.
16:23
I love those bold colors in the first and
the eloquence of the design in the fourth.
16:26
Next, I'll download these
upscaled versions and
16:31
bring them into Figma where we can
start sorting our design inspiration.
16:33
I'll see you there.
16:37
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up