The iPhone X has fundamentally changed app design. With its unique format and new user interface elements, designers must show more flexibility and creativity to create impressive apps. This guide explains step-by-step how you can use Sketch to customize your design to meet the needs of the iPhone X.
Main insights
- The screen height of the iPhone X is 812 pixels, creating space for new UI elements.
- The navigation and tab bar are taller and require layout adjustments.
- It's important to consider the safe area to ensure that no content falls into the rounded corners of the display.
- The home indicator is a new interface element that must be considered during design.
Step-by-Step Guide
Start by creating a new iPhone X design in Sketch. Press A to add a new element, and then click on the iPhone X design.
The width remains at 375 pixels, while the height is set to 812 pixels. This gives you more space to design your user interface. Keep in mind that the rounded corners of the screen are important for the layout.
Copy the home controller and adjust the design. It is advisable not to use the standard libraries, but to use the specific iPhone X Library for a more precise customization. Go to the settings in Sketch and enable the iOS 11 Library if it is not already available.
Add a standard navigation bar to keep the interface consistent. Ensure that the height of the navigation bar is 88 pixels compared to the 44 pixels of the iPhone 8.
Look for the status bar in the iOS 11 library and add it as well. It should be positioned at the top edge of the screen.
The same applies to the tab bar: select a version with three tabs from the iOS 11 library and ensure it is 83 pixels high to fit well into the layout.
Make sure that no elements protrude into the rounded area when designing. In programming, this is called the safe area layout guide – the space you need for a safe view.
Add the home indicator as an essential part of your design. It should be placed in the center of the bottom edge.
After adding the basic elements, you can copy the entire section and paste it where desired. Remember to adjust the spacing after copying.
Repeat this process for the chat controller. Create a copy of the design and rename it accordingly.
Replace the icons for the tabs and adjust the presentation. It’s important to carefully choose the right symbolism and text.
Pay attention to the spacing, especially between the chat bubbles and the tab bar. Maintain a distance of 16 pixels to ensure the elements blend well together.
These steps show how quickly you can adapt your design to the new format. However, if there are uncertainties, feel free to refine the design further.
In the next lesson, you will learn how to work with additional effects in the profile area, including the use of blur effects.
Summary – Effective iPhone X Design in Sketch
Customizing your designs for the iPhone X opens new possibilities. With the right understanding of the new screen formats and UI elements, you can create impressive user interfaces.
Frequently Asked Questions
What is the height of the iPhone X screen?The height of the iPhone X screen is 812 pixels.
How do I customize the tab bar?The tab bar should be 83 pixels high to work well in the layout.
What should I consider when designing?Pay attention to the safe area and that elements do not extend into the rounded areas.
How do I make adjustments in Sketch?Copy the existing controller elements and customize them using the iOS 11 library.
Do I need to adjust the navigation bar?Yes, the navigation bar has a height of 88 pixels and should be adjusted for visual consistency.
