Studio Editor: Generating a Visual Sitemap and Wireframes for a New Site
Accelerate site planning using our AI-powered visual sitemap tool. Tell us about your client's business and goals and we’ll generate a visual sitemap with wireframes that you can edit and manage.
The content, pages and business solutions that you see in the visual sitemap are tailored to the brief—the more details you share, the more precise the results.
Tip:
As different clients may require different workflows, we also offer other ways to create a Studio site – you can start with a blank canvas, explore our variety of templates or use your own custom template.
Step 1 | Fill in details about your client's site
To get started, go to the Sites page in your workspace. You can then select to create a new site with AI-generated sitemap and wireframes, tailor-made to your client's unique needs.
The only fields that are mandatory are the site type (e.g. online clothing store) and a short description. However, there are many other details you can share in order to make the result more precise to your client's brief.
To start creating a new site:
Go to Sites in your Wix Studio workspace.
Click Create New Site at the top right.
Select Studio sitemap & wireframes.
Enter the site's main purpose under What's the business type (e.g. online clothing store, boutique fitness studio, etc.)
Choose how you want to complete the rest of the form:
Fill the form manually
Write a few words or sentences about the site and business under Describe this business (e.g. the location of your client's business, the products or services offered, etc.)
(Optional) Provide more details to enhance the accuracy of the sitemap and wireframes:
Choose 1 or more services from the list.
Enter the business name.
Enter the business location.
Tip: Once you start typing the location, you'll be able to select it from a list.
Describe the target audience you want to attract to this site.
Describe what makes the business unique compared to similar businesses in your client's field.
Describe the site's top goals – what does your client want to achieve with this site? (e.g. showcase their latest products, increase bookings, etc.)
Select up to 2 options to describe the desired tone of voice.
When ready, click Continue.
Complete the form with AI
Click Complete Form with AI.
Review the info completed by AI.
(Optional) Click Optimize Responses to generate new info.
Edit the form fields as necessary.
When ready, click Continue.
As an alternative, you can click Skip to Templates at the bottom to see our available site templates. However, keep in mind the text and pages you get in a template are more generic.
Step 2 | Choose what to generate
Before proceeding to the editor, decide what you want AI to generate for you:
Visual sitemap & wireframes: AI generates the structure of pages and sections for you, while also creating wireframes for an easy start on your design.
Visual sitemap only: If you have a very specific vision for your design and don't need wireframes, you can choose this option. AI only generates the sitemap – the pages and sections will appear blank, allowing you to start from scratch.
Select the option that meets your needs and click Start Generating.
Step 3 | Review the sitemap and content in the editor
Once you click Start Generating, AI gets to work creating your client's site. You are then redirected to the editor to see the end result: a comprehensive sitemap with pages and sections.
The new site may also include Wix apps. For example, if you describe a fitness club, we automatically add the Wix Bookings and Members Area apps so your clients can book classes and log in to their own account.
Your starting point depends on what you chose to generate:
Visual sitemap & wireframes: You're redirected to the Home page, which already includes relevant wireframes.
Visual sitemap only: You're redirected to see the visual sitemap so you can review the structure. Exit the panel to start working on your design.
Note: Pages related to Wix apps will be populated with app elements that you can customize.
Choose what to do next:
Review and edit the sitemap
This visual sitemap shows a high-level view of your client's site, including all pages and sections. It can help you get a better perspective on the overall structure of the site, allowing you to organize it quicker.
Click Visual Sitemap
on the left side of the editor.
Choose what to do next:
Add another page: Click + Add New Page. You can add a blank page, a dynamic page, or use AI to generate a page.
Add a section: Hover over an existing section and click the Add section icon
above or below it. You can add a blank section, a global section, one of our general sections or let AI generate one for you.
Set page status: Click Set status to mark this page as in progress, done, etc.
Move a section or page: Use drag and drop to move sections and pages around.
Export the sitemap: Share the sitemap with your client. This is a great way to ensure they approve the structure before proceeding to the design.
Click the More Actions icon
at the top.
Select Export sitemap.
Tip: This downloads a JPEG file containing the sitemap.
Add and customize elements
Whether or not you've chosen to generate wireframes for the site, you can always add more elements. Click Add Elements
on the left side of the editor to explore our full range of elements.
When selecting an element, a toolbar appears with customization options.
In addition to the toolbar, you'll find many settings in the Inspector panel - positioning, layout, design, animations, effects and more.
Add Wix business solutions
While our AI-powered tool automatically adds relevant Wix apps to the site, you can always add more apps (created by Wix or a third party).
Click App Market
on the left side of the editor to explore our full range of apps.
Design and edit the wireframes
The wireframes are fully customizable, so you can design them to your exact needs and change the layout when needed.
Select an element or section to see the available options in the toolbar above the element, as well as the Inspector panel.
Did you know?
The wireframes are already connected to the site styles panel, which lets you make global design changes from a single edit.
Have existing sites built on Studio?
The visual sitemap panel is available for all Studio Editor sites, including any existing sites you've built.