Designing for iPhone X with Justinmind
Designing for iPhone X with Justinmind — the most powerful prototyping tool for Apple’s cutting-edge mobile device
A new version of Justinmind has arrived! Our latest release brings you a brand-new iPhone X mobile prototyping experience.
With our iPhone X mobile template, you can create clickable mobile app wireframes and mockups for iPhone X in a matter of minutes. Our iOS 11 Widget library has everything you need to design full-screen experiences for Apple’s all-screen mobile device.
But that’s not all! With our fonts update, you’ll also find faster ways to create and collaborate with your team. Additionally, there are new search and replace capabilities, customizable privacy settings for shared prototypes and better transition effects when you download the latest version of Justinmind. Read on for an overview of all our headline features, plus some powerful improvements.
Don’t forget to sign up for our New Release webinar, taking place March 20th!
Designing for iPhone X: a larger display
Embrace the tallness of the iPhone X, all 5.6” (143.6 mm) of it. The display itself is 332 pt (7mm) taller than the iPhone 8 — that’s the equivalent of 7 navigation bars as Design Code puts it. And with virtually no bezel, the iPhone X is all-screen.
So what does this mean for iOS app designers? Here are a few things to keep in mind:
Utilize the entire display
The iPhone X new Super Retina Display boasts a 5.8” screen, so make sure you use all the real estate available. Use full screen images and layouts that extend to the edges of the display and remain visible upon scrolling. The idea is to fill the user’s hand, and create a content-rich, full-screen experience.
If you’re after some inspiration, check out our compilation of inspiring iPhone X app designs.
Respect the curve
The iPhone display has rounded edges, creating a beautiful curved design and an immersive experience for users. When designing apps for the iPhone X, make sure your backgrounds and full-screen images follow the curves of the iPhone’s display.
As mentioned, we recently released a new mobile prototyping template for iPhone X. The template comes with a device shell, mimicking the iPhone edge-to-edge rounded display and notch (the sensor housing).
Use Justinmind’s iPhone X template to fit your content perfectly within the curved edges. Use our alignment feature to center important content (such as data tables and image collections) to ensure that content isn’t clipped by the device’s edges or the notch.
As for screen content, take a look at Apple’s safe area layout guides for icons and image placement.
Be mindful of recycling old designs
Note the difference in aspect ratio in relation to older versions. The iPhone X is either taller or wider (depending on whether you’re holding it portrait or landscape) than the iPhone 8, adding roughly 20% additional vertical space for content.
Designers, this means that screen backgrounds and layouts created for iPhone 8+ and older will need to be reworked for iPhone X to avoid hidden or cropped sections. Likewise, ensure that iPhone X designs can be adapted for iPhone 8+ and older by keeping visual content and layouts in view on both the 4.7” display as well as the 5.8”.
With Justinmind, you can make your artwork responsive, so that it fits both on different iPhone displays. Scale images and UI elements so that they adapt to the size of your prototype’s display.
Don’t hide the status bar
Trust us on this one.
The status bar is taller on the iPhone X than on previous versions — more than doubling in size (20pt to 44 pt). It also includes a notch in its center.
As recommended by Apple, the status bar (including the area around the notch) should be visible at all times. Hiding the status bar will make your app feel smaller as well as inconsistent with Apple’s design guidelines:
Note that, in landscape view, the status bar should be hidden to maximize on real estate in full-screen mode when viewing photos or videos.
But that’s nothing a little Justinmind prototyping can’t help! In fact, we’ve created some readymade screens to make life even easier. Download Justinmind and have a go!
Designing for iPhone X: new and improved screen resolution
When creating UI assets for the iPhone X, pay close attention to the new resolution. iPhone X has a high-resolution Super Retina display and a scale factor of 3.o. And at 458 (pixels per inch) ppi, icons, UI elements and screens will need to be built out for the new pixel density. Additionally, high-res images are a must.
Keep your pixels under control with Justinmind. The rulers, guides and grid displayed on and around the canvas will help you keep your lines sharp and content crisp. Use the snap to geometry feature to minimize half pixels and blurry details when scaling down.
Designing for iPhone X: richer, dynamic color
Color is also bigger and better on the iPhone X. Users can expect more accurate and saturated color, with true blacks, high brightness, resolution and dynamic range, and a 1,000,000 to 1 contrast ratio.
This is the first Apple device to support a P3 color space with OLED technology, producing a richer, more vibrant display than with sRGB.
To enhance the visual experience for your iPhone X app, use a wider selection of color against a white or black background. Photos and videos will appear more lifelike and create more of an impact.
Experiment with different color palettes for your iPhone app designs with SVG vectors in Justinmind.. With SVG vectors, you can easily change the color (as well as the size) of your app’s images.\
With our new release, Justinmind users can create clickable mobile prototypes for the latest smartphone technology, the iPhone X.
Thanks to our brand-new mobile template, you can start designing for iPhone X as soon as you open Justinmind. In the Justinmind editor, you’ll find our brand-new device template.
Justinmind’s iPhone X editing canvas features a device shell, mimicking the rounded borders of the new Apple device, for a truly immersive prototyping experience.
However, if you prefer to work with a blank canvas, you can easily remove the rounded borders from the canvas view.
The iPhone X prototype template comes pre-loaded with our new iOS Widget library. With 100% iOS compliance, the new library packs all the iOS 11 icons and core components, UI layouts and screen templates — complete with the iPhone X super-retina display backgrounds. It’s everything you need to get down to designing stunning iPhone apps.
Apple lovers will know that when it comes to the iPhone X, the device is the display. Apple’s made use of all available real estate this time around, stretching the display right out to very edge of the phone and eliminating the Home button.
To help you design apps for Apple’s all-display, edge-to-edge device, our updated iOS Widget library includes a set of readymade UI elements and screens that fit the entire iPhone X screen.
Embed fonts in your shared prototypes
With Justinmind’s new release, you can now pair your design with the right fonts every time.
Pre-release, Justinmind users could only use the most common of system fonts. There wasn’t much point getting creative with typefaces when the people you were sharing your prototype with were missing fonts. In fact, prototyping with non-standard fonts often ended with screens with missing text and extensive amounts of rework for the design team.
But all that’s in the past. Now you can use any fonts you like in your prototype and make sure everyone involved in the project has access to them.
So how does it work? It’s simple really. When sharing your prototype with other Justinmind users, or exporting your prototype to HTML, you can embed font code snippets within your Justinmind prototype and store them in your online account.
This means that any Justinmind user you share your prototypes with will see your prototype just as you do, fonts and all.
And if you choose not to embed the fonts, users viewing your shared prototypes will be notified about missing fonts:
Find and replace for text editing
And for the more practical side of prototyping, there’s our new find and replace feature. You can now search for text throughout your entire prototype and then replace each instance with another text entry. No more manual corrections!
This works with any screen UI element that contains editable text. It even works in Masters, so you can match changes globally throughout your prototype and replace all instances at once.
To find a specific entry, go to the “Edit” main-menu option and select the “Find” option.
To replace an entry, select the “Replace” option. You can choose to change this specific instance, or replace all entries in the current screen, or throughout the entire prototype.
Pick which sections of your prototype you share with other users
Customize which prototype screens and scenarios you share with other Justinmind users with this update. To select specific screens and scenarios to share, go to the “Share” option in the main menu and select the “Settings” option.
In the dialog that appears, click the Screens/Scenarios “Filter” radio button and then click on the “Edit Filter” link. Here you can select which screens and scenarios to grant other users access to.
Note that this feature only works when sharing a prototype with other Justinmind users. When you send a link to reviewers, they will still be able to see your entire prototype, including all its screens and scenarios.
Take control of your transition effects
You can now control the speed with which your transition effects play out for events associated with screens and Dynamic Panels.
When you add an event (e.g. Link to/Show/Hide/Set Active Panel etc.) to a screen or Dynamic Panel, the event dialog will include a ‘Duration’ option that allows you to control a transition effect’s speed.
Improvements to your prototyping tool
While we’ve been hard at work bringing you an exciting set of new features, this update also includes some important improvements to your Justinmind editor:
- When you create an event, right click on an action in the Events palette and select “Select targeted components” to keep track of which UI elements have been included in this action
- You can now change the order of Event interactions and actions, bringing the first interaction or action to the end of the sequence, or vice versa with the last
- When a UI element within a group is selected, any other elements on the canvas will appear grayed out so you know which elements the group is made up of
- You can now modify the name of a UI element within the Outline palette
- Zoom is now smoother and includes more levels
- Background image properties now includes a “contain” option, which allows you to fit the image within the UI element, in a fixed position
As always, we take your feedback seriously. If you have any queries or suggestions, you can get in touch with us via our Support page, Twitter or Facebook page.
So that’s a wrap folks! Update Justinmind now for new features, improved performance and better ways to design! Remember, this is a free update for everyone with an active Justinmind subscription of license.
