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
Now we’ll organize and splice our design inspiration to craft our ideal layout.
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
[MUSIC]
0:00
Hello, welcome back everyone.
0:04
I'm here in Figma ready
to start our wireframe.
0:05
So if you're following along,
feel free to jump in Figma as well, or
0:07
your design editor of choice.
0:11
That could be Adobe XD, Sketch, or
whatever you or your company uses.
0:13
I just know figma is becoming
an industry standard at this point.
0:18
So that's just what I'll be using today.
0:21
And I'm certainly not the best at it,
I'm still learning it.
0:23
I've actually been a longtime
Adobe XD user, but
0:26
I wanna get more familiar with Figma.
0:28
So that's what I'll be trying out today.
0:30
Let's start with the new design file.
0:33
All right, once we have a new design file,
let's import our images just so
0:35
we have everything all
in one central location.
0:38
So let's see.
0:41
All right, I'll highlight all of my
images and press Enter to import them.
0:42
I'm gonna zoom out a little bit here, and
I'm going to click on Auto Layout and
0:53
select Vertical instead of Horizontal.
0:57
All right, now all of our images
are stacked on top one another.
1:00
And actually I'm gonna click
to the side to unselect them.
1:05
Okay, now that I've done that,
let me head back down to the bottom.
1:08
And then I'm gonna grab this screenshot.
1:13
Well, one thing I did was I took our
sitemap and I took a screenshot of it and
1:16
cropped it to where it
was just the homepage.
1:19
So we would have an image of that.
1:21
That way, we can reference the site map
while putting together the wire frame.
1:23
All right, now I'm gonna come over
here to start making some room.
1:35
I'll be zooming in and
out, so don't worry.
1:38
Whenever we need to see something,
I'll bring us where we need to be.
1:40
So the first thing I'm going
to do is create a frame.
1:43
This will be the document canvas in
which we're creating our design.
1:46
So I'm going to go up here, click Frame,
and I can create a custom frame or
1:50
I can go over here to the side here.
1:54
They have all these pre-made settings.
1:56
I'm gonna go to the desktop category and
I'm gonna click on the desktop template.
1:58
There we go, and now we're good to go.
2:03
The next thing I wanna do is I wanna
kind of start organizing our design
2:06
inspiration.
2:10
So the first thing I'm gonna do is I'm
gonna just start stacking everything
2:11
together kind of according
to color palette or feel.
2:15
Actually, this one was our infographic
style which would be used on
2:18
a different page such as
the individual item page.
2:21
I'll put this to the side for
now as we're focusing on the homepage.
2:24
Currently, I'm separating the images
in three groups, rustic or earth tones,
2:29
black/dark designs, and
then warm or bold designs.
2:34
Actually, I'm gonna make this bottom
row two separate piles, one for
2:40
bold designs and the other for
warm designs with light backgrounds.
2:44
All right, that's looking pretty good and
you get the point.
2:48
Next, I'll fast forward a bit and
we'll review our sitemap.
2:50
Now that we have all of our designs
kind of organized nice and neat here,
2:55
I suggest we start by taking
a look at our sitemap.
2:59
This is why I suggested bringing
our sitemap into Figma.
3:01
That way, as we're creating our wireframe,
we can reference our map and its sections.
3:04
I'm not sure if we'll need
everything we have on our sitemap.
3:09
And we could always take some of this out.
3:12
Let's just take it piece by piece and
we'll decide from there.
3:14
But let's quickly review the sitemap.
3:17
We have the navbar, the header section,
the feature section, the about section,
3:19
the testimonial section, call to action
section, contact form section, application
3:24
form section, team section, location
section, review section, and footer.
3:28
Woo, yeah, quite a bit for one page.
3:33
But again, we'll decide what stays and
3:35
goes as we work on each
individual section.
3:37
But I definitely think we
can work with what we have.
3:39
So let's start working on it here.
3:41
First thing we're gonna do is start
organizing some of this design
3:43
inspiration.
3:47
Let's crop in on the pieces that
we're actually gonna use and
3:48
combine those into our design.
3:52
And I'll show you exactly
what I mean here.
3:54
Let's start out with that header section,
the hero section.
3:56
For our hero section, I wanna use this
amazing hero from this bold design.
3:59
Not only does it stand out and command
attention, it will also provide a bit more
4:03
of a challenge for me to recreate later,
which is the perfect learning opportunity.
4:07
I'm gonna crop a little below this
section with the red background so
4:11
we get the flower elements
spilling into the next section.
4:15
That's something I would
like to incorporate.
4:18
And I'll just put this piece right
underneath our frame because we're
4:21
actually kind of building out
the site now, taking components and
4:24
pieces from each of these designs.
4:27
We should next focus on a feature section
to showcase the bakery's offerings,
4:29
be it categories or specialties.
4:33
At a glance,
this seems like a good example.
4:35
However, as I mentioned before, I'm not
keen on the circle style with the faded or
4:37
feathered edges.
4:42
Let's see what other patterns
we have to choose from.
4:43
I know I previously mentioned liking
this unique design pattern here.
4:50
I'm not sure if I wanna use that for
this section though.
4:54
I'll move it to the bottom so it's out
of the way until I'm ready to use it.
4:56
I'm quite drawn to the cutout image
effects showcased on these two designs.
5:05
While both pages feature
the same pattern and
5:10
styling, the implementation on the design
to the right appeals to me more.
5:13
Additionally, the heading and
subheadings provide clear differentiation.
5:17
It's well structured with
the primary three categories,
5:22
followed by the subsequent ten.
5:25
Yeah, I'm going with
the design to our right.
5:30
As usual, I'll crop in to take just
the section I'm interested in.
5:31
And again, we're just gonna move it over.
5:39
All right, it's starting to come together,
and it just so
5:49
happens those colors
kind of work together.
5:51
That's not always going to be
the case by the end of this,
5:53
it's going to be like a quilt of
different materials, and that's okay.
5:56
We're going to completely remake
all of it once it's complete.
6:00
We're just trying to get the feel for
the layout and the different elements on
6:03
the page and the different design
patterns that we wanna leverage.
6:07
All right,
moving on to the About section next.
6:10
This part should delve into
the backstory of Bella's Artisan Bakes,
6:14
touching on its origins, and
6:17
giving a glimpse into Isabella Thompson's
background and her love for baking.
6:19
All right, well, I'm not exactly spotting
anything that screams perfect fit for
6:27
this section at the moment.
6:31
Looks like we may have to
get a little creative.
6:32
Okay, all right,
I think we have something here though.
6:38
Let's crop in.
6:41
And remember, I said I like this
design pattern from earlier, so
6:42
let's duplicate this image so
we can keep that.
6:45
But I'm actually after
this bottom section.
6:47
I'll crop the top image from the bottom so
we're left with only this four rectangle
6:49
design pattern, and
I'll use it for the bottom image.
6:52
Next I'll crop the bottom duplicate so
we're only left with this section here.
6:55
I think this could work as a short
About Us section that would link to a full
6:58
About Us page.
7:02
Let's line it up with the rest
of our wireframe inspiration.
7:03
Perfect, now we're really
starting to get somewhere.
7:07
Up next I need to create
a testimonial section.
7:10
But remember, we had two similar
sections for testimonials or
7:13
reviews according to our site map.
7:15
So let's go back and review our sitemap.
7:17
Okay, now that I have my sitemap in front
of me, I'm going to start by crossing out
7:19
what I've already worked
on using the line tool.
7:23
Okay, so I've finished picking out
design inspiration for the navbar,
7:26
the hero section, a feature section,
and the about section.
7:31
And now we're on the testimonial section.
7:35
And that's actually a little bit of
a conflict with the review section,
7:37
which is right above the footer.
7:40
Both of these sections
are essentially the same thing.
7:42
So we're just gonna take out
this bottom review section, and
7:45
I'm gonna leave the testimonial
section up here.
7:48
I'll increase the width to show this was a
canceled section as opposed to a finished
7:51
section.
7:55
That looks good.
7:55
All right, next we're gonna work
on the testimonial section.
7:58
Now if I'm not mistaken, we didn't have
anything generated that kind of looked
8:01
like the kind of design pattern
one might use for testimonials.
8:05
But let's see.
8:08
I'm thinking maybe you could use
this pattern, but probably not.
8:10
I feel like that's stretching it.
8:12
Yeah, I'm seeing a lot of design patterns,
a lot of elements, but
8:22
not anything necessarily for
a testimonial section.
8:25
So I think we have our first section that
I'm gonna have to make from scratch here.
8:28
All right, to start,
I'm gonna create a rectangle.
8:41
Let's make this background solid white,
nice.
8:50
Then I'll try to line it up the best
I can while still moving quickly.
8:55
This is gonna be sloppy and
dirty as this is just for reference.
8:58
This isn't the actual
website by any means.
9:02
Now lets get some placeholders text going.
9:04
I'll start of with the section heading,
which I'll use customer reviews.
9:06
Let me change the font color to black so
we can see it,
9:10
then I'll increase the font weight and
size.
9:12
Next, I'll create the text for the
customers name inside the actual review.
9:20
I'll make sure this text is
smaller than our section heading.
9:35
But it will still have more
contrast than our paragraph text.
9:38
Speaking of which, up next I'll
create out paragraph text, and
9:41
you can type anything in here for
your paragraph text.
9:45
For this example,
I'm using testimonial review text,
9:48
as this is just a placeholder.
9:51
Up next, I'll create our image
placeholder using a circle to start,
10:09
followed by using the line
tool to create a X.
10:13
The pattern of a circle or square with
an X across it represents an image
10:15
placeholder throughout the UX industry.
10:19
So that's why I use that specific pattern.
10:22
But as long as you and those you'll be
sharing your design with can understand
10:24
an image will go there, then feel free
to take liberties with your design.
10:28
And with the image placeholder done,
10:32
we have finished our
customer reviews section.
10:34
Now let's go back up to our sitemap
to see what section is next.
10:36
First, let's cross off the testimonial
section now that it's done.
10:46
And up next we have the CTA or
call-to-action section.
10:49
Let's take a look at our design
inspiration from Midjourney.
10:53
At this point, I'm looking for
a section that has a bold header and
10:56
possible description,
followed by a call-to-action button.
10:59
Envision this part of the bakery's website
as the segment where they make the ask
11:03
to the customer.
11:08
This could be an invitation to place
an order, seek more information,
11:09
or any other ultimate CTA.
11:13
Okay, right here, let's go to this.
11:15
I think this section in the middle
can most certainly be our
11:16
call to action with a little work.
11:19
Okay, now that we cropped it,
let's go ahead and
11:25
take it over to the rest of our wireframe.
11:27
All right, now let me zoom in so
11:30
I can better align this section to
the rest of our design inspiration.
11:31
I'm gonna just try to line
it up best I can real quick.
11:37
All right, there we go.
11:44
It looks pretty good.
11:46
Next, let's incorporate
our call-to-action button.
11:48
I'll start by designing a rectangle and
choose a shade of red for the background,
11:51
aiming to complement these berries.
11:55
Admittedly, I'm getting a bit
caught up in the details.
12:00
The exact shade isn't crucial,
I just want a harmonious match.
12:03
For the CTA text, I'll use Shop Now,
and set the font to bold.
12:07
Let's align the text to
the center within the button.
12:14
That looks much improved.
12:18
With that,
I believe our CTA section is set.
12:20
Now I'll take a second to go back to
the top of my design inspiration or
12:23
wire frame quilt to see how
the overall page is coming together.
12:27
Here I have my navbar and hero section,
followed up with my feature section,
12:31
then the About Us section.
12:36
Next, my testimonial section, and
finally, the call-to-action section.
12:38
I think our concept for
a homepage is really starting to take off.
12:42
I'm getting excited for the possibilities.
12:46
All right,
next we have our contact section.
12:49
Again, I don't think we have any design
patterns that's going to stand out for
12:51
our contact form.
12:54
So I think this may be another case of,
I'll have to create this myself.
12:55
I'm just gonna go back around these few
different designs just to make sure
12:59
there's nothing I'm missing here.
13:02
All right, as I thought, I'm gonna have to
create the contact section from scratch.
13:13
All right, so first I'm gonna highlight my
customer review section that I made, and
13:17
I'm gonna duplicate that, bring it right
underneath our call-to-action section.
13:21
And then we'll customize
it to be our contact form.
13:25
So we'll make the header for this section,
get in touch with Bella's artist and
13:28
bakery.
13:33
Then we'll take out all
of these elements and
13:34
we'll start making the actual form inputs.
13:36
Now I'm gonna start creating
rectangles to use as form inputs.
13:42
I'll create one for first name,
another for last name.
13:46
Then I'll duplicate one of our rectangles
to create the email address input, and
13:50
I'll extend the width to take up
the same space as both the first and
13:55
last name inputs.
13:59
Now I'm going to highlight
my inputs together so
14:01
I can move them up to
make a bit more room.
14:03
From there, I'll duplicate my email
input to have a message input.
14:05
Oops, it seems I forgot
the subject line input.
14:09
So let me extend our frame to make room.
14:12
Now I can move our message input down and
duplicate our email input so
14:14
that we now have a subject line input,
perfect.
14:19
Here, I'm going to start filling in my
form input with placeholder text informing
14:26
the user what information
goes in which input.
14:30
I'll start with first name and I'll try
a font weight of light as I don't need as
14:33
much contrast for these placeholders.
14:37
Okay, light was too extreme.
14:39
So let's set it to regular, and
I'll make the font color a shade of gray.
14:40
Again, we don't need
as much contrast here.
14:44
These elements shouldn't really stand out.
14:46
Awesome, that's looking pretty good.
14:50
So now I'll take a moment to do this for
the rest of my form inputs, and
14:52
I'll be right back in a flash.
14:56
All right, that's looking pretty good.
14:58
And just like that,
we have a get-in-touch or contact section.
14:59
Let's go back up to the sitemap,
we'll cross out the CTA section.
15:03
We'll also cross out that
contact form section.
15:10
All right, so next we have
the application form section, but
15:27
I'm actually gonna take this out.
15:30
We don't necessarily need that.
15:32
This is a smaller operation.
15:34
They're not constantly looking for
employees, so
15:35
we're just gonna take that out altogether,
15:38
which means the next section we're
working on is the team section.
15:40
And I think I have just
the design element for that.
15:46
That's the element we've been saving for
a while.
15:49
Yep, right here.
15:52
The four rectangle images, we can
make that for individual employees or
15:54
different people from the team.
15:58
I think that would look pretty good.
16:01
So let's move it down here,
put it underneath our wireframe collage.
16:02
All right, it looks great.
16:07
Now we just have our location section and
footer left.
16:10
And I'm actually going to combine these
sections by placing the location and
16:13
hours info inside our footer.
16:17
I have a particular footer pattern in mind
that would have three or four columns.
16:18
Hopefully I can find something from
our design inspiration that we can
16:22
incorporate.
16:25
This rustic bottom section
here could possibly work.
16:34
It's not exactly what I
had in mind though, so
16:37
I'll take a moment to keep browsing.
16:39
Hold on, I think I see
exactly what I'm looking for.
16:45
Yeah, this is totally what I had in mind,
100%.
16:48
It even has all four, the columns.
16:51
So I'll just crop this footer
section from this design,
16:54
then I'll bring it over to
our design inspiration.
16:57
I'm just gonna bring that crop in to
get rid of that dark brown border on
17:05
the two sides.
17:08
And then I'm just gonna
increase the size of this.
17:12
I just like this main
element in the middle.
17:15
All right, perfect,
I think that looks good enough.
17:24
All right, now I'm gonna take the rest
of our designs that we're not using and
17:28
I'm gonna organize them off to the side.
17:31
I'm not gonna get rid of anything yet.
17:33
It's all being saved and
17:35
placed off to the side just in case we
ever need to reference it or use anything.
17:36
Now I'm going to duplicate
the desktop frame and
17:40
put our wireframe collage
inside of a frame.
17:43
And then I'll customize the size of this
frame to fit our design inspiration for
17:48
Midjourney, and I'll increase the bottom
size here of our desktop frame.
17:52
And there we go.
18:01
We have our entire wire frame
inspiration created right there.
18:02
But that's it, our full design inspiration
wire frame, aka wire frame quilt.
18:06
Join me in the next video as I start
designing our actual wire frame based off
18:11
the patterns we selected as inspiration.
18:15
I'll see you in the next one.
18:18
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