Studio Editor: Generating a Visual Sitemap and Wireframes for a New Site
6 min read
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.
- Fill in the mandatory information fields:
- What's the business type: Enter the site's main purpose (e.g. online clothing store, boutique fitness studio, etc.)
- Describe this business: Write a few words or sentences about the site and 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.
- 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 is 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
on the left side of the editor.
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. 
at the top. 
Add and customize elements
on the left side of the editor to explore our full range of elements. 
Add Wix business solutions
on the left side of the editor to explore our full range of apps.Design and edit the wireframes
Have existing sites built on Studio?
The visual sitemap panel is available for all Studio Editor sites, including any existing sites you've built.
Did this help?
|