Once your prototype has been created, 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.
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 (including Team accounts, as a whole) can hold up to 10 GB in the InVision Sync Mac app and 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 left of your project dashboard, click the upload icon () 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).
Screen sizes for desktop and web
When designing for desktop or web, 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 a variety of resolutions.
If designing for a target resolution, there are two resources that can be helpful:
- Materialdesign.io 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: Full page retina images may double your prototype's loading time, so use only when necessary.
InVision does not currently support @3x. To learn more, check out the article Does InVision support @3x design?
Screen sizes for mobile and tablet
Note: Be sure to adjust your screen dimensions to account for the status bar if necessary. Read the section "Including the status bar in iOS" for more details.
For the iPhone in particular, this article from paintcodeapp.com is a great resource: The Ultimate Guide To iPhone Resolutions
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, check out the article Why are my images in iOS blurry?
Including the status bar in iOS
InVision will overlay a status bar on your designs for you, so including it in your design is up to you.
If you don't want to include the status bar in your designs, check the box for “My design starts below the status bar” in your prototype options.
If you do want to include the status bar, you’ll want to make sure you account for the status bar at the top of your screen.
At the top of your design, leave room for:
- iPhone 6 Plus: 60px height
- iPhone 4–6: 40px height
- iPhone - Non retina: 20px height
- Retina iPads: 40px height
- Non-retina iPads: 20px height
- iPhone X: 44px height
Additionally, note that you’ll need to edit your images' size leveraging an external image editor (e.g. Omnigraffle, Adobe Photoshop, Pencil Project, or Microsoft Paint) prior to 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" and 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.