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
Next, we'll construct our wireframe in Figma, taking inspiration from our creations 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, and welcome back to
Designing with Generative AI.
0:00
In the previous video,
I managed to merge and
0:04
blend my design inspirations to
create a wireframe quilt or collage.
0:06
This will act as the foundation for the
design patterns I will use in my design.
0:10
I'm gonna extend the desktop frame and
make it longer.
0:15
So we can start creating some sections and
start building out this wireframe.
0:18
Okay, right now, we'll just keep it
the same length as our inspiration dock.
0:22
All right, to start off, I'm gonna start
creating rectangles,and I'm gonna try to
0:29
create them about the same size as
the sections that are being taken
0:33
up on the desktop inspiration space.
0:37
And then we're gonna make the background
white so it looks transparent, and
0:39
we're going to add a black stroke.
0:43
Again, this is just supposed to be
the outer square of the frame, just so
0:45
you can differentiate
between each section.
0:49
And again,
I'm just gonna keep duplicating these and
0:52
bringing them down until I have one for
every section.
0:55
But I'll fast-forward this part, and
then I'll be ready to start my wireframe.
0:57
So let's start with our nav bar,
and inside the bar,
1:04
we're gonna create each of our links.
1:07
It's similar to our original
design inspiration.
1:09
And we'll put three links,
both to the left and the right.
1:21
I'm gonna put the logo or
the name of the business in the center,
1:26
then make that logo a little bigger.
1:30
I'm gonna make it bold as well.
1:32
All right,
now I'm gonna duplicate that text element,
1:35
so we can start making
some of these links.
1:38
But of course,
I'm gonna have to adjust my text settings.
1:40
Let's make the font weight Regular, and
1:43
let's bring that size down
a little back to 26 pixels.
1:46
Let's duplicate that for
our second and third links.
1:49
Then I will highlight all my links and
duplicate all three.
2:03
So I can have links 4, 5, and 6.
2:06
Let's go ahead and extend this
navbar background a little bit.
2:08
And then I finish labeling my links here.
2:14
Perfect, that'll do it for our links.
2:28
Now I'm gonna create our heading or
heading one.
2:32
I'm gonna make this text bold,
and we're gonna make it real big.
2:34
So let's just pump it up here.
2:38
Let's try 52 pixels.
2:39
That looks pretty good for
the header section.
2:43
Perfect, and here we're just gonna
duplicate that and create our subheading.
2:44
For the subheading,
let's take our font size back down
2:49
Let's take it back down to 42.
3:00
Let's try Thin.
3:02
That's too thin.
3:05
Okay, let's try Light, and we're gonna
increase the letter spacing just a bit.
3:06
Let's bring that down a little bit and
add just a little more space.
3:13
I like that.
3:16
That looks pretty good.
3:17
Now I'm gonna just put a little line
in between using the line tool.
3:18
This is just so we can have a divider.
3:21
Now I'm duplicating the subheading so
I can start my paragraph text.
3:31
I'll highlight the text,
make it regular font weight,
3:39
make it smaller, and make sure that
my letter spacing is back to 0.
3:43
I'm just gonna put in paragraph text.
3:48
I'll make sure it's not
in all capitals first.
3:50
Then I'll just write a bunch of
nonsense in here, because again,
3:52
this is just placeholder text.
3:56
I'm gonna copy and paste it, just to
fill in the block, move things around.
3:57
But again, we'll be changing
this out with real text when
4:02
we actually start creating our mockup.
4:04
And right now, I'm just adjusting
the spacing, trying to get a feel for
4:12
what looks the best.
4:16
I don't know why I tried to use a circle.
4:39
Let me use a square.
4:40
And we'll round the corners.
4:42
And that'll give us a circular or
pill-shaped button.
4:43
Yeah, that looks pretty good right there.
4:49
And I'll put CTA button as
the text inside our button.
4:52
A little on the nose, sure,
but we'll change it later.
4:55
And I'm keeping everything
grayscale right now.
5:01
The colors don't really matter.
5:03
Just like we're gonna adjust the text.
5:05
We're gonna adjust the colors as well.
5:06
This is to serve simply as a blueprint for
our website design.
5:09
But I think we're good to go.
5:13
That looks pretty good for that section.
5:14
All right, now let's get to
work on our Features section.
5:17
First, I'll duplicate some of these
text elements from the header section.
5:23
Let me take a moment to lock my section
frames down in the layer panel.
5:27
This will prevent me from
selecting them by mistake and
5:31
moving them all over the place.
5:34
From there, I'm gonna duplicate the header
section to our previous section.
5:36
We'll make it the heading for
this next section.
5:40
This time, I'm gonna put
the subheading on top, we'll try that.
5:49
Okay, now I'll be building out the three
image section from our design inspiration,
6:08
starting with the three main
categories with the title underneath,
6:13
then paragraph text and the button.
6:17
I'm starting out by creating
our image placeholder.
6:19
I'm gonna highlight all the elements after
I align them and group them together.
6:27
And this will be the title of this
category or this pastry item or section,
6:44
depends what we end up making it.
6:47
We're going to call it Heading 3, though.
6:57
I was gonna put subheading because
it was going to be a sub heading and
6:59
not a main heading, but
that takes up too much space.
7:02
So let's just stick with heading number 3.
7:05
Now let's add some paragraph text.
7:08
I'm just shaping our box so
it fits better.
7:12
And duplicating our button pattern here.
7:21
Okay, now this would be one pattern for
one of our pastry sections,
7:30
just like we have to the right.
7:34
But of course, there's supposed to
be three, so let's duplicate it and
7:35
then duplicate again.
7:38
And then let's just line
those up a little bit.
7:40
Again, I know my spacing and
my alignment isn't perfect, but
7:42
I'm just trying to do a decent job.
7:45
I don't have much room for
our next section, so
7:48
I'm gonna have to start moving stuff down.
7:49
All right,
I'm extending our frame here, and
8:03
then I'll just start to
pull everything down.
8:05
All right, let's zoom in here and
extend this section down a little bit,
8:12
make some room.
8:15
Let's begin crafting this subsection.
8:19
It will feature an extended version
of the categories or pastries.
8:21
These might include seasonal or
exclusive items.
8:24
Alternatively, it could represent
extended categories that,
8:27
while not top sellers,
still attract some attention.
8:31
I'll start by bringing down
a duplicated image placeholder.
8:34
This subsection is below the main
three categories when it comes to
8:38
the established hierarchy.
8:41
So, we're going to make these image
placeholders a bit smaller in comparison
8:42
to reflect that.
8:46
We'll also use a level four
subheading to continue that trend.
8:47
I'll make that text where it's only two
lines and fix the spacing a little bit.
8:57
I just settled for one line and
I just made it look a little cleaner.
9:05
Next, I'll duplicate all the elements in
this column to make our second column.
9:14
Then we'll do the same for
a third column and again for a fourth.
9:18
And we'll do a 4 by 4 design or
8 items instead of 5 by 5 or 10 items.
9:22
It doesn't have to be an exact match or
9:26
duplicate of what the original
design inspiration had.
9:28
Again, it's all just for inspiration and
for our own interpretation.
9:31
Next, I'm trying to figure out how I
can move my empty section containers.
9:47
While they help me establish
the boundaries of each section,
9:50
they are becoming a nuisance to manage.
9:54
All right, I have an idea.
9:56
First, I'll bring the design inspiration
down to align better with our wireframe.
9:58
Then I'll take all of my
empty section containers and
10:02
place them outside of
the frame to the left.
10:04
This will allow me to pull one
section container in at a time,
10:07
making the process less of a headache for
me.
10:10
All right,
now we're gonna tackle the about section.
10:14
Taking a look at my design inspiration,
shows the about section starts with
10:16
a small blurb, and then has three badges
for company values or product benefits.
10:20
So I'll start remaking this
pattern in my wireframe.
10:25
I'm gonna copy our entire heading divider,
subheading, text and
10:28
button pattern from up here and
bring it right down for our about section.
10:31
I don't think I'll need it all like
specifically I won't need the button but
10:36
I'm just gonna bring it all down anyway.
10:39
I'm gonna move it to the left side
here just like it is in the design,
10:42
we'll take out the subheading,
we don't need that.
10:46
I'll adjust the spacing a little bit.
10:50
I'm gonna left align our text here,
copy, and paste a little more just so,
10:58
we have more text to work with.
11:01
Next, I'm adjusting my paragraph text to
ensure alignment with other elements like
11:04
the header and divider.
11:08
I'm aiming to prevent the paragraph text
from extending beyond the divider or
11:10
being too narrow,
not matching the dividers with.
11:14
All right, just tightening up the text and
the divider,
11:19
making sure everything's aligned evenly.
11:22
There we go.
11:24
It looks a little better and
again it doesn't have to be perfect, but
11:25
just tweaking it to get a good feel for
it.
11:29
Then taking another look at our design
inspiration, we can go ahead and
11:34
get rid of that and
we'll duplicate the header section.
11:38
This will serve as an additional segment
of the mini about section acting
11:42
as a link.
11:47
It might prompt users with a learn more
invitation or something similar and
11:47
perhaps offer a clickable text link.
11:52
It doesn't necessarily need to be
a button although it's an option
11:54
Okay, now see I'm trying to
adjust the size here, but
12:02
due to the way our auto layout is set up
for these elements, I'm having trouble.
12:05
I'm trying to make this
group section smaller, but
12:09
that actually starts to
break it at a certain point.
12:11
And this is just because of how auto
layout and the constraints are set up, but
12:14
I'm just gonna move it over a little
bit and just adjust it barely.
12:17
It doesn't have to be perfect because
again we're gonna take the time to really
12:21
flesh it out and fix it in our next
stage when we create the mock up.
12:26
Next, I'll take a second to create three
rectangle placeholders to represent
12:29
the three sections from our
design inspiration to the right.
12:33
I don't have room for
all three placeholders, so
12:40
I'll make all of the elements in my
blurb to the left a bit smaller.
12:42
So this will be the first section,
the second section, and the third.
12:52
These blocks can represent
various milestones or
12:55
values in the bakery's history.
12:57
They might highlight awards,
achievements, or
12:59
unique value propositions such as
the year the business was founded or
13:02
their involvement in community
projects and initiatives.
13:05
There are several potential contents for
these three blocks, but for
13:08
now we're reserving the space for them.
13:11
Let me zoom out and take a wider look.
13:14
I'm going to take those buttons and
bring them down.
13:16
It looks like the design
inspiration had a little button or
13:19
link underneath each section.
13:22
So I'm gonna create that as well, then I'm
just gonna make those a little smaller.
13:24
All right, it's doing the same
thing due to our auto frame, but
13:28
I'm going to just manually decrease
the size of our button here.
13:31
Next, I'll duplicate the button twice so
there's one for each block.
13:38
There we go.
13:55
It's looking pretty good there.
13:57
All right, up next is the customer review
section, and since we made that anyway,
13:59
we're just gonna copy it and
paste it right in here.
14:03
There we go, I'll try to expand it and
make it a little larger.
14:06
I forgot my section frame.
14:10
I'll just hit Ctrl+Z to undo and
I'll bring a new section frame over.
14:11
Again, this isn't a requirement at all but
14:15
it's something that
helps me stay organized.
14:16
These frames allow me to easily and
quickly see the perimeters of each
14:18
section, but you do not have to create
them during your design process.
14:22
But let's bring the customer
reviews section back over again.
14:28
I'm going to align everything
in the top left corner and
14:31
try to enlarge it by dragging this
bottom right corner while holding shift.
14:34
I keep forgetting about auto layout.
14:38
No worries,
I'll just center this section for now.
14:41
All right, now we're gonna create
the call to action section.
14:55
I'm gonna create this gray rectangle.
14:58
This will serve as our image.
14:59
I'm not gonna create the x in this just
because it'll conflict with our text.
15:01
And again,
I know it's just placeholder text, but
15:05
I just don't feel the need at the moment.
15:07
So I'm gonna copy some of these text
elements and bring them down here.
15:09
All right, they're pasted but
we can't see them.
15:22
So let me grab the layers and
move them up to be the top element.
15:24
There we go.
15:29
Now we can see everything once again.
15:30
And I'm gonna center everything for
this section,
15:35
similar to the design inspiration.
15:37
And I'm gonna duplicate this button and
bring it down just so
15:54
I don't have to make it again.
15:56
There we go.
16:03
Now bring the layers up one more time.
16:04
There we go, right on top.
16:06
All right, we can't see the button
background because those grays conflict,
16:08
they're the same shade.
16:12
So I'm going to just
change that a little bit,
16:14
make it a little darker,
not too dark though.
16:16
There we go.
16:18
All right,
bring over another section border.
16:19
And again, this is for
our contact form section.
16:24
So we made this just like the testimonial
section, so we'll just duplicate it and
16:26
slide it over.
16:30
All right, let's duplicate this section
container and bring it into our frame.
16:38
This will be that team section there.
16:42
So the four long rectangle images
will be team member images.
16:44
I'm going to duplicate this
because I wanna use the heading
16:48
again with the paragraph and
the heading for the employees name.
16:50
And then the paragraph text
would be a key statement or
16:54
short little piece of a bio
before we actually had a link or
16:57
something that could give you
the full rundown about that employee.
16:59
All right, looks good.
17:12
So we're gonna duplicate that
pattern three more times.
17:13
Let's highlight them all, space them
out a little bit, align them better.
17:18
All right, that's looking pretty good.
17:23
Now, I'm gonna duplicate our
Call To Action button and
17:26
put it underneath member number one.
17:29
After that, I will keep duplicating
our new button until I have enough for
17:32
each team member.
17:35
And right there,
I think that looks good enough.
17:37
We're going to extend the frame
one last time, just big enough so
17:39
we can create our footer.
17:42
All right, I'm gonna start out
with the name of the company.
17:48
We're going to put that
in the bottom corner.
17:51
Let's pump up that size,
make it a little bigger,
17:54
Then we're gonna add
our tagline right here.
18:02
For the tag line let's play
with the spacing a bit.
18:07
All right that feels pretty good.
18:13
All right, duplicate the heading from the
previous pattern to bring that down here.
18:18
Get rid of our image placeholder,
because we don't need one down here.
18:25
And we'll do a heading of location for
this section,
18:31
this is where we'll put
the address of the bakery.
18:33
There we go.
18:46
I'm gonna left the line that just so
18:46
they're both lined up a little
better then I'll duplicate that.
18:48
And for this header we're gonna
call this section store hours.
18:53
And then I'll add some fake hours
of Monday through Sunday, 9 to 5.
19:00
Put in some placeholder text for
our location but 555 South Fifth Street,
19:25
Miami, Florida.
19:30
Again, this shouldn't be real Well,
19:31
let's go ahead and
left align that and bring it over.
19:36
It looks good right there?
19:38
All right, I'm just spacing those up,
lining them up a little more.
19:40
We'll create one more section here.
19:43
I'm not gonna actually
fill it out right now,
19:48
we're just kind of taking up the space so
we can kind of create the design and
19:50
see what we're trying to flesh out and
see how it's going to look.
19:53
And we'll edit the content in
the next video, of course.
19:57
Okay I kind of like how that looks.
20:03
There we go, I'm happy with that,
and I'll bring it in.
20:10
And yeah, that'll do it for
a decent footer for our wireframe.
20:20
Again, we'll flesh out content in the next
video, but this is a solid start.
20:24
Let's zoom out a bit to
view the whole thing.
20:28
All right, and I'll zoom back in
20:33
Here's our header section,
our features section,
20:38
our about section,
customer review section,
20:43
the call to action section,
then we have our contact section,
20:48
our staff section, And our footer.
20:55
This is a really solid
wireframe to start off with.
21:01
All right, but
I think that will do it for this video.
21:04
I will see you in the next one where
we will jump into creating our high
21:07
fidelity mock up.
21:10
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