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 AI Tools for Designers!
You have completed AI Tools for Designers!
Preview
Learn how to generate sitemaps in minutes using the Relume Site Generator from Relume.io
Resources
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
For the last tool in our showcase,
let's head over to the relume.io website.
0:00
For those who are unfamiliar,
Relume is a design agency,
0:04
as well as an online design community.
0:08
They have even started the Relume Design
League, a tournament pitting designers and
0:10
developers into one-on-one
design battles in real-time.
0:15
They've also released a handful of
tools and components libraries, but
0:18
today we're focusing on one of
their tools in particular, and
0:22
that's the Relume Site Builder.
0:24
The Relume Site Builder uses AI to help
you generate sitemaps and wireframes for
0:26
your web design project instantly.
0:31
The wireframes take advantage of their
components kit for Figma and Webflow, but
0:34
we'll be focusing specifically
on creating sitemaps,
0:39
which can be accessed
using a free account.
0:42
From the Relume homepage, let's scroll
down to the Relume Site Generator.
0:45
Once on the landing page for
the site generator, click on the button,
0:49
Try it for free.
0:53
You will be able to generate a sitemap for
your homepage without an account.
0:53
But to generate any pages after that, you
will need to sign up for a free account.
0:58
You'll get a prompt to do so
once you try to generate your second page.
1:02
However, I'm already signed into
my account, so I will continue on.
1:06
First, let's give our project a title.
1:10
This will help later when exporting.
1:12
For now, we'll call this project,
Bakery Website.
1:14
Next we'll add our prompt,
1:17
which is basically a description of
the website we want to generate.
1:19
We're going to use the following,
a website for a bakery.
1:22
Users will not be able to order online,
however, they can view products and
1:26
use a form to contact the baker about
their needs, include contact information,
1:30
location, phone, number, email, etc.
1:34
Next, I'll put down three as the number of
pages, since this will be a small project.
1:36
After that, I'll hit Generate and
1:42
the site generator will begin building out
our sitemap, starting with the homepage.
1:44
Before we jump in, let me increase the
zoom to make the content a bit easier to
1:54
read for all those watching out there.
1:57
Perfect, now let's review the sitemap for
the homepage.
2:02
Our sitemap starts with a Navbar,
followed by a Hero Header Section.
2:05
This section welcomes
users to the bakery and
2:10
provides a brief intro to the business.
2:12
Next we have a Feature Section
to highlight the quality of
2:14
ingredients used at this bakery.
2:17
Then a Features List Section to showcase
three unique selling points of the bakery,
2:19
followed by a testimonial section and
2:24
a gallery to show off
the bakerie's products.
2:26
Next it suggests a CTA form section.
2:28
Here, we have a call to action for users
to fill out a form with their request,
2:30
followed by the Locations Section,
and finally, our Footer.
2:34
While it's a bit long, I would say
it certainly has all of the basic
2:38
information a user could be looking for
when they hit our homepage for the bakery.
2:42
Up next, I'll start generating the sitemap
for our products page, and you know what?
2:46
While that's going, we'll also click
to start generating the sitemap for
2:51
our contact page.
2:55
On our product page, we have our Navbar
and Header Section to start, followed by
3:00
the Ecommerce Products List Section, which
displays a list of featured products.
3:04
Next, we have a FAQ Section and
3:08
a call-to-action section,
followed by the Contact Form and Footer.
3:10
Going back up to our contact page,
we have our usual suspects to start off,
3:14
the Navbar and Header Section, followed by
a Contact Form Section, then a section for
3:18
application forms.
3:23
This is for job and
partnership opportunities.
3:24
Next, there's a Locations Section
to display the business's address,
3:26
phone number, and other important info.
3:30
This is then followed by
a Team Section to showcase the staff.
3:33
And lastly, we have our Footer.
3:36
Next, we'll generate our products page.
3:42
The AI suggests starting
off with the Navbar,
3:44
then the Ecommerce Product Header Section
to display the main info,
3:47
such as product name, image, and price.
3:50
Followed by the Ecommerce Product Section,
which contains more detailed info,
3:53
such as ingredients, size options,
and customization possibilities.
3:58
Up next, we have an FAQ Section for
questions related to the product, followed
4:02
by a Review Section, then a CTA Section
to encourage users to contact the bakery.
4:07
Then we have a Form Section for users to
do just that, and finally, our Footer.
4:11
Now I'm gonna scroll back up to the top,
so
4:18
we can start making some
edits to our sitemap.
4:20
First, I noticed we have a bit of
overlap between the Feature Section and
4:29
Feature List Section.
4:33
Furthermore, we'll be showing the Feature
Section for each product on its own page,
4:34
so we'll delete the Feature Section and
keep the Features List Section.
4:38
Next we'll move the image gallery up so
it comes before the customer testimonials.
4:43
And lastly,
I'll take out this Locations Section,
4:47
which contains info on the business as
that will live on the contacts page, okay?
4:52
Yeah, I think that works for
our home page.
4:58
Let's move on to the contact page.
5:02
Okay, here we have our contact form
followed by a contact form for
5:09
applications and partnerships.
5:12
That feels like too much to me,
especially for this project, which is for
5:14
a small business.
5:18
So let's take out
the Application Form Section.
5:19
Awesome, the rest of the page looks good,
in my opinion.
5:24
I just remembered, the client would like
a banner at the top of the site to promote
5:27
any new deals or
promotions the bakery is running.
5:31
We can add the banner by
clicking on the Navbar here,
5:34
then clicking the plus sign that pops up.
5:37
Then I'll click on the Navbar element
from the layers panel on our right.
5:39
This will fill in our new module with the
same text sections that the Navbar element
5:43
contains.
5:47
From there, I'll change the name
of this module from Navbar to
5:48
Promotional Alert Banner and
give it a quick description.
5:51
Now we'll move it above the Navbar,
as this will be
5:54
the first element users see by having
it at the very top of our site.
5:57
Next, I need to copy this
Promotional Alert Banner module and
6:01
add it to every page of our sitemap,
6:10
since this banner will
be displayed sitewide.
6:15
All right, perfect.
6:25
Now that we have our banner on every page,
6:30
let's go back to finish our products and
individual product page sitemaps.
6:32
Okay, looking back over everything,
6:53
the product's overview page
is looking pretty solid.
6:55
I'm looking over the contact page
once more while I'm here, but
7:00
that's looking great as well.
7:03
That just leaves our product page for
individual products.
7:06
Overall, everything is looking how
I would like it here, however,
7:14
I'll take out the Contact Form Section.
7:18
My thinking here is the CTA Section will
contain a call-to-action button, and
7:20
clicking on that button will take the user
to a specific form or our contact page.
7:24
But that'll do it for
the sitemap for our bakery website,
7:32
let's zoom out to see the whole
map laid out at once.
7:35
Cool, next, we can go to Export
to save our sitemap, and
7:40
there's a few options for
how you can do this.
7:44
First, I'll show the text version,
so let's choose Export to TXT,
7:47
then we'll click copy to clipboard.
7:50
Relume suggests we copy this
to a Notion or Google Docs, so
7:53
let's put this in a new Google Doc.
7:57
Once I paste our sitemap
content in the Google Doc,
7:58
I'll highlight each of the page
headings and increase the font size and
8:01
weight to provide more
contrast between pages.
8:05
And that's it, but let's go back, and
so I can export our sitemap to Figma.
8:26
Back in the Relume site generator,
if we choose Export to Figma instead,
8:31
we'll get this prompt to install
the Relume library Figma plugin.
8:35
Click on Install Plugin,
8:38
then it will take you to the plugin
page to install the plugin.
8:40
You can install the plugin by clicking
the blue button in the top right corner.
8:43
Over in Figma, I will start by
creating a new design file.
8:48
Once I'm in my new file, I'll click on
the Figma icon in the top left menu.
8:51
Next, I'll select Plugins
from the dropdown menu, and
8:56
I'll click on the Relume Library plugin.
8:59
Once the plugin loads, you should see
your project in the list of projects,
9:01
click on your project,
then click Add Sitemap.
9:06
And just like that, we have our entire
sitemap that we created in minutes,
9:08
imported directly into Figma for reference
while we're designing our project.
9:12
Amazing, right?
I can't wait to see what you do with this
9:16
technology.
9:19
And that will do it for this video.
9:22
So what did you think?
9:24
Were you surprised at
what all was possible?
9:25
Did you learn anything new?
9:27
I sure hope so, and I can't wait to
see how my fellow designers use this
9:28
innovative tech in the future.
9:32
If you end up creating something cool for
your project with generative AI,
9:34
share it on our community using
the link underneath the video.
9:38
I'd love to see it, but until next time,
happy coding and happy designing, see you.
9:42
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