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
Finally, we'll transform our wireframe into a high-fidelity mockup in Figma, utilizing design assets created in Midjourney.
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
Hello everyone and welcome back.
0:00
When we last left off I had just finished
our wire frame for the home page,
0:02
based off the design inspiration
I got from Midjourney.
0:06
I had put together a wire frame collage or
quilt of design patterns by pulling
0:10
sections from several of the homepage
layouts Midjourney generated.
0:13
Then I drew out the actual wire frame
based off the patterns I chose from
0:18
Midjourney.
0:21
Now I'll turn this wire frame
into a high-fidelity mock-up.
0:22
Now as you'll notice,
this is our original wireframe,
0:26
what we had based off
the design inspiration.
0:29
So let's just take a look
at it real quick again.
0:32
And you'll see these basic patterns on our
left are all mimicked by the patterns on
0:39
the right from our inspiration.
0:43
And of course our wire
frame is a little longer,
0:56
a little bigger because it has more
content and it's more lifelike,
0:59
whereas the original inspiration was
stuck down to a 1024 by 1024 resolution.
1:03
One note before we begin, between videos
I took the time to update my wireframes
1:08
placeholder text with actual text
that I generated using Chat GPT.
1:12
So, give me one moment and
I will switch over to that.
1:16
But before I do, I wanted to let you know,
1:19
I will be including a link to
that entire conversation below.
1:21
So, you will see the prompts and
what I use to generate all the texts.
1:24
All right, let me switch over to our
other version and we'll be right back.
1:28
Here's our wire frame,
1:32
once again based off the design
information that we got from mid-journey.
1:34
But this time it's all using real website
copy that I generated using ChatGPT.
1:38
So let me actually zoom in a little
more and we'll be able to focus on our
1:43
wire frame and kind of see some
of this real text that we have.
1:47
So there's still a few spots where we're
using a bit of placeholder text, but
2:02
that's just to see if we're still
gonna use those like for the buttons.
2:05
I'm not sure if those will stay or not.
2:08
They may, they may not.
2:10
The customer review,
we have an actual customer review there.
2:12
See all the content is accurate.
2:16
Now we just have to start designing.
2:18
All right, so
now that we're back at the top,
2:30
the first thing we're gonna do is start
making these passes through the design.
2:32
Like the first pass will work on the text.
2:37
I'll get all of the text
formatted to a uniform style, and
2:40
then I'll go through and generate my
images, then import those images, and
2:43
from there I'll start adding colors and
finalizing placement.
2:47
And once again, this is a demo
to show you what's possible.
2:51
This won't be a 100% perfect work of
art or a perfect client project or
2:55
anything of the sort, but
I did wanna show you what's possible.
2:59
All right, so first thing we're gonna do
is get to work on making sure all of our
3:02
text and fonts are sized properly.
3:06
And the system I kind of have going
right now are these large headings, or
3:08
our h1 will be 44.
3:12
The alternative smaller
version will be 36 pixels.
3:14
Our h2 will be 28 pixels.
3:17
Our h3 will be 25 pixels,
h4 will be 22 pixels, and
3:20
our paragraph text will be 20 pixels.
3:24
All right, so let's go ahead and just jump
in and start adjusting some of our text.
3:27
Okay, so this should be 44 pixels,
and this should be 28 pixels.
3:33
So actually one more.
3:38
I'm actually gonna make
this a little smaller.
3:43
There we go.
3:47
This is 20, right?
3:53
Yep, this should be 20 and
my button text should be 22 pixels,
3:54
I'll also aligned the button
text with the button shape.
3:58
All right, just resizing and
lining everything up.
4:02
And it looks like my hero
section is good to go.
4:10
I know it can be hard to tell at
this early stage of the design, but
4:13
once all of our text elements have the
appropriate styles, our design will take
4:16
its first step towards looking and
feeling more consistent and professional.
4:21
But with that said, I'm gonna take
a moment to apply the appropriate text
4:26
styles throughout my design.
4:29
I'll be right back.
4:30
All right, now that the text elements have
been properly styled, let's get started.
4:32
I'm gonna delete my section frame for this
hero section as we no longer needed, and
4:35
I'll delete more of the frames
as we work through our design.
4:39
Matter of fact, let's get rid of the frame
for the feature section as well.
4:43
Let's briefly take a moment to review the
wireframe now that we have a majority of
4:49
actual text,
as well as proper stylings and
4:52
a bit of finessing regarding
the spacing and alignment.
4:54
As you can see there has been some
minor improvements overall and
4:59
things are already starting to
come together for my design.
5:02
Now I have a list over on my other
monitor of what all we need.
5:13
But from what I understand here we
have these feature section images,
5:16
the subsection images, which we
need a heading for this subsection.
5:20
Hold on one second, let's see here.
5:24
All right, there we go.
5:29
Now we have that properly labeled.
5:30
Yep, all right, so we're going
to start working on the images.
5:32
Now like I was saying, there's three in
this section, eight in this section, and
5:35
if you keep going down,
there's a few other places we have photos.
5:39
And when I tallied it up,
it's at least 18 images.
5:43
So let's head over to discord.
5:47
We're going to start generating
some of those images, but for
5:48
the sake of timing this video, I'm not
going to generate all 18 on camera.
5:52
However, I will do a couple from
each section to kind of give you
5:57
a taste of how to do it yourself.
6:00
I wanna run you through the paces and
show you what I'm doing as well.
6:02
So let's hop over into discord.
6:06
All right, now that I'm back in discord,
6:09
I'll head to the photography
channel in my personal server.
6:11
Here I'll start generating images for
our main three categories or
6:14
products in our features section.
6:18
So we need images for customized cakes,
seasonal pastries, and artisan breads.
6:20
Now for our first prompt, we'll use up
close photography of a customized cake
6:25
from an artisan bakery, white background.
6:29
And what I'm hoping to get with the white
background is an image of the pastries or
6:32
cakes or whatever we're looking to get
generated strictly on a white background
6:35
close to solid white as possible.
6:39
So we can cut that out and
just use the image of the subject.
6:41
Okay, awesome.
6:44
I think this third one is perfect
just because of the composition,
6:44
the white background.
6:48
That's pretty much what we're looking for.
6:50
Yeah, yeah, I think that's perfect.
6:54
Okay, so we'll try this again,
6:58
this time let's try to generate
some of the seasonal pastries.
7:00
So we'll type up close photography of
seasonal pastries white background.
7:03
And again, I'm hoping for
similar results to our last generation.
7:08
All right, I think this first one
will be just fine for our needs.
7:19
Now let's work on that subsection,
7:24
which had a few categories such as wedding
collection and anniversary specials.
7:26
So let's start with
the wedding collection.
7:30
Okay, let's try again,
we didn't get anything solid white.
7:43
My next option if it doesn't
create anything solid white,
7:46
would be to take this second image and
try to use the zoom out feature and
7:49
then see if we can get it from there but
7:52
we'll try again as last time rolling
twice it got us the result we wanted.
7:54
I'm gonna try making variations
of this third one and
8:00
if making variations doesn't work, then
I'm just going to upscale the image and
8:02
once I upscale it we can
try the zoom out feature.
8:06
All right, Midjourney seems to be taking
a while to generate the new set of images,
8:14
so I'm gonna upscale this
third one in the meantime And
8:18
we'll choose to zoom out
on the image by 1.5 times.
8:23
I'm hoping this will leave us with a full
image where the cake isn't cut off.
8:27
Zoom out still didn't work
out quite like I hoped.
8:35
I guess I'll go back up to
my previous generations and
8:39
see what I think could work best.
8:41
At this point, I'm thinking if I can
get a decent full-size cake image,
8:44
then I can try removing the background
in another design program later.
8:48
Let's go with the first
image from this group.
8:52
Let's try this one, and we're just gonna
try to cut the background out later before
8:56
bringing the image into Figma.
9:00
Software is pretty good
at this these days, so
9:02
it may be able to handle this for us.
9:05
But let's work on our next image.
9:08
This time I'm gonna try to generate
an image of an anniversary cake.
9:10
So I'll use a prompt of up close
photography of a heart-shaped cake for
9:13
an anniversary white background.
9:17
Okay, I think all of these
kind of came out good.
9:20
Let's use number 3, no,
no, let's use number 4.
9:22
Yeah, I think that works for
what we're looking for.
9:25
Next, I wanna hop back into Figma just so
I can show you.
9:30
Each of these background pieces should
be a badge, and let's go back up to our
9:33
inspiration and we'll kind of show off
what that is supposed to look like.
9:36
These right here.
9:42
So these square placeholders should be
those badge elements once we're done.
9:44
So let's jump back into discord
where I'm gonna try to generate
9:50
these badge elements.
9:52
This will certainly be a bit more tricky,
but let's give it a shot.
9:53
I'll use the prompt,
elegant square black badge design, vector,
9:57
flat, white background.
10:01
And with this one,
I don't know if it'll work 100%.
10:04
I may have to do it a few
times because again, it's AI,
10:07
we never know what we're gonna get.
10:10
All right, while these look neat,
they're not exactly what I'm after, so
10:14
I'll try re-rolling a new
set of four images.
10:17
Let's try again.
10:22
Nope, I'm still not
getting what I'm after, so
10:24
let's try iterating on our prompt.
10:26
Next I'll try elegant square black
badge vector, flat, white background.
10:31
So I'm just taking out the word design,
but
10:36
I'm hoping that makes my intent
more clear to mid-journey.
10:39
Going for these type of vector images,
especially like these badges or
10:42
design elements.
10:46
They can be really abstract, so they can
be interpreted in many different ways,
10:47
so these can be real hard to generate.
10:52
Yeah, see that even took us
further away from what we wanted.
10:54
Let's try again,
10:57
this time I'll go back to my original
prompt since I like those results better.
10:58
So I'll type in elegant square black badge
design, vector, flat, white background.
11:01
Our old cake image prompt finally
finished, I thought it had errored out.
11:15
Well, while I wait on my badge elements,
I'm going to try another prompt iteration.
11:20
This time it will be elegant
square black badge design,
11:24
gold trim vector, flat, white background.
11:28
And it seems that was a good choice
because our latest generations are still
11:30
failing to hit the mark for
what I'm looking for.
11:34
But I wanna be clear, I wouldn't blame
mid-journey, I'm not getting exactly what
11:36
I'm after because I don't know
the exact prompt to achieve it.
11:40
Awesome, these images came out really
well, and while none of them are perfect,
11:49
I think I can work with the third image.
11:54
I think I can edit the middle element
out to leave a blank black background in
11:56
the center of the gold trim.
12:00
This should be especially easy to
accomplish using Adobe Photoshop's
12:01
generative fill.
12:05
So let me upscale this image and
I'll be good to go.
12:06
All right now some of the other
images we need are some photography.
12:09
So let's do a photo of Sarah Jenkins.
12:13
And you'll remember she's
our client's customer.
12:15
All right and
I think the second one works just fine.
12:19
Yep, this certainly will work.
12:23
Next, let's generate an image for
our team or staff section.
12:25
I'll use the prompt photo of a 48 year old
operations support manager for a bakery.
12:28
Male Matthew Davis.
12:33
This time I even put the name
of our fictional staff member.
12:36
You don't have to really do this,
and I don't have any proof or
12:39
anything that this works or has an impact.
12:43
I'm just experimenting and
12:45
seeing if it does anything at
all to influence our results.
12:46
All right,
I think I like number four the most.
12:53
All right, that looks good.
12:59
Now from here I think I'm
going to generate the rest of
13:00
our content that we need.
13:03
And then I will meet everyone back in
Figma, all right, I'll see you there.
13:04
All right, welcome back to Figma.
13:08
Now for
our next part we're gonna run through and
13:10
replace all our image holders with images.
13:12
And the first thing you might notice is
I took off all the x's off my images,
13:15
there was a reason I did this.
13:19
I didn't want them to get in the way when
I started overlaying images, especially in
13:21
some places where I'm going to swap out
the image with the background shape.
13:25
So I just didn't want
any interference there.
13:29
This just made it a little easier for me.
13:31
But all right, let's see.
13:35
We can start off by
zooming out right here.
13:36
Next I'll move our sitemap out of the way
as it's no longer needed at the moment.
13:39
Then we're going to go to File,
Place image.
13:45
All right, now let's highlight all of
our images that we're exporting and
13:51
press enter.
13:54
For me, it's this entire folder.
13:55
Then I will click place all.
13:59
Next, I'm gonna go over to the control
panel on our right and select auto layout.
14:01
And then I'll change the settings from
horizontal stack to vertical stack.
14:05
Next, I'm gonna organize our images into
groups, by the section they belong to.
14:18
I'll start with these team or
staff section photos.
14:23
Then I'll start grouping all of these
product images for our feature section.
14:36
Let me move our staff images down
to make room for everything.
14:47
Great, now I'll bring our badge frame
down as well as our image for Sarah and
14:55
the background image for our CTA section.
14:59
Now I'll take a moment
to line up everything.
15:07
That's a little better.
15:16
There seems to be too many
items to make it perfect but
15:17
as long as it's close it's good enough for
me.
15:19
For our first section, we'll start
down here with the team section.
15:25
I'm going to start bringing images in and
15:28
instead of trying to line them up exactly
with our placeholders, I want the image to
15:30
replace the placeholder and be confined to
the placeholder's dimensions, like a mask.
15:35
First, let me make this image a little
smaller so it's easier to align and
15:41
combine with my image placeholder.
15:45
I keep selecting other elements as well.
15:47
Now I'm losing the original proportions.
15:49
Let me undo.
15:51
All right, I'll resize the image
while maintaining the proportions,
15:53
by holding down shift while
dragging any of the corners.
15:56
Next, I'll line up the image
with the placeholder,
16:00
while ensuring a piece of
the placeholder sticks out.
16:03
This is so I can select both
elements at the same time and
16:06
then apply the masking effect.
16:09
Perfect, now the image is inside
the area that the placeholder took up.
16:12
We can still move and adjust our image,
but if we were to enlarge it, for example.
16:16
You would only see the part of
the image that fits in the placeholder.
16:20
Next, I'll bring in this image for
Rebecca and place it in.
16:27
Then I'll do the same for Carlos here.
16:45
Let's line it up, okay, perfect And
16:53
finally, let's bring in this image from
Matthew, I'll decrease the size and
17:01
bring it over like the previous images.
17:04
Awesome, our team section
looks pretty good.
17:15
All right, that'll do it for
the team section, but
17:22
before I move on, let me delete this
section frame I created earlier.
17:25
I bet the layer is locked.
17:28
Let me go into the layer panel and
unlock it.
17:30
Then I should be able to delete it.
17:32
Perfect.
17:37
Now, I'll head back up to
the features section and
17:40
start bringing in all of the pastry
images I generated in mid-journey.
17:43
First, I'll start with bringing product
images over into this main section with
17:51
three columns.
17:54
I know my original idea was
to delete these circles and
18:00
just have the cutout images, but I feel
like the circles helped them pop a bit, so
18:03
I think I'm gonna leave them in.
18:06
Once we have our images for
all three columns inserted,
18:33
now it's time to do the same for
this subsection of eight categories.
18:36
And we're just dragging, and dropping
them in to bring them into our frame.
18:39
And then we're resizing
each image one by one.
18:43
Okay, now I'll take a second to
resize the subcategory images.
19:03
The subsection is of lesser
importance than the main section, so
19:07
my elements should be a bit
smaller to reflect that.
19:11
Okay, it looks like 188 by 188 is a nice
size for these smaller subcategory images.
19:13
I'll make sure each image is 188 by 188,
19:20
just to create more
consistency within our design.
19:23
Okay, next I need to start bringing
in the rest of my subcategory images.
19:31
It looks like our image for the holiday
specialties, which feature a Yule log,
19:41
still has its background.
19:45
Normally, I would go back and
take it out, but
19:47
I don't think it's a huge deal for
this demo, so I'll leave it like it is.
19:50
Let's bring in our last pastry, and
we'll have our eight subcategories.
19:56
The image for gift baskets and
holiday stuff.
20:02
All right, this Feature section
is coming together now.
20:12
Up next, we'll work on
the Customer Reviews section.
20:14
First, I wanna make these elements a bit
bigger, especially the text elements.
20:19
Okay, I can't just resize
them like a shape,
20:24
as the auto layout setting
doesn't agree with that.
20:26
No worries, we'll just increase the size
of our text, let's go with 30 pixels.
20:29
Then let's make the subheading for
Sarah's name larger.
20:45
Let's try 36 pixels.
20:48
Okay, that looks better, but
it competes with the main header, I feel,
20:50
so let's make it a little smaller.
20:53
Okay, yeah, 28 pixels is a good medium.
20:54
And lastly, I'll increase
the size of my image placeholder.
20:59
Next, I'll bring in my image of Sarah.
21:04
Start resizing the image
to make it smaller.
21:07
And then,
we will insert it into our place holder,
21:09
just like we did with our images for
the Team section earlier.
21:12
Perfect, now I'll take a second to delete
the section frame for the Customer Reviews
21:19
section, as well as the About Us section,
since I'm already here.
21:24
Now, I'm gonna group this set of
elements together as a section, so
21:30
I can move them all in once and
just line them up a bit more.
21:33
Awesome, let's take a look
at our page overall.
21:42
Okay, not bad, I think our design is
really starting to come together.
21:45
Now, let's work on our
Call-to-Action section.
21:54
For this section,
21:57
we're going to use this image generated of
the interior shot of an artisan bakery.
21:58
And we're going to make it the background
image of this Call-to-Action section.
22:02
So let's mask our image with
the placeholder shape as we've been doing.
22:12
And then, line up our image.
22:18
Now, if you notice, we have lost
all contrast between the text and
22:23
the background, making the text hard
to read, but we're going to fix that.
22:26
First, I'm gonna change
all the text to white, so
22:49
it will pop against
the dark colors better.
22:51
But I will also add an overlay as well.
22:53
So let's make a rectangle here.
22:57
I'll make it black, and ensure it
lines up perfectly with our image.
22:59
Next, we'll make sure there is a level
of opacity, so we can see our image.
23:02
However, not too much opacity, to where
it becomes hard to read the text again.
23:06
Then we'll move the layer for
the rectangle in the layer panel.
23:17
We'll move the layer for this element to
be above the image, but below the text.
23:20
This is where naming your layers and
groups pays off, which I would do in
23:24
an actual project, but neglected
to do with this demo to save time.
23:28
There we go, I think that's looking good.
23:35
Let's zoom out to see how
everything is tying together.
23:39
No, it looks like we lost
the sections below our CTA section.
23:44
Let's try troubleshooting this issue.
23:47
Our missing elements seem to be at
the top of the layer panel, and
23:53
the layers are all set to visible,
it looks like.
23:56
I can't seem to figure out
what the issue is exactly.
24:08
All right,
I'm just going to use the trusty Ctrl+Z or
24:11
undo feature to go back to before we
added our image and transparent layer,
24:13
then we'll quickly rebuild it.
24:17
All right,
there's all of our lost elements.
24:22
Now that everything is back,
let's start from here.
24:24
We'll add our image again and mask it,
then we'll make all of our text white.
24:29
Create our rectangle,
add opacity, make it black.
24:37
Now, just like before,
24:45
we wanna move the transparent rectangle
layer between our text and image.
24:46
Then I'll just line that up perfectly so
it covers our entire background image.
24:50
Okay, now, we have our CTA section, and
24:56
we still have the rest of our
sections below it, perfect.
24:59
All right, what's next?
25:10
I know.
Let's knock out the About section.
25:11
For here, we'll use this badge-like
design element I generated in Midjourney.
25:13
Let's drag it in and resize it.
25:17
Then I'll line it up as best as I can,
let's resize it a bit.
25:19
Next, I'll duplicate the badge for
our other two sections and line them up.
25:42
There we go, that looks great.
25:51
Now, I'll delete our gray
placeholder rectangles.
25:53
Now, I'll make all of the text
elements on these badges white, so
25:57
they can actually be read.
26:00
All right, now I need to resize and
align our text a bit more, so
26:08
it fits within our badge.
26:11
We still want the elements inside to have
room to breathe, and not hit the edges
26:13
because that will start to feel cramped
and tight causing visual tension.
26:17
Let's resize these
sub-headings from 22 to 20.
26:25
This will help them fit
within the badge better.
26:28
And the bold width with all caps provides
enough contrast to our regular 20 pixel
26:31
paragraph text.
26:36
Next, I'll center our paragraphs.
26:39
This is looking perfect.
26:57
Awesome, now, let's see how
the rest of the site is looking.
27:00
It's looking much better.
27:03
I'm happy with the results
from our AI generated content.
27:05
Next, I can start adding background
elements to provide separation and
27:11
contrast between each section.
27:15
I don't have to do this for
every single section, but
27:17
it does help add variety and
break up the page.
27:19
Okay, I'm having some trouble getting
my rectangle layer underneath the other
27:25
elements.
27:29
So I'll just delete the background
rectangle and start over.
27:29
I'll first create a rectangle, then I'll
push it to the bottom of our layer panel,
27:33
thus pushing it behind all
of our section elements.
27:37
After that, I'll use the color picker to
sample a color from our images to get
27:41
a lighter shade from my background here.
27:45
Okay, for my last challenge of the demo,
I wanna work on the Hero section.
27:49
I'm gonna hop back in Midjourney
to generate some pastries and
27:53
design elements such as
water-colored flowers, and
27:56
I'll be right back to see
what we can come up with.
27:58
All right, let's import our
assets we saved from Midjourney.
28:02
We have two flower designs and a plate of
pastries, one with the white background,
28:10
one without.
28:14
First, I'll drag the plate of pastries
with the transparent background into
28:16
our frame.
28:19
Then I'm gonna take the layer for this
element and move it below all our text and
28:20
surrounding elements.
28:24
From there, I just wanna find a placement
and composition that makes sense and
28:29
feels right.
28:33
Let's try over to the left here.
28:34
This isn't terrible, but
let's try the right.
28:36
Okay, let's move it to the center here.
28:40
I'll make the image a bit smaller.
28:50
Okay, yeah, I think I'll keep it there.
28:52
Next, I'll bring in one
of the two flower assets.
28:54
Let's resize it to make it a bit smaller,
then I need to rotate it.
28:58
Let's see, mm-hm.
29:02
I'm used to doing this in Adobe XD where
you would hit Ctrl+T, then rotate it.
29:04
Let's see.
29:08
Okay, you just hover on the outside
corner of an image to get the option to
29:13
rotate it.
29:17
I'm gonna press Ctrl+Z
a few times to undo, so
29:22
I can go back to when
the image was full size.
29:25
I'll then play around with
the positioning and size from there.
29:28
I'll put this first one to the left
of our plate of desserts, and
29:35
push the layer to the very bottom, so
it's behind all of the other elements.
29:38
Now, I'll bring the second floral
design element into the frame.
29:43
So let's resize it to make it smaller.
29:51
Then I'll line it up and
29:55
just play around with it until I
find something that feels right.
29:56
I like this placement here, but
30:09
I want the image to be below
all of the other elements.
30:11
So, let's move it down
in the layers panel.
30:13
Perfect, this is looking solid.
30:17
But we need to add some contrast
between the plate of pastries and
30:19
the text on top because it's hard to read.
30:22
So I'm gonna add a shape
layer of a circle and
30:24
create an opacity to create more contrast.
30:27
We'll make the circle white,
add some opacity, and
30:30
I'll move the layer below all the text,
but above the image.
30:33
All right, that's looking much better.
30:44
Next, I think I'll tweak
our call to action button.
30:48
I'll make the color a reddish pink, which
comes up in the flowers and pastries.
30:50
Then I'll add this styling to all of
our other buttons to keep that same
30:54
consistency throughout our design.
30:58
I'll even adjust our Call-to-Action
button in the Call-to-Action section.
31:15
Here, the button looks a bit darker
because of the button's opacity and
31:19
the black shape layer underneath.
31:22
I'll leave this as it is, but if I
wanted to I could get the hex value for
31:24
our reddish pink shade from
our previous buttons, and
31:28
use that instead of using RGB with alpha.
31:32
Next, I'm gonna create another rectangle
to use as our background color for
31:34
our Footer section.
31:38
Next, I'll make the background of
this Footer section the same shade as
31:50
the Specialized Collection section.
31:53
All right, now,
I'll just look the site over and
31:58
make a few touch ups when it
comes to alignment and spacing.
32:01
I completely forgot about our nav bar.
32:15
Let's add a background color to it.
32:18
I think I'll go with a green shade,
maybe even add an opacity.
32:19
And there we go.
32:23
Now, of course, I could keep making
adjustments to improve this design even
32:25
further, but I think this is enough for
you to get the picture.
32:28
So what did you think?
32:31
Do you like what I was
able to make with AI?
32:32
If you followed along on your own project,
did AI speed up your design process?
32:35
Awesome, if you wanna build
upon this project even further,
32:40
why not make the rest of our pages with
the sections included from our site maps?
32:43
I'll leave links to everything
in the teacher's notes, so
32:48
you can reference them and
try them on your own.
32:50
But that'll do it for this video.
32:52
I'll see you in the next one,
happy designing.
32:54
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