Screen sizes for desktop and web
When designing for desktop or web, you can either size your screens for a specific target resolution or use InVision to make your screens suitable for a variety of resolutions. To learn more, check out this article: How does the zoom/scroll feature behave?
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.
Screen sizes for mobile and tablet
Materialdesign.io also includes popular mobile and tablet screen resolutions.
For the iPhone in particular, paincodeapp.com is a great resource.
Note: Adjust your screen dimensions to account for the status bar if necessary. For more information, read the section "Including the status bar in iOS" below.
Remember, mobile prototypes can scroll, so the screen heights listed on these sites are usually 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: 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 space for the status bar in your designs:
- Navigate to your prototype and click to view a specific screen.
- At the bottom of the page, click the configuration icon ().
- Check the box My design starts below the status bar.
- Click Save.
If you want to include space for the status bar in your designs, we recommend these dimensions:
- iPhone X: 44px height
- iPhone 6 Plus: 60px height
- iPhone 4–6: 40px height
- iPhone (non-retina): 20px height
- iPad (retina): 40px height
- iPad (non-retina): 20px height
Note: Prior to uploading your image files in InVision, you will need to edit your images' size with an external editor (InVision Studio, Sketch, Adobe Photoshop, Pencil Project, etc.)
Including the status bar and nav bar in Android
Just as with iOS devices, 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 space for the status bar in your designs, follow the steps listed in the previous section to start your design below the status bar.
For some Android devices, you might also need to account for the height of the nav bar in your design. For more information, check out Google's documentation on Android bars.