Sorry, the InVision Help Center does not support Internet Explorer. Please download Microsoft Edge or another modern browser.


What size should my screens be?

Follow

Prototype screen sizes can vary from device to device, but this article aims to provide a few resources for finding common screen resolutions for both desktop and mobile devices.

For information on prototype device frame dimensions in InVision Cloud, check out this article: What are the dimensions for prototype device frames?

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, paintcodeapp.com and this iOS Design Cheat Sheet are great resources.

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:

  1. Navigate to your prototype and click to view a specific screen.
  2. At the bottom of the page, click the configuration icon (configuration-icon.png).
  3. Check the box My design starts below the status bar.
  4. Click Save.
status-bar.gif

If you want to include space for the status bar in your designs, and you're using our recommended dimensions for device frames, you can use these height measurements:

  • iPhone 4: 40 px
  • iPhone 5: 40 px
  • iPhone 6–8: 40 px
  • iPhone 6 Plus–8 Plus: 54 px
  • iPhone X: 132 px
  • iPad: 20 px
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.


Was this article helpful?

Still have a question?

Contact Us