The Vision Board is a collaborative, freeform workspace inside Duio designed for early ideation, concept development, and visual thinking. It allows teams to explore ideas spatially using drawings, text, media, and visual connections—without forcing structure too early.

Vision Boards are especially useful during pre-production, brainstorming, and alignment phases, but they can be revisited throughout the project lifecycle.

Purpose of Vision Boards

Vision Boards are intended to help teams:

  • Explore ideas visually before formal planning

  • Share references, concepts, and direction

  • Connect thoughts, systems, or features spatially

  • Collaborate creatively without task-level constraints

They are not task managers or timelines. Instead, they provide a flexible canvas for thinking and communication.

Accessing Vision Boards

Team members can access Vision Boards by:

  1. Opening the project sidebar on the left

  2. Selecting the Vision Board tab

From here, users can open existing boards or create new ones (admins only).

Creating a Vision Board

To create a new board:

  1. Click the New board button

  2. Enter a board title

  3. Optionally add a description

  4. Click Ok to confirm

After creation, the board opens with a blank canvas ready for use.

Navigating the Canvas

Desktop Controls

  • Pan: Left click and drag

  • Zoom: Mouse wheel

  • Reset View: Double click

Mobile Controls

  • Pan: Drag

  • Zoom: Pinch

  • Reset View: Double tap

These controls allow smooth navigation regardless of device.

Vision Board Interface

Each Vision Board includes two main interface areas:

  • Vision Board options (top-left)

  • Vision Board tools (bottom)

Vision Board Options

Board Selector and Management

Clicking the dropdown icon opens:

  • A list of available vision boards

  • An Add button to create a new board

  • A delete option for boards (bin icon)

Admins can manage boards directly from this menu.

Board Title

The board title is editable. Clicking the title allows you to rename the board at any time.

Snapshot Tool

The snapshot icon captures a screenshot of the board. This image can be used as a placeholder or visual reference elsewhere in the project.

Vision Board Tools

Vision Board tools are displayed along the bottom of the screen and are grouped by purpose.

Navigation Tools

Pan / Move
Allows you to move the canvas freely.

Center Grid View
Resets the board’s zoom and position to the default centered view.

Content Tools

Add Content
Creates a new content layer. After placing it on the board, you select the type of content to add.

Drawing Tools

Poly Pen Tool
Draws freeform polygonal lines.

Erase Tool
Erases drawn lines or shapes.

Shape Tools

Line Tool
Draws straight lines using two points.

Rectangle Tool
Draws a four-point rectangle.

Circle Tool
Draws a smooth circular shape.

Arrow Tool
Draws directional arrows using two points.

Color and Size Controls

Line Color
Sets the color of drawing and shape tools.

Line Size
Controls stroke thickness.

Eraser Size
Controls how much area the eraser removes.

Drawing History Controls

Undo Drawing
Reverts the most recent drawing action.

Redo Drawing
Reapplies an undone drawing action.

Clear Drawing
Removes all drawings from the board while keeping content layers intact.

Content Layers

Content layers are modular elements used to place structured information on the board.

To create one:

  1. Select Add Content

  2. Click anywhere on the canvas

  3. Choose a content type

Content Layer Types

Label
A lightweight text element used for naming, grouping, or annotating ideas. Labels can be assigned colors for clarity.

Card
A richer content element used for detailed information. Cards support:

  • Long-form text

  • Images

  • Audio files

  • YouTube videos

Cards are ideal for feature descriptions, mood references, or design notes.

Editing Content Layers

Content layers can be:

  • Moved by clicking and dragging

  • Deleted using the menu icon on the layer

  • Recolored using the color icon

  • Edited by clicking the pencil icon next to descriptions

Card descriptions support Markdown, allowing headings, lists, and formatted text.

Adding Media to Cards

Cards support multiple media types:

  • Image uploads

  • Audio uploads

  • YouTube videos

For YouTube videos:

  • Enter the video code when prompted

  • Ensure Allow embedding is enabled in YouTube Studio

Linking Content Layers

Content layers can be visually connected using wires.

To link layers:

  1. Hover near the outer edge of a content layer

  2. Drag from an output connector to another layer’s input

These links help visualize relationships between ideas, systems, or concepts.

Returning to Vision Boards

When returning to the Vision Boards tab later:

  • Team members can select an existing board from the list

  • Admins can create new boards as needed

Boards persist across sessions and can evolve alongside the project.

How Vision Boards Are Typically Used

Vision Boards are commonly used for:

  • Concept exploration and brainstorming

  • Visualizing systems, mechanics, or narratives

  • Aligning teams during pre-production

  • Collecting references and inspiration

  • Mapping ideas before turning them into tasks

They often serve as the creative starting point before work moves into the Production Board.

Summary

The Vision Board provides:

  • A flexible, visual workspace for ideation

  • Drawing, content, and linking tools

  • Support for media-rich concept development

  • Collaborative exploration without rigid structure

Vision Boards help teams think freely, communicate visually, and shape ideas before committing them to production workflows.