×

Prototype Settings

There are various ways to customize your prototype settings, and options depend on the device type you choose for your prototype.

Prototype Orientation and Types

Here's how to change your prototype device type (desktop, mobile, tablet, or wearable) and/or orientation:

  1. Sign in to InVision.
  2. Open your prototype.
  3. Click the ••• (more) button (next to Assets under your prototype name).
  4. Click Change Type.
  5. Select the prototype type and orientation you want.
  6. Click Continue.

Configuration Cogwheel

You can adjust additional settings by clicking the configuration cogwheel icon (invision-console-settings-icon.png) in the bottom right of your screen in Build mode.

Here's what the configuration menu allows you to adjust in a desktop prototype:

  • Design Alignment: Align your design to the left, center, or right.
  • Zoom/Scroll Behavior: Here's a little more information on how the zoom/scroll feature behaves:
    • Normal: This leaves your screen as is.
    • Hide Horizontal Overflow: This keeps wide screens from being able to scroll left and right when they expand past your browser view.
    • Scale Down to Browser Width: This scales your design down to the width of your browser window if it's smaller than the design. The scaling is active and won't require a browser refresh.
  • Background: Upload custom backgrounds, change colors, or—if you are working with a desktop prototype—use our built-in options, Frame and Auto Stretch. If you're reviewing smaller work, Frame can add a border around your design. For flat or non-textured design, Auto Stretch can save you time by repeating the edge pixels from your design to generate a background automatically. It even works with animated .gifs!

You can also set a fixed background (currently only for web prototypes). This feature allows you to fix the background while the forefront screen scrolls vertically (i.e. parallax-type scrolling).

Here's how to set your fixed background:

  1. Navigate to the appropriate prototype.
  2. Click a screen and go into Build mode.
  3. Click the configuration icon (invision-console-settings-icon.png) at the bottom right of the screen (next to the lightning bolt).
  4. Under the Background heading, click Upload New.
  5. Click the lock icon.

Mobile Prototype Settings

Mobile prototypes have additional settings, which you can access by clicking the configuration icon (invision-console-settings-icon.png) in the bottom right of your screen in Build mode:

  • Device Skin: Choose the color and version of your mobile device here.
  • Status Bar Style: Check the box if you want your design to start below the status bar. Many designers like to include space for the device's status bar, so we default to that. If your mobile screens look like they're cut off at the top, go to your configuration menu (at the bottom right next to the lightning bolt icon) while in build or preview mode, and check the box by "My design starts below the status bar."
  • Background: In mobile prototypes, the background color is dependent on the content in the screen's image. InVision pulls the four corner pixel colors and tries to match the background as closely as possible. If you've set a background color in your design, that color should remain as the background color.
  • Foreground: Choose between light or dark.
  • Hide status bar: The status bar can be removed while viewing on the desktop only. On the device, there's no way to remove it.

Updating your Mobile Icon

To update the icon that appears on your mobile device:
1. Sign in to InVision.
2. Open your prototype.
3. At the top left of the page, next to your prototype name, click the gray + sign and upload your icon.

Screenshot_2016-08-04_13.47.46.png

NOTE: You will need to upload this icon image manually while within InVision; you cannot import or upload from on-device.

Changing your Mobile Skin

Here's a short video that will illustrate how you can change your mobile skin:

Using the Mobile Loading Screen

The loading screen is the screen you'd like your clients and stakeholders to see when your prototype is loading via a share link. It will appear while loading your prototype then automatically transition to the screen you selected your prototype to start on; there is no need to add an automatic redirect to that screen.

Setting a Loading Screen

From the prototype page, click the first slot to set the loading screen. The file must be a PNG and sized correctly to the device.

 

At the moment, you can't sync the loading screen into the loading screen slot. You'll want to export that screen to your desktop and then you can upload that screen separately by clicking the 'loading screen' slot.

Troubleshooting your Loading Screen

If you've uploaded one already and it’s not displaying when you view the prototype via a share link, find the 'loading screen' screen and mouse over the thumbnail, then click the trash can icon, and re-upload as stated above.

HOW LONG WILL MY LOADING SCREEN DISPLAY?

The length of time your loading screen displays for is entirely dependent on how long it takes for your prototype to load. When viewing a prototype on a desktop, it may be unlikely you'll ever see it display, unless your prototype is huge. Your loading screen will display more often on a mobile device while it loads.

If you want the loading screen to appear longer than it is, our recommendation is to upload the image you want to function as the loading screen as a regular screen. Make that screen the first one in your prototype. Click to view the screen, and after you've switched to Build mode, at the top you should see a timer icon. Click that timer icon, and set it to your desired time, and link it to the next screen that should display. Select a transition and then click Save.

 

Getting Started: Prototypes (
)

Prototype Settings

Prev