There are various ways you can customize your prototype settings.
You can adjust additional settings by clicking the cogwheel to 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 use our built in options, Frame and Auto-stretch. If you're reviewing smaller work that's not necessarily small design, it can be handy to drop it into a Frame. 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:
- Navigate to the appropriate prototype.
- Click on a screen and go into build mode.
- Click the Configuration button at the bottom right of the screen (next to the lightning bolt).
- Click Upload New under Background.
- Click the lock icon.
Mobile prototypes have additional settings, as well:
- 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. Log in to your account.
2. Click on your prototype.
3. Click the grey + sign at the top left of the page next to your prototype name and upload your icon there.
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:
Here's how to change your prototype type (desktop, mobile, tablet, or wearable) and/or orientation:
1. Log into your account.
2. Click into 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 to save.