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
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
- 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.