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