Create Your First Project

Webvizio is a platform that allows clients, managers, and dev teams to leave visual feedback and effectively collaborate on web development projects by literally leaving visual feedback on any live website element or an image, both on desktop and mobile.

What types of web projects can I create?

Once you login into Webvizio Dashboard, you can create two different types of projects:

1. You can create a URL-based project by typing in any URL into the address bar
2. You can create a Figma design project by inserting a Figma frame URL into the address bar
3. You can create an image-based project by uploading files from your computer’s library (JPG/PNG/PDF/PSD files supported).

Website projects

Whichever web page you and your team might be working on, you can effectively communicate with your team about it, leave visual feedback and assign tasks and action items for it with Webvizio. All you need to do is copy the URL of ANY live web page and paste it into the box on the Webvizio project creation page. As soon as you do this, Webvizio is scanning the chosen web page and creates a new project with it’s visual copy as your working canvas, which allows you to pin notes and comments for your team on the exact place or element of the page, that requires their attention.

Let’s see how it works step by step:

1. Enter a web page URL into the URL input bar
2. Click the Add URL button. Your new web project will appear on your dashboard
3. Click on the page preview block that appeared on your dashboard, or click the Open Project button

Figma Files

You can add any Figma design to Webvizio whenever you create a new project or compare the design file to a live version side-by-side in the project tabs.

This option allows you to quickly connect to Figma when you already have a web link to your Figma design:

1. Copy the URL of the desired Figma frame
2. Paste it into the Webvizio URL field
3. Log in and allow Webvizio to access your Figma data if prompted
4. The Figma design will open in Webvizio

See our detailed guide for more on the Figma integration>>

Images, PDFs, and Other Design Files

In addition to live web pages and Figma designs, Webvizio allows you to collaborate on digital assets such as images, original design files, and PDFs.

Here’s how to upload a file in a few simple steps:

1. Click the Upload button next to the URL bar
2. Choose a file from your computer and click Open
3. Your image-based project will appear on your dashboard
4. Click on the project block on your dashboard or click the Open Project button

Navigation

There are two ways to navigate between image-based files or PDFs within your project:

• Top Panel: Use the Previous/Next arrows ( ← / → ) to cycle through your files in order.
• Side Panel: Click on any file thumbnail in the left-side panel to jump directly to a specific asset.

Working with Files

Use the tools in the top panel to interact with your assets on the project canvas:

• Zoom In/Out: Use the toggle located on the top panel to enlarge or minimize the view.
• Fit to Screen: Click the Fit to Screen icon to instantly scale the image to your current window size.
• Download Image: Click the Download icon to save the file directly to your computer.
• Update File: If you need to replace an image with a newer version, click the Refresh File button.
• Share File: Copy a shareable link to your clipboard. When opened, it takes the viewer directly to the file you shared.
• Delete File: Click the Trash Can icon to remove the image from your project.

File Management

Manage your project assets using the left-hand thumbnail panel:

• Add New Files: To add additional images, files, or PDFs, click the (+) button at the bottom of the thumbnail panel.
• Reorder Assets: Simply drag and drop thumbnails to reorganize the order of your project.
• Rename Assets: Double-click any asset name to edit and rename the file.

Adding Multiple Files to Your Existing Project

Webvizio allows to add different types of files to an existing project. You can open multiple tabs in each project and combine URL-based pages, images, design, and PDF files within one interface.

How to add multiple files within one project:

1. Open a project from the dashboard.
2. For URL-based projects: Click the + icon next to the existing tab.
3. For image-based projects: Click the (+) button at the bottom of the thumbnail panel.
4. Enter a URL and click “Add” OR click “Upload File.”
5. Repeat to add more assets in new tabs.

▶️Suggested Video