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
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