InVision lets you quickly create interactive clickable prototypes, boards, and Freehand projects so you can gather instant feedback from your stakeholders.
In this guide, you’ll learn you how to create wireframes, create a prototype, upload screens to your prototype, add interactivity between screens, and replace your screens when you're ready to upload new versions.
We'll also show you how to use InVision features like fixed headers and footers, overlays, fixed elements, and timed redirects, so you can raise the bar of fidelity and realism in your prototypes.
When getting started on a design, you typically first need to first create mockups and wireframes. Tools commonly used by designers for prototyping include Sketch and Photoshop, both of which integrate with InVision through Craft.
InVision has also created a design tool called Studio, which allows you to create robust prototypes with beautiful interactions. Although it's not yet publicly available, you can request early access and begin using Studio today—for free!
Image calculators like this are helpful for validating image sizes before uploading and testing on your iOS device. You can also check out material.io for popular image sizing, including desktop and laptop monitors. For more information on screen sizing, be sure to check out this article: What size should my screens be?
You will need to edit your images using an external image editor (InVision Studio, Sketch, Adobe Photoshop, Pencil Project, etc.) prior to uploading your image files in InVision. Once your wireframes are ready, you can upload your screens and start adding interactivity, fixed headers and footers, overlays, etc.
Note: Please do not use actual end-customer personally identifiable information (PII) in your mockups (or otherwise provide such PII to InVision), except for the limited PII of users required for them to access the InVision service. While using our service, please do not provide us with any personal health information (e.g. information subject to HIPAA), personal financial information (e.g. data subject to PCI or the Gramm-Leach Bliley Act (GLBA)), or student education records subject to the Family Educational Rights and Privacy Act (FERPA). If you need to generate realistic placeholder data, check out the Craft Data plugin.
Creating a document in InVision Cloud V7
After signing in to Cloud V7, you're ready to create a document:
- At the top right of your InVision dashboard, click the pink + button.
- Choose the document type you want to create, or create a new Space:
- Space: Spaces let you create project folders, where you can store multiple documents.
- Prototype: Mock up an interactive web, mobile, or wearable experience.
- Board: Use boards to curate a mood board, design story, or collection.
- Freehand: Sketch, give feedback, or co-draw in real time.
Uploading and syncing screens to prototypes
After creating a document, you'll be prompted to upload screens.
Accepted file formats and size limits
The formats we support vary depending on whether you're uploading a screen or a source file.
For screens, we currently only support upload of source image files in the following formats:
We recommend uploading Photoshop and Sketch files via Craft Sync. You can also upload Studio files directly from Studio.
When uploading an image to your screens, there is a 10MB file size upload limit. Individual files can be up to 500 MB, and accounts can hold up to 10 GB in the InVision Sync Mac app and/or when uploading or dragging/dropping files into InVision via your browser.
The 10 GB limit does not apply to Enterprise plans.
Manual screen uploads
To upload your screens manually, click the pink + at the right of your project dashboard, click Upload Screens, and then select the files you'd like to add as screens.
Alternatively, you can drag and drop any .png, .jpg, or .gif file over an open space in the screens tab (dropping on an existing screen can result in replacing a screen, if screen names are the same).
Important: Once you've updated screens and you're ready to replace old versions, please note that if you want to auto-replace screens (either when syncing from your design tool with Craft Sync or using the instructions below), each screen must have the same file name as the screen you are replacing, otherwise they'll upload as entirely new screens. If named identically, any screen you replace should retain all hotspots, templates, and comments associated with the previous version.
To replace one or more screens via Craft Sync, simply ensure the screen names (artboards) remain identical to the previous time you synced them, and click the Sync plugin icon (). For more information on using Craft Sync, check out this article in our Knowledge Base: How do I publish prototypes from Sketch or Photoshop?
To replace a single screen in Cloud V7:
- In InVision, open your prototype.
- On the main screens page, locate the screen you want to replace.
- Drag and drop the updated screen image into the browser—directly over the screen it should replace.
To replace multiple screens in Cloud V7:
- In InVision, open your prototype.
- On the main screens page, click the pink + button, and then click Upload screens.
- Drag and drop all of the replacement screen images.
To replace screens previously uploaded as PDFs, you'll need to upload via source files. This will initially sync all screens of the PDF and subsequently will sync only the pages in the PDF that have been updated. Comments and hotspots should all remain in place.
Screen sizes for desktop and web
When designing for desktop and web browsers, you can either size your screens for a specific target resolution or take advantage of features like auto-stretch backgrounds, scaling of screens down to browser width, and the screen alignment options to make your screen suitable for various resolutions.
If designing for a target resolution, there are two resources that can be helpful:
- This site includes common desktop devices and their resolutions.
- W3Counter breaks down screen resolutions by popularity each month.
InVision will display any image at 50% by using the prescribed high-resolution modifier, @2x. For example: email@example.com
Note: Use only when necessary as full page retina images may double your prototype's loading time.
Learn more about using @3x here.
Screen sizes for mobile and tablet
This website for screen sizes includes popular mobile and tablet screen resolutions.
Important: you should take care to adjust your screen dimensions to account for the status bar if necessary. See "Including the Status Bar in iOS" below for more details.
For the iPhone in particular, you can use this great resource from PaintCode. Remember, mobile prototypes can scroll, so the screen heights listed below are simply minimum heights for your designs. When deciding what size screen to use, you should note that particularly large screens may appear blurry when viewed in Safari on iOS. For more information, read this article in our Knowledge Base: Why are my images in iOS blurry?
Including the status bar in iOS
InVision will overlay a status bar on your designs by default, so including a status bar in your design isn't necessary unless you prefer to include it. If you find that the status bar InVision provides is cutting off the top of your mobile screens, click the My design starts below the status bar checkbox in your prototype settings—accessed via the ••• (More) menu at the bottom-right of the window when viewing the prototype.
If you have selected the My design starts below the status bar checkbox), you’ll need to leave appropriate blank space at the top of your design, as specified here for each model:
- iPhone X: 44px height
- iPhone 6 Plus: 60px height
- iPhone 4 – 6: 40px height
- iPhone non retina: 20px height
- Retina iPads: 40px height
- Non-retina iPads: 20px height
Additionally, note that you’ll need to use an external tool (e.g. Studio, Sketch, Omnigraffle, Adobe Photoshop, Pencil Project, or Microsoft Paint) to edit your images' sizes before uploading your image files in InVision.
Including the status bar and nav bar in Android
On Android prototypes, you can exclude the status bar in your design and check the box for My design starts below the status bar to let InVision take care of the status bar. Alternatively, you can account for the height of the status bar in your design.
For some Android devices, you might also need to account for the height of the nav bar in your design.
For more on the height of these system UI elements, see Google's design spec for Android and Chrome OS.
Adding interactivity to documents
Once your screens have been uploaded, you'll be ready to open Build mode so you can add interactivity between screens using hotspots as well as adjust various settings for your prototype.
Hotspots link your screens together. Depending on your prototype type, you'll have various choices for hotspot behavior.
To create a hotspot:
- Click a screen.
- In the toolbar at the bottom, click the Build icon () or simply press B on your keyboard.
- Click your screen and drag a blue box around the area where you want to add a hotspot.
- The hotspot menu will open, and you'll be prompted to designate the following:
- Destination: The destination screen your user will be directed to once they trigger the hotspot.
- Click or Hover: This determines whether the hotspot will be triggered by clicking it or hover over it.
Note: Hover is not available for mobile prototypes; however, tap, double tap, and swipe options are available for triggering hotspots on mobile prototypes.
- Maintain scroll position after click: Check this box if you don't want the scroll position to reset after the hotspot is clicked; if you choose to maintain scroll position, the user will be taken to the same point on the destination screen.
- Include hotspot in template: Check this box if you want to duplicate hotspots across multiple screens. More on hotspot templates below!
To resize a hotspot you’ve already created:
- Open the appropriate screen in Build mode.
- Move your cursor to one of the corners of the hotspot, where the cursor will change into a diagonally pointing arrow.
- Click and drag the corner to resize the hotspot.
You can save time and energy using hotspot templates. When screens share common links, you only have to create hotspots for them on one screen, and then you can add those hotspots to a template. From there, you'll be able to apply that hotspot template to the rest of your screens. You can assign a new or existing hotspot to a template.
To set up and apply hotspot templates:
- Create a hotspot.
- In the hotspot modal, select the Include hotspot in template checkbox.
- Click Create New (when initially setting up hotspot) or select the pre-created hotspot from the dropdown and click Save.
- Repeat the above steps for any additional templated hotspots on this screen only.
Once you've added all the hotspots to your template on that screen, go to any other screen. From the templates drop-down, select the checkbox next to the template.
You can also apply a template across multiple screens at once. To apply a bulk hotspot template:
- View a screen in Build mode.
- Near the top of the browser window, click the hotspot template drop-down arrow.
- Hover over the hotspot template name and click the lightning bolt () icon, which will open a screens drawer—just above the toolbar at the bottom of the browser window.
- Select all the screens you want to apply the template to, and then click Done.
Background color or image
InVision pulls the bottom corner pixel colors and tries to match the background as closely as possible. In most cases it's seamless, but when working with a desktop prototype, if you need to change the background color or replace the color with an image on a given screen, it takes just a few quick steps.
To change the background color or image for your screens in a desktop prototype:
- Open the appropriate screen in InVision.
- Click the ••• (More) menu at the bottom-right of your window.
- Under the Background heading in the screen configuration modal, update the color using a hex code or by clicking one of the document colors. Or upload an image by clicking Upload New and then setting the placement of the image to Center (), Tile (), Tile Horizontally (), or Fixed ().
- To use the background on all screens in the prototype, select the Apply to all current and future screens checkbox.
- Click Save.
Note: The background setting is currently not available for mobile prototypes. If you need to adjust the background color of a screen for a mobile prototype, the background color must be updated within the design tool used to create the screen.
Fixed headers and footers
Adding subtle transparency to things like fixed navigation goes a long way in raising the bar of fidelity and realism in your prototypes.
You can set fixed headers and footers on mobile and desktop prototypes. While viewing the screen in Build mode, you'll notice Fixed Header and Fixed Footer checkboxes in the upper-right corner of your browser window. Once you select one or both of those checkboxes, simply drag the slider control icon () to define the area that will remain locked in place while the rest of the screen scrolls.
Note: Fixed headers and footers are limited to 45% of the image height to ensure that the prototype is still scrollable after adding fixed headers or footers.
If you want an element—such as a button or perhaps a Contact modal or other important element—to float on top of your design as you scroll, you can create a fixed element using the fixed headers and footers described above. Fixed sidebars are not present at this time, but the functionality is being considered within a future release.
To create a fixed element:
- Open your design file and add extra transparent space to the bottom of the design.
Note: Be sure to leave room for approximately 20px of margin to the right and bottom of where you will place the fixed element.
- Drop your button or other fixed element into the transparent space.
- Export your screen as a PNG, so the file will maintain the transparent space (rather than fill the space with a color, like a JPG or other image file would).
- Upload it to your prototype in Cloud V7.
- Open Build mode and mark that transparent area at the bottom of your prototype screen as a fixed footer or header.
When you set up a timed redirect on a hotspot, you can define the time duration that passes before the the screen triggers a transition and opens the destination screen.
To set up a timed redirect on one of your screens:
- Open the appropriate screen in your prototype, and enter Build mode.
- Just above the top of your prototype screen, click the timer () icon.
- Click the Automatically Redirect To drop-down arrow and select your destination screen.
Note: Alternatively, click Browse to open your screen thumbnail drawer and select the destination screen there.
- In the After text field, enter the time duration (in milliseconds) you want to pass before the transition is triggered.
- If working with a mobile prototype, click the Transition drop-down and click the transition effect you want.
- Click Save.
To turn off the timed redirect, click the timer icon again, and then click Turn Off. Timed redirects within an overlay (animated or static) aren't supported today, but this is something that we're considering for the future.
There are various ways you can customize your prototype settings.
More menu (•••)
You can adjust additional settings by clicking the ••• (More) menu at the bottom-right of your screen in Build mode.
Here's what the ••• (More) menu lets you adjust in a desktop prototype:
- Design Alignment: Align your design to the left, center, or right.
- Zoom and 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 prevents wide screens from scrolling left or 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.
- Open a screen in Build mode.
- At the bottom-right of the browser window, click the ••• (More) menu icon.
- Under the Background heading, click Upload New.
- Click the lock icon.
Mobile prototypes have additional settings, as well:
- Status Bar Style: If you want your design to start below the status bar, select the My design starts below the status bar checkbox. For more information on this setting, see the "Including Status Bar in iOS" section above.
- 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.
Note: There is currently no way to remove the status bar for viewing a prototype on a mobile device.
Prototype orientation and types
To change your device type (Desktop, Tablet, Mobile, or Watch) and orientation:
- Sign in to your InVision account.
- Navigate to your documents, and click the prototype you want to manage.
- At the top-right of the document landing page, click the ••• (more) button, and then click Change device type.
- In the Choose a device type dialog, click the type you want to use.
Note: If using any type other than Desktop, be sure to click an orientation option.
- Click the pink Change Type button.