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