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
Let’s utilize Relume AI Site Builder to swiftly generate sitemaps for our bakery design project.
Tools:
Project files (and links) from this course:
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
Okay, welcome back.
0:00
In this part of the course, we will
generate our sitemaps for our project.
0:01
I'm at relume.io, and while their
site has a few different offerings,
0:04
I'm here to use the AI site builder.
0:09
But we're not going to be building
the whole site or even the wireframes,
0:11
we're using it strictly for sitemapping.
0:15
All right, let me log in here.
0:18
Okay, so I'm gonna build a site.
0:25
All right, let's describe it.
0:27
Okay, we're gonna do three pages,
should be plenty.
0:28
Really, for the purpose of this video,
we may just focus on the homepage.
0:30
We'll see how much time
the homepage takes, but
0:34
if there's time,
we'll tackle additional pages.
0:37
Okay, let's see here.
0:39
So we'll put in our prompts,
which is a website for
0:41
artisan baker Isabella Thompson and
her company, Bella's Artisan Bakes.
0:44
Her goals are to showcase
her bakery specialties and
0:48
entice potential customers.
0:51
Share the story of how
Bella's Artisan Bakes came to be.
0:53
Make the website easy to navigate for her
customers, ensuring they can quickly find
0:56
essential information like the menu, store
location, and hours of operation, perfect.
1:01
Let's go ahead and start generating.
1:06
Here, I'm just increasing the zoom
properties to make the sitemap a bit
1:20
easier to see and read.
1:23
All right, so it says,
it generated our homepage and
1:30
it can continue to generate
the sub-pages of our website.
1:33
But for now, we're just gonna discard
that and just check out our sitemap for
1:36
the homepage.
1:40
First, let me zoom out so
we can see the whole thing.
1:43
It's kinda long,
cuz it has a few different sections, but
1:49
let's start at the very top here and
we'll see everything it says.
1:52
Okay, so it starts with our Navbar,
and then a Hero Header Section,
1:57
which it suggests to showcase
Bella's Artisan Bakes and
2:01
entice potential customers with high
quality images and a compelling tagline.
2:04
Underneath that,
it suggests a feature section to
2:08
present the bakery specialties with brief
descriptions and appetizing images.
2:11
So far, so good, this is followed by
an About Section to share the story of how
2:15
Bella's Artisan Bakes came to be,
2:20
including Isabella Thompson's
background and passion for baking.
2:22
Next up is the Testimonial Section.
2:26
Here, we'll display customer reviews
to build trust and credibility.
2:28
This is solid.
2:32
After that,
a CTA Section is recommended to encourage
2:33
visitors to visit the bakery or
place an order.
2:37
Next up is the Testimonial Section.
2:39
Here, we will display customer reviews
to build trust and credibility.
2:42
After that, a CTA section is recommended
to encourage visitors to visit the bakery
2:45
or place an order.
2:50
I really liked that as well.
2:51
Next, we have the Contact Form Section.
2:52
This section can provide an easy way for
customers to send inquiries or
2:55
request catering services,
followed by an Application Form Section.
2:59
This is to allow interested
individuals to apply for
3:03
job opportunities at
Bella's Artisan Bakes.
3:05
Then it suggests a Team Section to
introduce the bakery's team members,
3:07
showcasing their expertise and
dedication to their craft.
3:11
Up next, we have the Location Section.
3:14
This can display the store's location,
address, and hours of operations,
3:17
along with an embedded Google Map for
easy navigation,
3:21
followed by a Review Section to highlight
positive reviews from customers to further
3:24
establish credibility.
3:29
That's okay, but it's very similar
to our testimonial section
3:30
that was previously suggested,
and then, of course, the Footer.
3:34
Okay, interesting, not bad at all.
3:38
And as I like to say,
it certainly beats a blank page.
3:40
Now, I'll scroll back down to
the bottom of our homepage sitemap and
3:44
see what other pages Relume recommends.
3:48
And then from there, it suggests
the following pages, an About Us page,
3:50
a Menu page, and a Locations & Hours page.
3:54
The Menu page will list their menu items,
so
3:57
there will be an individual item page for
each item.
3:59
Let's rename this to Bakery Individual
Item page just to make that a little
4:01
more clear.
4:05
In this course, we won't have time to
build out these additional pages, but
4:09
I'm just going to quickly
generate them and
4:13
we'll take a quick look to see some
of the sections Relume suggested.
4:15
All right,
let's start with our About Us page.
4:18
Of course, it starts us off with
our Navbar, a Header Section,
4:21
an About Section,
a Team and Feature Section.
4:24
A How It Works Section,
a Benefits Section, Stats Section,
4:26
an FAQ Section, another
Call To Action Section, and our Footer.
4:30
Pretty standard, but
it definitely makes sense and helps.
4:34
In our Menu, we have our Navbar, our
Header Section, our Features List Section,
4:41
an Ecommerce Product Section for
the individual product images and
4:46
descriptions, and
the Ecommerce Products List Section,
4:49
then we have our Call To Action Section.
4:52
We also have an Early Access Section
to promote upcoming menu items,
4:54
an FAQ Section to answer questions
specifically related to the menu,
4:58
a Newsletter Section,
and of course, a Footer.
5:02
On our last page, Location & Hours,
we have our Navbar, Header and
5:07
Location Section to display
the store address and contact info.
5:11
We have a Contact Form Section,
a Call To Action Section,
5:15
we have a Gallery Section for
images of the interior and exterior.
5:19
And we also have an Early Access Section
to promote exclusive deals,
5:23
a Newsletter Section, and
of course, our Footer.
5:26
All in all,
pretty good stuff to get us going.
5:29
Now, I'm just going to quickly generate
this last Individual Item Page and
5:31
see what it gives us.
5:35
Of course, it recommends the Navbar, and
then an Ecommerce Product Header Section
5:36
to display the name, price, and
high quality image of the item.
5:40
From there, we have a Product Section,
5:44
which gives a detailed
description of the item.
5:45
Then a Review Section, a Call To Action
Section, a Feature List Section,
5:47
highlighting any unique selling points.
5:51
Our Gallery Section showing multiple
images of the item, an FAQ Section for
5:54
answering questions related
directly to the bakery item,
5:58
as well as a Contact Form Section,
and a Footer.
6:01
So all in all, pretty general stuff,
but really decent and
6:04
really good at giving
us some place to start.
6:07
Now, we can export this a myriad of ways.
6:13
I'm actually going to export this as text,
even though we can export it to Figma, but
6:15
we're just going to export it as text for
now.
6:19
I'll copy this text and exit out,
then we'll go back to our Google Doc.
6:22
Next, I'll add a heading for
sitemap to our DOC and
6:28
paste the sitemap we
copied from relume.io.
6:31
Next, I'll work on formatting
my DOC like I did earlier.
6:34
Again, this isn't a requirement, but
6:37
rather just an optional step
to help organize your content.
6:39
But let's fast forward to the end result.
6:42
Okay, so I took a second to organize the
document just to give it some contrast and
6:45
hierarchy to make it easier to read and
process and digest the information.
6:50
But we now have five pages worth of
direction and pretty much five pages of
6:55
a design brief with context to
make decisions on our project.
6:59
And we have our sitemap,
this is pretty cool if you ask me.
7:03
I think we're in a good place and
7:06
we're ready to begin at least getting some
design inspiration and design direction,
7:08
as well as some idea of what we could
possibly create by using Midjourney.
7:13
So let's hop into Discord so we can use
Midjourney, and I'll work on that next.
7:17
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