Design for iPhone X

iPhone X

The iPhone X comes with a Super Retina Display, at 1125 x 2436 px resolution. It boasts a 458PPI (pixels-per-inch) screen, which is the highest density Apple has built so far. The Notch comes with a state-of-the-art facial recognition feature. It is one of its kind in the market and is a unique aspect of the phone.

At 1x, the iPhone X is at 375 x 812pt; the width is the same as the iPhone 6, 7 and 8 but 145pt taller. This gives us a new design challenge, but Apple has an excellent guideline to let us kickstart the design without going wrong. In the meantime, the benefits of a taller screen are that we have more spaces for contents!

Setting Up for iPhone X in Sketch

Let’s start designing the Bookmarks screen in Sketch, but before that, we need to download the official iOS 11 Sketch template from the Apple website. This version provides the most accurate and up-to-date iOS 11 components. This download not only comes with the UI templates, but also includes the latest San Francisco Pro fonts.

Adding iOS 11 iPhone X Template as a Library

Unzip the iOS 11 template that you downloaded from the Apple website. Look for the file named “UIElements+DesignTemplates+Guides-iPhoneX.sketch” and then, rename it to “iOS 11 - iPhone X”. By shortening the template name, you will find it easier. Now, go to the Libraries tab in Sketch Preferences and drag the iOS 11 template to it.

iPhone X Artboard

Add an iPhone X Artboard by pressing A or go to Insert › Artboard and choose the iPhone X from the Inspector panel on the right.

iPhone X Frame

After adding an iPhone X Artboard, the first element to insert is the frame of the iPhone X. Using the Sketch Runner plugin will make it easy for you to find the iOS 11 components. Sketch Runner can search the keywords and preview the Symbols when you navigate them one by one.

Activate Sketch Runner and go to the Insert tab. Type frame to find iPhone X Frame. Double-click or just press Enter to insert it into the Artboard. Align it to the center of the Artboard with Alignment tools at the top right corner of the Inspector. Now, this Artboard immediately looks like an iPhone X!

The New iPhone X Status Bar

You can now insert the new iPhone X Status Bar to the Artboard. Find the Status Bar in Sketch Runner and choose Light Status Bar then, put it in the Artboard. Align it correctly to the top and center of the Artboard.

The New Home Indicator

To accommodate an edge-to-edge Super Retina display, Apple abandoned the physical Home button and replaced it with the new Home Indicator. Home Indicator is a small horizontal line at the bottom of the iPhone X screen. The spacing around the Home Indicator is created for new gestures; it lets you swipe up to go back to the Home screen or switching between apps. Apple recommends against placing interactive controls at the very bottom of the screen.

Insert Indicator

Use Sketch Runner and type indicator in the Insert tab and choose the black indicator because, we will put it on a light background. If your design has a dark background. Then, it is recommended to use the white version of the indicator for better contrast. Once you’ve selected the black indicator, it aligns it in the center and place it at the bottom of the screen.

Locking Layers

Now, we have all the exclusive iPhone X elements on the Artboard. To avoid accidentally select these elements, you can lock the iPhone X Frame, Status Bar and Home Indicator. Hold down the Option key, hover your mouse to each of the layers and a padlock icon will appear. Click on it and the layer will be locked. This means that the layer cannot be selected or moved on the Canvas unless you unlock the layer. There is a shortcut to toggle lock and unlock layer by pressing Shift Command L.

Safe Area and Layout Margins

Same as in Design for iOS 11, we need to ensure the content stay centered, symmetrically on the screen, doesn’t cover the iPhone X notch and the Home Indicator.

For portrait mode, the margins on the left and right are 16px. In landscape mode, the left and right margins are 20px. We only will design in portrait mode for the Bookmarks screen, so you can use Rulers to set the 16px of left and right margins. In the official iOS 11 iPhone X template that you’ve downloaded, you can find those Safe Area and Layout Margins in the Guide - Safe Areas page. Copy to your Artboard if you need it.

Navigation Bar Title

We are done setting up the iPhone X essential elements and now, we can go into the details of Bookmarks screen design! With the new iOS 11 design, Navigation Bars are getting taller and capable of inserting larger title. This unique style is looking good especially for the iPhone X, but this doesn’t mean you must use it as part of your app design. It’ll need to use in the correct context and doesn’t compete with your contents. A standard size title will transition from a large title as you scrolling the content.

Insert Navigation Bar

Now, we are going to insert the Navigation Bar into the Artboard. Search the keywords “navigation bar with search” in Sketch Runner and we are using the one with the name “Light Large Navigation Bar With Search” from the iOS 11 template. Then, place it to the Artboard and align it to the top and center. Move this Navigation Bar layer to the bottom of Frame and Status Bar in the Layer List on the left.

Overrides Large Title

Let’s customize the Navigation Bar with the actual content of the Bookmarks screen. First, select the Navigation bar and find the “Large Title” section from the Overrides in the Inspector on the right side, which is the last one in that list. Just type “Bookmarks” in the Large Title text field and press Enter, the Navigation Bar will be updated.

Update Library Symbol

You will notice that in the Bookmarks word, the letter “s” is dropped to the next line. We don’t want this. To fix this, ** double-click ** the Navigation Bar Symbol and click Open in ** Original Document **. This will bring you to its original document and allow you to edit. Bear in mind though that the changes you make in the original document will update any Sketch file that uses it as a Library.

Sketch will smartly focus on the exact Symbol in the original document. You will see the original Symbol now, select the Large Title layer and set it from Fixed to Auto in the Inspector panel. Save this original document and close it. Go back to the previous document and you will spot a purple badge on the top-right corner of the application with the caption Library Update Available. Click on the purple badge and a dialog will pop-up, showing you the OLD and NEW version of the Symbol that has been modified. We are going to get the new updates by checking the Symbol and then, click Update Symbols. Now, you will notice that the Bookmarks word is on one line, well-done!

Hide Unused Symbols

Next, select the Navigation Bar to remove the Back Button, Star and Dictation icons in the search field by finding their override and choose None in the drop-down. We don’t need all of these icons for the Bookmarks screen. You are still able to place back those icons by selecting the elements you want in the Overrides drop-down menu.

Insert Icons on Navigation Bar

We are going to place three icons on the Navigation Bar, which is Increase Font Size, Decrease Font Size and Night Mode icons. These icons can help the user have a better reading and viewing experience when they are using the Design+Code app.

Icon size on the Navigation Bar is 28px of height and width at 1x. You can find this info by analyzing the iOS 11 iPhone X template. It is a good practice to put your icon in a box so that all the icons are consistent.

Navigation Bar Icons

You can grab the three icons and the assets file that we mentioned from the beginning. Inside the “Navigation Bar Icons” folder, you can find three icons. Copy and paste them on the Artboard. Each of the three icons are different sizes, let’s draw a 28 x 28px bound for these icons. Rename the rectangle to “Bound” and then, align the icon with the bound. Try to give at least 1px to 3px of margins around the icon. For example, we align the Decrease Font Size icon to the center and bottom of the bound. We also gave a 2px margin from the bottom. Once you have aligned the bound and the icon, select the bound and disabled its Fill because we just need a transparent bound. Then, you can either put the bound into the icon group or choose both of them to create a new group.

Tab Bar Icons

After that, convert these icons into Symbols with this naming structure “Tab Bar Icons/Font Decrease” respectively for all three icons. With this, our Symbols will be neatly organized and easy to find. Lastly, place them on the right side of the Navigation Bar Title with an 8px margin between each of them and 16px against the border. You can group these three icons with the Navigation Bar.

Table Rows

Now, we can start to design the Table Rows that are showing the bookmarks list. First, draw a full-width white rectangle and rename it to “Base”, we’re using it as a container for the table row. Then, copy the “image.svg” from the “Table Row Icons” folder in the assets folder, paste on top of the Base layer and give it 16px top and left margins. Convert this icon to a Symbol with the name “Table Row Icons/Image”. Draw a blue 18px round shape and then, insert a number with 15px SF Pro Text Bold White. Change the text Alignment to Center and place this number with a round shape on the top-right of the image icon. Group the Image icon, round shape, the number and rename it to “Icon”.

Row Layers

Next, we are going to create 3 texts layers, Section, Title and Subtitle. All the texts are aligned to the Left. Set the font values as follow:

1. Section: 15px, SF Pro Text Semibold, #9b9b9b
2. Title: 20px, SF Pro Display Semibold, Black
3. Subtitle: 17px, SF Pro Text Regular, #4a4a4a

Alignment

Align the section text layer next to the image icon with an 8px margin and 16px margin from the top of the container and then, stack the other two texts layers below Section but give them a 4px gap between them. The Subtitle text layer has two lines of content, so we need to type out the 2nd line of it then, we can give a 16px of margin-bottom. Now, you will need to resize the height of Base layer to get the 16px gap. Then, resize them to 291px of fixed width in the Inspector, so that they will have a 16px of the right margin.

We will need a divider line, so that it is distinguished when we stack multiple Table Rows. You can just draw a line with Insert › Shape › Line or you can follow our recommended way to draw a divider line. We prefer to use Inner Shadows on a rectangle shape to make a divider line. This is useful, because when the shape is resized to whatever sizes, the line will remain the height that you’ve set.

Resizing

So, let’s copy the Base layer and resize it the same as the three text layers width, which is 291px. Align it to the position corresponding to the text layers. By selecting it, go to Inspector panel and look for Inner Shadows. Click the + icon, set the color opacity to 10%, set the Y value to -1 and make sure the Blur and Spread are set as 0. X value is for left and right, Y value is for top and bottom, so set -1 in Y will give the shape layer a bottom 1px line. This is a handy tip for making divider lines and borders.

We have done the design for the Table Row and this will be used for multiple times in this Bookmarks screen. So let’s convert this to a Symbol, but before converting, we should arrange and rename the layers appropriately. The Subtitle layer is renamed to just “Subtitle” instead of “Subtitle 2 line”. Below is the final layers sequence arrangement. Rename the group to “Bookmarks Row”.

Bookmark Row

After you’ve arranged those layers, now you can create the Bookmarks Row to a Symbol. Once it converted to a Symbol, duplicate the Bookmarks Row and stack them below. You can press and hold Option, drag down the Bookmarks Row and then, just press Command D two times to repeat the duplication. Now, we can insert the content into these 4 Symbols. Copy the text from the Content file in the assets folder and paste them respectively. In the meantime, import the other two icons which are “code.svg” and “text.svg”. Then, convert them to Symbols so that you can override the Image Symbol.

Uppercase

Now, all the contents and icons are inserted in the Symbols, but the Section text looks odd, we should change the text to all Uppercase to get a better visual hierarchy . If you double-click one of the Bookmarks Row Symbol, Sketch will bring you to the Symbols Page. In here, we can only edit the Section text style. Select the Section text layer, go to Inspector and find the Options with a gear icon. Click on it then, click on Text Transform and choose Uppercase. Lastly, click on Return to Instance at the top-left of the Canvas to go back to Bookmarks screen. Now, all the 4 Bookmarks Row Section texts are in uppercase, this is the power of Symbols and change once update all.

iOS 11 Tab Bar and New Icon Style

There’s only one more element to complete for the Bookmarks screen! The last item to create is the iOS Tab Bar at the bottom of the app. In general, it is recommended to use between 3 to 5 tabs on an iPhone app. In iOS 11, Apple introduced a new icon style; they called it Glyphs. Unlike the previous iOS version icons, Glyphs are solid, monochromatic icons with transparency. Apple has default icons that you already can use or you can create your own Custom Icons. There are many downloadable icons for iOS that you can easily find on the internet, like this iOS 11 Glyphsbuilt by Icons8.

For the Design+Code iOS app, we have five tabs for five different screens. So, let’s use Sketch Runner › Insert to search this keywords “tab bar 5” and choose the one “Light 5 Tabs” from iOS 11 iPhone X Library. Place it at the bottom of the screen, rearrange its layers to the bottom of Frame and the Home Indicator in the Layer List.

Tab Bar

Recommended Tab Bar icon size is 28 x 28px. We will need to create a bound for them just like what we did for Navigation Bar icons, but this time we are going to use a Tab Bar Size Guide from iOS 11 iPhone X Library.

Search the keywords “tab bar size” in Sketch Runner › Insert and you will see the only option to choose. Place it on the Canvas, right-click it and select Detach from Symbol. By doing this, we can measure the icon size accurately with the red box guides.

Tab Bar Icons

Drag all the icons in the “Tab Bar Icons folder from the assets folder to the Sketch document. Then, duplicate the Tab Bar Size Guide for each of the icons you pasted. Align all the icons in the center of the red square box, that is the safe area for where the icon should be placed.

Tab Bar symbols

Then, select Tab Bar Size Guide with the icon and convert them to Symbol. Name the Symbol “Tab Bar Icons/Home” and “Tab Bar Icons/Bookmarks” accordingly. We don’t want the red boxes to be visible, so we can hide the Tab Bar Size Guide layer in the Symbol by hovering the layer and toggle the eye icon. You can select the layer and press Shift Command H to hide the layer.

Active / Inactive Tabs

The sequence of the tab is Home, Chapters, Bookmarks, Exercises and More. Since this is the Bookmarks screen, we need to change the first tab’s Active state to Inactive state and change the third tab to the Active state. Simply select the Tab Bar Symbol, go to Overrides panel, click the drop-down at the Tab 1 and choose iOS 11 - iPhone X › Bars/Tabbar/Tab - Inactive. For the Tab 3, choose “iOS 11 - iPhone X › Bars/Tabbar/Tab - Light Active”.

Final Touch

Now, we can start to override the icons and text of the Tab Bar. The workflow is the same as what we did just now. Change the icon in the icon drop-down and override the text in the Label field. You will notice that the “Bookmarks” label is broken and to fix it, it is the same flow as updating the Navigation Bar Title. Just double-click on the Tab Bar Symbol, click Open in Original Document and you will directly go to the Tab Bar original Symbol. Double-click the Inactive Symbol and change the text from Fixed to Auto. Repeat the same for the Active Symbol. Save the original document and go back to the Bookmarks screen. You will see the purple badge of Library Updates Available, click on it, just click Update Symbols and the Tab Bar’s Bookmarks tab label will be updated.

Conclusion

This is the end of the tutorial, you have completed the Design+Code iOS Part 2 by designing the Bookmarks screen! Hope this tutorial helped you to have a better understanding at how to design for iPhone X. You should try to design your own concept from what you’ve learned!