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 Sitemapping and Wireframing!
You have completed AI Tools for Sitemapping and Wireframing!
Preview
Accelerate your UI design process with cutting-edge AI tools for sitemapping and wireframing. In this interactive workshop, you'll harness Relume.io to create clear site maps and detailed wireframes that serve as your project blueprints, and then transform these visuals into functional code with AI-powered tools like Lovable. Perfect for designers and developers alike, this session offers practical, step-by-step techniques for crafting seamless, user-friendly interfaces.
This is part of the AI for Everyone: Build Power Apps Without Coding track. Check out the track to see the rest of our No-Code content. Stay tuned—new content is continually being added, so be sure to check back regularly for updates!
Tools used in this video:
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
Hey everyone, it's Dan and Christian here.
0:09
And in this video, we want to go over
0:12
how to wireframe and sketch out the ideal
for your app or MVP.
0:14
I know firsthand that not a lot of people
are, you know, designers
0:18
or maybe naturally gifted artists
or anything that.
0:23
And that's OK.
0:26
The same way we have AI tools
to help us with coding.
0:27
We have AI tools to help us with design
and a great tool for this is Relume.io.
0:30
Relume helps generate site maps
0:35
and can even generate wireframes
as well for your project.
0:39
Now, there's a paid plan as well,
but there is a limited free plan
0:44
that allows you
to create one project to get started.
0:49
And that's what we're going to use today.
0:51
So we're going to hop right in here.
0:53
And Christian, feel free to jump in
with any questions, comments
0:55
or anything as well.
0:58
Yeah, so as Dan is getting set
up, wireframing, for those of you
0:59
that don't know what it is,
is the layout of how your web
1:05
application or application
that you're building looks .
1:09
Think of the sign in page, the profile
1:13
page, the product page, the dashboard.
1:17
Those are all different UI components.
1:20
And those are part of what we call
the wireframe of an application.
1:22
And the reason why we need to do this,
or this is considered
1:26
a best practice, is for you to physically
and mentally think about
1:29
where certain features
should be prevalent, etc.
1:33
Now, I'm going to prompt
1:37
ReLume here, right here in the sitemap
prompt area.
1:40
And I'm going to tell it
we want to create a to-do list app.
1:43
But one little piece of advice
or one warning
1:45
I would to give is
ReLume is a relatively new tool.
1:49
And from my experience,
it does better at site mapping websites,
1:53
landing pages, these sort of
native web experiences.
1:58
So it it may get the wireframe to your app
2:03
a little messier, incorrect,
but everything is editable and changeable.
2:06
So no matter what, it's a great place
to just get a starting foundation.
2:10
And I'm just going
2:15
to put I want to create a to do list app.
2:16
do we want to add any features
or you want to
2:19
just keep it broad Christian
2:21
let's also add in a
2:24
a sentence that says
2:29
I want to create a to-do list app
2:34
and have it categorized
2:37
by the to-do action
2:39
okay so I got I want to create
a to-do list app and have it
2:50
categorized tasks by the to-do action
is that correct or should I rephrase that
2:57
I think that should work
because remember simple English works best
3:03
so let's not get too complicated
absolutely because I don't I think
3:07
I think we know what we want it to look .
3:12
For those of you who don't know what
we're thinking about, think of the
3:17
if you're on the iPhone, though,
the task or reminder app,
3:20
how it kind of categorizes
your your your actions similar to that.
3:24
Awesome.
3:30
Now we'll go ahead and click
generate site map.
3:31
And again, this is web-based,
so it may generate something
3:34
that might look more our landing page
3:39
or our website to promote our product.
3:42
So, again,
this might not be best for all scenarios
3:46
and all situations,
but it's a good tool to see.
3:49
And as you see here, it's generated
the homepage, and it's suggesting
3:53
starting out with a nav bar at the top,
a hero header section.
3:56
And this is to, let me zoom in here.
4:00
the header section
4:05
will introduce
the to-do list app with an engaging image
4:06
and a catchy tagline,
a feature list section, benefits section.
4:09
So, yeah, if you look at this, it's
pretty much creating the landing page.
4:14
This would be the page you go to to learn
4:18
more about the to-do list app
and maybe even download it.
4:21
So it's maybe not necessarily
what we want for our purposes,
4:25
but it's something neat that we can use.
4:28
And then we have these additional pages
about us, features and pricing.
4:31
Again it a little more than what we need
for this project But let go ahead
4:35
and generate these empty pages
just so I can show you how it does this
4:41
And again just that
4:45
we have sections for the about page
4:49
and that includes a nav bar header section
the about section that includes
4:51
a detailed description of the company's
mission, vision, and values,
4:55
timeline section, a team section.
5:00
So, again, if we were a full fledged
startup and company,
5:02
this would be great for building out
our Web site for our product, maybe not
5:05
necessarily building out the site map
5:09
or wireframe for our product itself.
5:13
I think
if at the very top of the site map,
5:17
I wonder what happens when we click
wireframe, if it translates anything.
5:22
Do you see that? Yeah. Yep.
5:25
What we'll do is we'll click on this
and we should, if it generates correctly,
5:28
begin to translate these sitemaps
into actual wireframe designs.
5:32
Let's give it a shot.
5:37
Look at it go.
5:41
Yes, pretty amazing.
5:45
Yeah, if you're seeing it in real time,
how it's generating all these different
5:47
components, all those different boxes,
columns and rows.
5:51
those are all
5:56
UI components
that are very great to kind of box out.
5:58
They don't really need to be filled
in how Reloom is doing it.
6:03
All you really need to do
if you are doing this
6:08
by hand is just draw boxes
of what the section is going to be.
6:12
So if you look at what Dan is focused on
right now, you can just have that box
6:16
and just write this as product highlight
6:21
and that's your box
6:27
or i think then if you kind of hover
over the navigation menu on top
6:29
see how it has the green overlay
6:34
you can even just draw a large long
rectangle and just put nav bar
6:37
so that's another way of doing this
6:41
if you are more of the pencil
and paper person
6:44
absolutely again it's
we were talking about with almost
6:48
the prompts
and everything It's OK to be broad,
6:52
so you don't have to be very detailed
in the idea.
6:56
Just highlighting key sections and giving
6:59
context is enough for the
AI to kind of take that and run with it.
7:02
And then I just want to go back
to the site map
7:06
and just show off a few things real quick.
7:08
We have the nav bar, the hero
header section and the feature list,
7:10
which is going to highlight
three main features.
7:15
Those are our first three sections.
7:17
And if we click back on the wireframe,
7:19
you'll see
we have that nav bar talked about.
7:21
The hero section
7:24
and then the three main features.
7:26
So it's exactly,
you know, as the wireframe was.
7:30
And we can move these elements around,
ask for different.
7:34
Elements as well.
7:39
And we can have this upload
7:41
and update our wireframe, as you see here.
7:44
Now this is on top.
7:47
Now, of course, it kind of makes
more sense to me to keep it there.
7:48
but we have that option.
7:52
Now, let's say
we were making a webpage for our product
7:55
and we liked this
and wanted to go with this.
8:00
We could take this
and we could easily, you know,
8:03
zoom out and do a screenshot to get it.
8:08
But we could also export up here
at the top.
8:12
We can export
8:14
and we can send it to Figma web flow.
8:16
we can get react code for it
as well as html code
8:21
or we can just export text
or a spreadsheet
8:25
with all just the wireframe
or the sitemap itself
8:28
i mean so if we wanted just a list
of all the pages
8:32
and all the features of each page
we could easily go here to export
8:36
and use this drop down
8:42
and just export to text
8:44
then we have a full list of the pages
with everything on it.
8:46
And this can be good, again,
if we were wanting to build this
8:51
in an AI generator.
8:56
So, for example, we can copy this text.
8:57
Now we have all this copied.
9:01
And, again,
9:04
this is the wireframe
it's kind of producing.
9:06
It should kind of look this.
9:07
Let's take that sitemap text
and head over to an AI tool.
9:09
Now we can take that text
9:22
and say we want to create a landing page
9:25
for our to do app
9:31
And it should follow the structure.
9:34
Then we'll just paste it right in
9:39
and we'll hit enter.
9:42
now lovable will start spinning up
9:45
our preview and that means
building a version of our web page
9:47
we just got to give it a moment
to do its thinking and let it do its thing
9:51
you might be wondering
9:56
christian dan why are we going
through this trouble of creating
9:58
this structure before me putting a
10:02
just a simple simple english prompt
for lovable
10:06
one of the reasons why we encourage you
to do wireframe or sitemap
10:09
because it will help you
structure your app in
10:15
at the very beginning
so that you don't have to keep going
10:19
back to change any ui components
10:22
it gives you more time to okay
10:28
do the buttons work
are are the things i need
10:31
i need to be clicked on
linking to the right things instead of
10:35
I don't how this button is looking ,
or I don't how XOXYZ is being displayed.
10:38
It saves you that kind of prompting credit
10:44
that you can save for more intense edits
10:47
that are more relevant to your application
working correctly.
10:51
Absolutely.
10:57
all of these tools,
they all have paid plans
10:58
and they all come
with a limited number of credits
11:01
and we want to get
the most out of our credits.
11:04
So that's definitely
a great way to put it.
11:06
And if you take a look here,
we have our landing page.
11:09
It has our site map at the top,
our hero section, our features,
11:13
our three standout features,
and our testimonials.
11:18
And it gets started.
11:23
And it was able to create all that, again,
one prompt.
11:25
As it stands
now, this is simply a bare UI.
11:29
none of these buttons
or links do anything.
11:33
But of course, oh,
this actually links to other pages.
11:36
I apologize for that.
11:40
Lovable
took it a step further than I'm used to.
11:42
That's awesome to see.
11:46
But yeah, so right now
we just have a simple landing page.
11:47
We could ask for more features.
11:51
We could ask for a user authentication
to get this login
11:53
and sign up buttons
to actually work and do things.
11:56
but yeah I think this is a good example
and a good overview
11:59
of how you can use a tool Relume
to get your site map
12:03
and it doesn't have to be Relume
you can use ChatGPT or Claude
12:08
and conversate back and forth
and also get a generated site map but
12:11
this is how you take your generated site
map or your sketch and bring it over here
12:14
to Lovable and get it built out
12:20
matter of fact go ahead Christian
12:25
Now Dan,
I do want to also show off a feature
12:27
What would happen if
12:32
you go back to Relume
and go to let's say our wireframe,
12:34
if you were to take screenshots instead
12:38
and then can we attach that to Lovable?
12:41
Absolutely, let me zoom out here
12:45
because this is kind of a long webpage
12:48
Perfect,
I think that'll do it right there.
12:53
While Dan is doing that,
look at the wireframe for the first page,
12:59
first column.
13:04
Doesn't that look awfully the one Lovable
just generated
13:05
from our site mapping prompt?
13:08
That's wild to me how accurate that is.
13:11
Let's say
13:16
you don't have the prompt,
but you drew it out.
13:18
Imagine this is your pencil to paper
drawing.
13:21
take a picture or a snapshot
13:25
and then you can even just attach it
where what Dan is doing right now.
13:27
Attach the picture and you can say examine
13:32
the image of the wireframe and generate
a to-do list out modeling this.
13:36
It works just the same way.
13:43
Probably a bit better
because it actually has an image to follow
13:46
along instead of a text.
13:49
So it is to your advantage
13:51
to begin wireframing your apps.
13:54
So you're going to watch Dan
13:58
attach the image and then write
14:00
probably the same prompt
14:04
that says I attached an image create
14:07
a to list app
14:09
Create a
14:13
landing page
14:17
for our to-do list app
14:19
and I've attached an image
14:25
for reference okay
14:28
and so i just uploaded
the screenshot we took
14:37
and i simply put create a landing page
let me fix that but create
14:43
a landing page for our to-do list app
and i've attached an image for reference
14:48
the ui and layout should be just
it is in the image
14:52
and i'll hit enter
and The reason I went to a new thread
14:56
or a new chat here is I just wanted
lovable to be able to start from scratch.
15:00
I didn't want it to try to generate
this wireframe
15:05
based off the image
while still trying to maintain and keep
15:10
what it generated
previously from providing the site map.
15:13
We just also give you a good comparison
15:17
of how the two different prompts gives you
15:21
either a similar output
or two completely different outputs.
15:24
We'll see.
15:28
This is the
this is the the right of using AI tools.
15:28
Absolutely.
15:33
And I would just pretty much
want to assume in the last iteration,
15:34
it put those blue color schemes in there
for the buttons and, you know,
15:39
different parts of the Web site.
15:43
If I had to guess, I think it's going
to be more true to the black and white
15:44
and the gray style of our wireframe
because we didn't include any color.
15:48
But again,
it's kind of up to lovable at the moment.
15:52
So let's see what it came up with.
15:55
Yep, black and white.
16:01
There you go.
16:02
All right, there we go.
16:04
We have our hero section.
16:05
It goes down to our three main features.
16:08
Continues on.
16:13
You can see that
16:18
there are no images,
mainly because we asked it to reflect
16:19
the image that we attach, and the image
we attach had no image, versus
16:24
if Dan were to go back to the first prompt
we used, I think there were
16:27
AI-generated images that are used
16:32
as the in-place images, right?
16:35
Yes. It generated some images.
16:38
I think it even generated some SVG icons
to kind of use.
16:40
So, again, it was taking more liberties
because we just gave it a text prompt.
16:44
I think this time it tried to stick
very more closely to the image,
16:49
and it did a pretty good job.
16:53
if I was going to reiterate
on this project further,
16:55
I would probably ask for it
16:59
to add some padding along the sides here
so it brought our
17:01
content a little more in the center,
especially with this section here.
17:05
But overall,
17:11
I think this is a great job
and gave us pretty much what we asked for.
17:12
And this is why we kind of suggest
using wireframing
17:17
and sitemapping
as one of the best pre-MVP building tools.
17:22
So we hope that this short video
allowed you to understand
17:27
why this is important and the outputs
that you're able to get from AI tools
17:32
Lovable is exponentially better
once you give it references
17:37
or even examples, just we did today.
17:42
Absolutely.
17:46
But that'll do it for this video.
17:48
We hope you learned a lot
and we'll see you in the next one.
17:49
Thank you Thank you Thank you.
17:53
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