Once your prototype has been created, you'll be prompted to upload screens.
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.
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/Web
When designing for desktop/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:
- 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: firstname.lastname@example.org
Note: Use only when necessary as full page retina images may double your prototype's loading time.
Screen Sizes for Mobile and Tablet
This site also 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, this is also a great resource. 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. See Why are my images in iOS blurry? for more information.
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
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.