iPhone 6 Screen Size and Mobile Design Tips - Updated for iPhone 8 & X!

 

iphone ui design size

Apple updated its iPhone a bit ago making the form factor much bigger. The iPhone 6 screen size is both wider and taller and the iPhone 6 Plus also has a higher pixel density. This is an update to my previous post about designing websites for the iPhone 5. It’ll cover these new screen sizes and try to clarify how this all works. Oct 13,  · As a UI Designer myself, I found these tips useful as the first thought when designing iPhone X: Unlike the previous iPhone generation, iPhone X screen is points taller (approximately 20% from previous generation) and has rounded corners. Use the correct size artboard. The Apple iPhone X has a ” screen. In portrait orientation, the width of the display on the iPhone X matches the width of the ″ displays on the iPhone 6, iPhone 7, and iPhone 8. However, the iPhone X display has a different height; the iPhone X screen is points taller (approximately 20 percent more space available for content).



The future of the smartphone is finally here. The biggest step iphone ui design size since the original iPhone, iPhone X sets a new bar for mobile app designers and developers.

Not only do we need to adapt our apps to fit the iPhone X, but we need to consciously design for the iPhone X and utilize its new features to create better UX for our users. These resources help you design apps that match the iOS design language. The good news is that best practices for mobile app design are still applicable for iPhone X, so you already have a solid foundation for your design. The Apple iPhone X has a 5.

In portrait orientation, the width of the display on the iPhone X matches the width of the 4. However, the iPhone X display has a different height; the iPhone X screen is points taller approximately 20 percent more space available for iphone ui design size. This means that designing for iPhone X will require an Adobe XD artboard at the x point resolution.

The iPhone X has a different aspect ratio than 4. While all existing images will be scaled iphone ui design size fit iPhone X automatically, iOS might letterbox or crop them. Both options can create a bad UX. Test images on both the 4. The most notable feature of the iPhone X display is its shape, iphone ui design size. The screen is no longer rectangular — instead, it has rounded corners and a notch on top of the screen the area where all sensors are located.

It is very important to make the UI experiences full-screen, allowing them to bleed to the edges uninterrupted. Vertically scrollable layouts such as tables and collections should be continued all the way to the bottom of the display, iphone ui design size. Place elements in a safe area to prevent clipping, iphone ui design size.

Such places are iphone ui design size in pink in the image above. The safe area ensures appropriate insetting based on the context — and helps you keep UI elements within the always-visible portion of the screen. The safe area also prevents content from underlapping the status bar, navigation bar, toolbar, and tab bar, iphone ui design size.

Center visual information and controls. Most apps look and work best when controls and visual elements are centered. In the first case, the layout shifts around based on how a device is being rotated and this leads to an inconsistent user experience. An asymmetrical layout at left UI controls have different inset from the left and right edges of the screen vs.

The notch is the cut-out at the top of the screen where you can find the front camera, speaker, and sensors. In an attempt to create a more familiar look, some designers have tried to hide the sensor housing by placing a black bar at the top of the screen. However, placing a black bar at the top of the screen makes your app layout feel small and inconsistent with other apps on the iPhone X.

The notch area marked by a iphone ui design size rectangle in this picture is hidden. When you hide the sensor housing — for example by placing a black bar at the top of the screen — this makes your app look inconsistent with other apps on the iPhone X.

By making the notch visible, you create a more consistent experience for your users. Users might be interested in knowing whether or not they are connected to Wi-Fi when the app regularly downloads content from the internet. With the release of the iPhone X, Apple removed one of the most notable elements of the previous models: the home button. Since the physical home button is now gone, users rely on gestures to interact with their iPhone. Swiping upward from the bottom edge of the display becomes the basic gesture for iPhone X users — by doing that, users can access the app switcher and the home screen.

The element that tells users that this interaction is possible is called home indicator, iphone ui design size. This indicator is located at the bottom of the screen, and should be taken into account when designing your app. The hardware home button was replaced by a virtual home indicator — a horizontal line at the bottom of the screen that serves as a visual reminder to users that they can swipe upward to go back home. The iPhone X is an attempt to use gestures to maximize content space on the mobile screen.

With it, Apple has changed the meaning of some of the existing iOS swipe gestures and created new ones. Since gestures are hidden elementsiphone ui design size, users will have a hard time finding, remembering, and using them. When users switch from an older iPhone to an iPhone X, they will have to learn new gesture interactions and create new associations. This is likely to cause problems in the beginning because people will need time to adapt to the new interaction patterns, iphone ui design size.

To help users transition to the iPhone X more smoothly, designers should avoid creating custom gestures and gestures that block or interfere with system-wide gestures. Avoid placing any interactive elements in the home indicator area. Avoid placing non-scrollable interface elements in close proximity to the home indicator. The space around the home indicator is allocated for the swipe-up gesture, which is used to go home or to access the app switcher.

If you place buttons near the home indicator, users might accidentally use the home gesture. Leave negative space around the indicator by putting interactive elements in the safe area. Safe area dimensions are: by points for portrait mode, and by points for landscape mode. Avoid visual adornments, such as bezels, iphone ui design size, to highlight the indicator. People rely on system-wide screen-edge gestures to work in every app. When you block them, it makes it harder for people to access the system-level actions, increases cognitive load, and makes the experience inconsistent with other apps.

Edge protection for swipe-upward gestures. Edge protection requires two swipes to exit your app. Because edge protection leads iphone ui design size inconsistent user experience, it should be used only when necessary. This allows users to unlock their device or perform password-protected actions inside apps by scanning their fingerprint.

This sensor was hidden inside the home button. Machine learning enables Face ID to adapt to the physical changes in your appearance over time. Apple Pay is a secure, easy way to make payments for physical goods and services.

Previous iPhone generations use Touch ID as a way to authenticate a transaction. That means that contactless payments, which use NFC technology to communicate transactions to payment terminals, are now even more effortless.

Before iOS 11, designers and developers who wanted to use AR usually had to build AR capabilities into the apps themselves. The lack of a shared AR engine made the experience expensive and non-standard — interaction patterns varied from one app to another. And since iOS 11 is already rolled out across hundreds of millions of Apple devices, it means a huge AR-ready customer base is ready to try AR experiences.

Designers will focus on building both apps for entertainment and functionality. In designers should be ready to embrace the world of AR. Ten years ago, the first iPhone started the mobile revolution. With the release of iPhone X, Apple set a high bar for future mobile experiences. What are your top tips for designing for the iPhone X? Let us know in comments below!

To post a comment, please sign in. Customer Experience. Adobe Products Featured. Consider aspect ratio differences when reusing artworks The iPhone X has a different aspect ratio than 4. Adapt for the new form factor The most notable feature of the iPhone X display is its shape. Center visual information and controls Most apps look and work best when controls and visual elements are centered.

Gestures With the release of the iPhone X, Apple removed one of the most notable elements of the previous models: the home button. Try to avoid using custom gestures The iPhone X is an attempt to use gestures to maximize content space on the mobile screen.

Avoid placing any interactive elements in the home indicator area Avoid placing non-scrollable interface elements in close proximity to the home indicator.

Make purchases with Face ID Apple Iphone ui design size is a secure, easy way to make payments for physical goods and services. Augmented reality Before iOS 11, designers and developers who wanted to use AR usually had to build AR capabilities into the apps themselves, iphone ui design size. Topics in this article Creativity. Recommended Articles.

 

 

iphone ui design size

 

Sep 13,  · Dimensions: px x px (pt x pt @3x). Layout. When designing for iPhone X, you must ensure that layouts fill the screen and aren’t obscured by the device’s rounded corners, sensor housing, or the indicator for accessing the Home screen. Cropping and aspect ratio. Be mindful of aspect ratio differences when reusing existing artwork. Apple updated its iPhone a bit ago making the form factor much bigger. The iPhone 6 screen size is both wider and taller and the iPhone 6 Plus also has a higher pixel density. This is an update to my previous post about designing websites for the iPhone 5. It’ll cover these new screen sizes and try to clarify how this all works. Apr 23,  · Font size guidelines and best practices for iPhone and iPad (updated for iOS 11). Includes all UI elements, as well as guidelines for using the San Francisco font – .