I found design mistake in Apple iPhone XR’s website

Why I’m writing this article? Because I want to tell the world that I have a keen eye and can find mistakes? No; actually I’m so fond of Apple and it’s design principles that when I found their mistake, it left me in surprise : How is it possible !


This article is in 3 parts : 
1. What’s the scene?
2. Design issue.
3. Why is it bugging me?

Hi, I am a Visual Designer. I like to create mockups (and find huge satisfaction in it). For those who do not know what a mockup is, it is a sample of a physical object such as a mug or a T-shirt on which you can put your artwork. Like the samples they show you when you print photos on mug. 
Designers use digital mockups to showcase their creations. I create digital mockups of gadgets such as phones, tablets, laptops and else. Mostly I make them available for free to help the fellow designers.

My most popular and downloaded mockup is iPhone X PSD mockup. It’s free, go ahead and download.

1. What’s the scene

When Apple released iPhone X, it made a sensation in the industrial design community. Because it introduced large screen form factor (19.5 : 9, which was usually 16 : 9) and a place to put sensors such as dot projector, flood illuminator, front camera at the top part. The world called it notch, although Apple never officially called so. And if you know even little about the tech industry, you know whatever Apple does becomes an industry standard and so was the notch. Phones with notches start rising from everywhere.

Phil Schiller explaining iPhone X notch. Image courtesy : Fortune

iPhone X, XR, XS and XS Max have same notch design.

Above is an iPhone X with notch. As your engineer brain would have started working, you could see it was simply made by inserting a rounded rectangle at the top of the screen, right? Wrong.

Apple doesn’t do anything this easy. And that’s why the world loves it. Apple’s designers make things little varied and yet similar to the objects to you use, thus giving the product a feel of friendly and yet different than the rest, making it the better. Same with this notch, if you study closely you can see 1) the top of the notch area is also rounded, 2) drawing a rounded rectangle won’t even give you the exact shape as this one. If you try that, here’s what you’ll make.

Yellow shape is the rounded rectangle, with the corners maximum rounded.

If iPhone X was made with just a rounded rectangle and not this whole mess

You can compare both kind of notches below :

Look at the top parts of both the notches. Click to zoom.

How they did it?

According to me Apple made notch in 2 parts : First, they drew a rounded rectangle and secondly, added curves to both ends at the top.

This is how Apple would have made iPhone X’s notch

But it’s not just this. Apart from notch, iPhone X can’t also be made by regular rounded rectangle. It’s screen is also designed by varying the rounded rectangle (not talking about the notch part) a little bit.

Very much attention to detail, usual Apple.

Courtesy : Brad Ellis’ article on Medium

Brad Ellis has explained very well how Apple made notch and screen here.

2. Design issue in iPhone XR’s website

I knew I went long way to reach here, but trust me it was necessary. I was visiting iPhone XR’s website few days ago. On the A12 Bionic chip page, there are these mockups.

So you’d have noticed the mistake by now. The NOTCH ! The notch is not same as they designed. The phones shown on Bionic chip’s page have flaws in notch design. While the other pages have perfect notches. Why they used an incorrect mockup? How Apple could do this? They are known to craft everything with attrntion to every minor detail then why not used the same iPhone XR mockup like they did in other feature pages. I mean this is a serious flaw in design because other feature pages have perfect notch design, like the actual phone.

Notch flaw

3. Why is this such a big problem?

Because it took me 3 hours to design an iPhone X mockup. I was working on some project and found no good mockups, so on a weekend I made mine. It took me genuinely hours to design a perfect notch. What I did not know that this is not just a one time problem. And not alone this, other mockups I have made like OnePlus 6, OnePlus 6T, Pixel 3 XL, Vixo X21 etc. have somewhat this kind of notch design. Complex shapes to create beautiful notches. Well, not exactly like iPhone X/XR/XS' because you know how well Apple can throw a lawsuit at you. But yes, above mentioned phones have some sort of Apple like notch design scheme.

If you want to make pixel perfect phone mockups then you have to deal with these problems. But this not just my point of frustration. What’s more bad is iPhone XR’s Face ID feature page has a highlighted image of notch area, which kind of says how beautiful their design is, which actually is.

So beautiful notch shown

My whole point of saying is such a mistake was not expected from Apple. So you’d say why they can’t make mistakes? Because Apple was founded with design at its core. Steve Jobs has always focused on design and it’s perfection. Apple has judged competitors, manufacturers, designers on just the basis of designs and managed to show it can design better and beautiful and useful than the others at the same time. App store rejects app if the app doesn’t follow some specific design guidelines / principles. Apple is the company which tightly focuses on design, has lots of patents on design, taught the world how to design computer products. Apple pays so much attention to so small details. Steve Jobs made the world see computers are not ugly. If Apple does mistakes like this, then who will we (designers) look towards?

Apple awards trophies to best designed apps every year

Jobs once said himself, “I want to make a ding in the universe”. Apple made countless such dings by introducing beautiful designs and made them world standard. So difficult, pain in the brain yet engineering marvel, beautiful notch, another unsaid standard; but mistake like this has personally shook me from the core. Apple made my belief stronger that technology can be made more enjoyable by making it beautiful. I respect Apple. I defend Apple for design and usability. But this one hit me at the heart.

Hope you’d have enjoyed this article. Did you catch this flaw or something else? You can share with me.