Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Designing with Generative AI!
You have completed Designing with Generative AI!
Preview
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