iPhone X Visual Design Specification

THE CHALLENGE

CREATE THE IPHONE X VISUAL DESIGN SPECIFICATION

My Goal was to create the iPhone X Visual Design Specification to communicate to the Mobile Application Framework ( MAF ) Designers and Developers where graphic elements and navigational controls can be placed within the following user interface areas:

  1. Status Bar.

  2. Navigation Bar.

  3. Tab Bar.

  4. Home Indicator.

MY ROLE

I conducted the research and created the layout for the iPhone X visual design specification in both the portrait and landscape orientation. This is important information to communicate to both the design and development teams for the following reasons:

  1. The placement and layout of some of the graphic elements and user interface controls changes as the iPhone X is rotated from the portrait to landscape orientation.

  2. Elements which are placed within the status bar must not interfere with the rounded corners or the notch containing the sensor housing that is centered within the area.

  3. The parent title is left-aligned within the navigation bar and the page title is centered horizontally.

  4. When large title text is used, it is left aligned and positioned below the parent title.

  5. As the user swipes the content upward, the large title text slides under the navigation bar and becomes small title text centered horizontally on the navigation bar.

MAF iPhone X Styling TD Approved.jpg

THE IMPACT

The iPhone X visual design specification was considered very successful in that it communicated important information to our MAF Design and Developer teams. It was also very well received by:

  1. Our Customer base who were using our technology to create applications and products for the iPhone X.

  2. Our Engineering teams as we worked with them to ensure successful implementation.

  3. Our Management team as the iPhone X visual design specification met the requirements that we had received from Product Management.