Hey, June here from the Wix Studio team. Today, we'll explore how to kickstart your site-building process using our visual sitemap and wireframe generator.
A site map is like a website's blueprint, outlining all page connections. Our tool lets you efficiently plan with AI, creating either a visual sitemap or a wireframe sitemap with key pages and business solutions.
If you decide to create a visual sitemap with wireframes, each page will come with sections laid out as wireframes that automatically adjust to look great on any device, no matter the screen size.
The content will be generated based on the prompt you write when getting started, so you can spend more time being creative, experimenting, and bringing your own look and feel to the site—the sitemap really does the heavy lifting for you.
So let’s get started. When you create a new site in the Studio Editor, you can choose various options such as starting with a blank canvas, a template, or with the sitemap. Let’s select the ״studio sitemap & wireframes״ option.
First up, we’ll need to fill in all the information about the site that we want to create.
The structure and content will be generated based on this information. Let’s define the type of site we want to build. For this tutorial, we’ll create a site for a pottery artists’ studio.
Now, let's add the site description.
The description prompt should cover the business's key details and offerings. Be sure to fill in as much detail as possible.
Based on the business type I chose, it suggested the service 'Get Booked Online,' which is perfect for me.
I can pick other options if I want or even multiple ones, but I’ll go with this one for now. I'll quickly input the business name, location, target audience, what makes it unique, and the site’s main goals.
Since the site's content is generated based on our input, we just need to choose the tone of voice. I’ll pick a friendly and casual vibe for this one.
Once everything’s set, let's click "continue."
Now we can choose between a visual sitemap with ready-to-design wireframes on each page, or just a visual sitemap with blank pages.
Let's choose the first option. And now we wait for our sitemap and wireframes to be generated from the details we've provided...It’s ready!
This is the homepage—it’s based on wireframes with several sections, and some content is already in place too. The other pages are built in the same way. Before we start designing, let's review our visual sitemap.
It gives us an overview of all the generated pages and their sections. And from here, you can easily track the status of each site page, which is especially helpful when collaborating with others.
Plus, the bookings business solution is already set up, based on the service I chose in the beginning.
Every site will have this visual sitemap view, even if it wasn't generated using AI. The AI generated a solid structure for the site, but you can always make tweaks. For instance, if I don't need a particular page, I can simply delete it. The same applies to sections.
I can directly reorder, duplicate, rename, hide, delete, or edit them from here. We can also move sections between pages.
If I want to add a new one that wasn't included before, I can click 'Add New Page' and choose to create a blank page, a dynamic page, or generate one with AI. This time, I'll select 'Generate’.
Next, I'll fill in the information, including name and description. This page will feature all the clay options used in the studio.
Nice! looks like we have all the sections we'll need. Ok, now let’s see how it turned out... Like all the other pages, this one has wireframes. Cool.
I’m happy with how the site's structure and everything is set up, so we can move on to the design.
Let’s go back to the homepage. The colors and fonts are linked to the site styles, so I'll make some global adjustments.
When I change this color here, it updates all the text elements on this page and across the entire site. I think I’ll keep it black for my design.
Next, I'll switch up the fonts for the title and paragraphs... ...Looks great.
Now I’ll go ahead and change this image here,..
Just like with any other site, I can change anything in the wireframe.
I can enlarge this font, add new elements and design them to my liking, remove, realign, reposition and even change the layout...basically, I have the flexibility to tailor it to fit my needs.
You can also add new sections, whether you want to create them from scratch or use existing wireframes and designed sections. For instance, I’ll add a banner in this area.
I’ll go ahead and design this entire page. And there you have it—with the design based on the wireframes and the nice touches we made, the site looks really good, across all breakpoints.
The best part is that using the same wireframes allows me to create various designs for different sites, opening up endless possibilities. Go ahead and give it a try! To learn more about what you can do with Wix Studio, check out the Wix Studio Academy.
