×

Creating and Sharing a Board

We’ll show you everything from A-Z when it comes to creating and customizing your board—as well as sharing it and gathering feedback.

Creating a board

  1. From your InVision dashboard, click the + button to create a new board (Alternatively, you can view a sample prototype or board by hovering over that type and clicking Or Try a Sample).
  2. Click Create New Board.
    Board2x.gif

 

Adding a photo header

  1. Scroll to the top of your board and click the Edit Header menu option.
    1.png
  2. Upload an image via drag and drop or browse.
    Note: Images must not exceed 10MB (megabytes) per file.
  3. To move your photo header: Click and drag on your image to move and place as desired.
  4. To blur your photo header, click the Blur option and use the slider to auto-update your setting.
  5. To darken or lighten the overlay for your photo header, click the Overlay option and use the slider to auto-update your setting.
  6. To change the size of your photo header, click the Size options to resize to Small, Medium, or Full-Screen.
  7. To save your changes, click the checkmark button or simply click outside of the header area.

Setting a layout style

There are three layout types available from the header options:

  • Masonry: This collage format displays item thumbnails at their original proportions.
  • Meticulous: This balanced format crops item thumbnails to fit them to regular columns, with a relaxed approach to rows.
  • Grid: This structured format crops item thumbnails to fit them to regular columns and rows.

Uploading items

  1. Drag and drop your assets into your browser, or click the message to use the file selector and upload your files.
    Note: Images must not exceed 10MB (megabytes) per file.


  2. Check the uploader spinner to view progress on your file uploads.
  3. If you would like to upload your files to a specific section, drag your files to that section or click the + button for that section and select Upload File.

Once uploaded, a tile will appear with either a thumbnail displayed for image files or a filetype icon if uploading other files like PSD or Sketch files.

Updating or replacing board items

To replace an image on your Board while keeping all past comments:

  1. Open your board.
  2. Click the image you would like to update so that it opens in Comment Mode.
  3. Close out Comment Mode, and using the cursor on your computer drag a box over the image. A blue border should now appear around the image.
  4. On your computer, open the folder which contains the updated image.
    IMPORTANT: Make sure that the updated image has the same file name as the image originally upload to your InVision board. Remember, images must not exceed 10MB (megabytes) per file.
  5. Select the image from your computer and drag and drop the updated image on top of the original image with the blue border on your InVision board.
  6. Wait a few seconds, and you should see the updated image appear.

Please note that once you replace an image, you will not be able to undo and go back to the original image.

Creating and organizing sections

  1. Hover and click above or between sections, and click the + button to create a new section title.
  2. Add a title and/or description, if desired.
    Pro Tip: Use a description without a title to include an extra dividing line, perfect for visually sub-dividing your sections in share links.
  3. Use the up and down arrows to reorganize your sections as desired.

Resizing items

  1. Hover over an item and use the Set Item Size options to resize to 1, 2, 3, or 4 columns.

Pro Tip: To resize multiple items at once, select multiple items and use the same Set Item Size tool on the selection toolbar to set items between 1 and 4 columns.

Adding a color swatch

To add a color swatch to your board:

  1. Below the bottom-right corner of the banner image, click the large + button.
  2. Click the color swatch icon (color-swatch-icon.png). 
  3. Type the hex value, and press the Enter key.

add-color-swatch.gif

After creating the color swatch, you can click the swatch to rename it or add a description. If you want to add a color swatch to a specific section of your board, navigate to that section, click the + button, and continue creating your color swatch by following the previous instructions.

To add a color from a board image: 

  1. Click the board item image.
  2. Hover over the color bar, and click the + icon.

           Screen_Shot_2017-04-07_at_11.33.04_AM.png

The color swatches should then appear in the same section as the original image.

Adding a note

  1. Below the bottom-right corner of the banner image, click the large + button.
  2. Click the note icon (note-icon.png). 
  3. Add a note title, body content, and description. Use the formatting tools to structure your note content.

If you want to add a note to a specific section of your board, navigate to that section, click the + button, and continue creating your note by following the previous instructions.

Selecting and organizing items

  1. Simply click and drag to select multiple items, or hold Ctrl/Cmd or Shift to reveal the selection toolbar and to select ranges of items on your board.
  2. Click and drag items to move them to a new section, or use the section move tool to send all selected items to a specific section.
  3. Click and drag a single item at a time to move within the layout as desired. 

Sharing

To share an entire board, navigate to the top-right corner of your board and click the share icon (share-icon-board.png). InVision will generate a share link which you can copy to your clipboard. Visitors will be able to view and comment on all items in the board. You can also share your board to social media directly by clicking one of the social media icons below the share link.

sharing.gif

To share a specific item on your board, hover over that item and, in the top-right corner, click the share icon. Visitors using that share link will only be able to view and comment on that specific item.  

Adding Stakeholders

To add collaborators, go to your Board and click the plus sign under the header:

Screen_Shot_2017-05-19_at_10.13.42_AM.png

Once you click the share icon, a modal will pop up that allows you to add collaborators to the Board.

When adding collaborators, the list in the modal will show people in the following order (always A-Z within each group):

  • Teams collaborating
  • Individuals already collaborating
  • Invitees that are collaborating
  • Other teams
  • Other individuals
  • Other invitees

To remove collaborators:

  1. Open your prototype and click the avatar of the collaborator (at the top middle of your board) you'd like to remove. If you have many collaborators, you may need to click "More" until their avatar appears.
  2. Uncheck the mark next to their name.
  3. Click Update.

When you remove a collaborator from a board (or remove them completely from an account), their comments remain on the board. 

Password protecting your shared board

By default, sharing a board generates a random alphanumeric URL. The uniqueness of this randomly generated URL helps ensure that unwanted visitors can't stumble upon your board. If you need additional security, you can optionally password protect your Board so that anyone who visits the share link must enter a password. To password protect your board:

  1. In the top-right corner, click the settings icon (settings-icon.png).
  2. Toggle Password-protect board in share links on.
  3. Enter the password you'd like to use and click Save to enable password protection for that board.

Once enabled, anyone visiting the share link associated with that Board will be prompted to enter the password before they're able to access the board.

DISABLING DOWNLOADS OF BOARD CONTENT

You may want to share some Boards content (e.g. fonts) but not allow downloads of that content for licensing reasons. You can disable downloads of content from your board by doing the following:

  1. Click the settings cogwheel in the upper right.
  2. Toggle Disable all downloads for non-collaborators on.
  3. Check the types of content for which you'd like to allow downloads:
    • Images
    • Fonts
    • Source Files  

ADDING AN ANNOTATION TO YOUR COMMENT

Annotations are similar to how comments in prototypes behave today: a bubble that draws attention to a particular part of the image. To add an annotation to an image in your board:

  1. Open an image on which you'd like to comment.
  2. Enter the text of your comment.
  3. Click the bullseye icon.
  4. Click the image and position your annotation bubble where you'd like.
  5. Click Post Comment to add the Annotation and comment:

Note: If logged out of your InVision account or you do not have an account, InVision authenticates your comment by asking for your name and email address:

        Screen_Shot_2017-04-26_at_12.59.12_PM.png

If your email address is not associated with an InVision account, your comment will post to the prototype. If your email address is associated with an InVision account, a prompt to enter your password appears:

        Screen_Shot_2017-04-26_at_12.59.39_PM.png

Once you've entered the correct password, future comments will post to the project.

Archiving a board 

To archive a board, go to your dashboard, then click Boards at the top left. Hover over the board you want to archive, click the ••• menu, then click Archive.

Screenshot_2018-05-03_09.59.13.png

 

Getting Started: Boards (
)

Creating and Sharing a Board

Prev