Why there is a notch on the iPhone X

Lots of people have had a go at Apple recently for a variety of reasons. One of them is the so-called "notch" that sits on top of the iPhone X and houses the components necessary to make Face ID work. Folks have called it ugly, a disgrace, an eyesore, a joke, etc. Some are even seemingly touting it as a symbol for everything that's wrong with Apple and often in a somewhat high-pitched voice

As a designer, I don't mind 'the notch' at all. In fact, I quite like it.

However, this little piece is not about whether I like it or not, it's about why there is a notch and why the notch is necessary given Apple's current design language and dogma.

I would describe Apple's current design language — both when it comes to its physical products and its virtual interfaces, but perhaps most pronounced in its physical products — as resting on two central themes: symmetry and minimalism.

Apple's version of minimalism, heavily inspired by Dieter Rams both when it comes to his aesthetics as well as his principles for good design, has to do with taking everything that's "unnecessary" away from the designs. Or, following Rams' principle, "as little design as possible". This is perhaps most evident in Apple's design of the Apple Watch, their Airport Extreme, the Apple TV, and almost all of their accessories such as cables, adapters, and so on. If something isn't absolutely necessary, it's up for grabs, it should be removed. For Apple, less is more, regardless what Yngwie thinks.

The doctrine of symmetry rules all of Apple's product designs and is a contributing factor to why many people, myself included, think that they are beautiful as objects. Think for a second about some other Apple products such as the iMac 5k with its big bottom bezel and black frames of equal size around the screen, the MacBook Pro with its equal number of USB-C ports on each side of the laptop, its huge, centered touchpad, and — if you look closely — the fact that the touch bar is perfectly centered too, adding some dead space to the left to balance the space the Touch ID sensor on the right-hand side occupies. Not many companies would do this. But at Apple, symmetry is king.

With past iPhones, all the way from the first iPhone to the just-released iPhone 8, this visual symmetry has been created by framing the screen by pronounced, unapologetic bezels of equal size at the top and the bottom. 

With the iPhone X's promise of removing the screen completely, Apple's product design team was faced with an interesting design problem. How do we keep the visual balance?

There were obviously a number of choices the iPhone X design team could have taken. However, from the various interviews surrounding the release, it seems clear that Apple has been working on the new design for several years and that the leading ideal from the start has been that of "just screen". Let's design a phone that is just screen, nothing else.

But how do you do that? How do you design a phone that is just screen, while it still does all the things consumers want it to do?

I've made these quick mock-ups to illustrate this design problem:


Let's go over these from left to right.

First, there's the Ideal design. This design is all perfectly symmetrical all around. I'd bet this was what the iPhone X sketches looked like until everyone had to agree that Touch ID wouldn't work under the screen and/or that Face ID was a thing and needed screen real estate.

Second, the Notch keeps the symmetry from the Ideal but adds a cut-out around the part of the screen that houses the Face ID hardware. In some sense, this is an honest design — it's the ideal design that's open with the fact that it's not possible. Rather than trying to hide the sensors needed for Face ID, this design turns it into something very visible. Others have commented on Apple trying to make the notch iconic — perhaps as a bit of an afterthought — but I think there's merit to that argument. Instead of quickly drawing the iPhone as a rectangle with a small round button towards the bottom, we'll now start drawing the iconic iPhone as a rectangle with a thing sticking down from the top. 

The reason the notch works is that it solves a number of design and hardware issues while staying true to Apple's design dogma of symmetry and visual balance.

When you look at this design, your eyes will close the gap created by the notch and you will get the impression that the iPhone X is all screen, although it isn't. This is why Apple is demanding developers to not hide the notch by using black background color around it.    

Third, there's the Top Heavy. This design can either be achieved programmatically by adding black background color around the notch or by product design by having a top bezel. The reason this design doesn't fly with Apple is that it introduces visual disharmony. Apple would never do this, and for a good reason. If you only look at the top of the screen, this design looks fine. However, if you look at the entire product it looks imbalanced and as if the top half doesn't belong to the lower half. Another example of this top-heavy design is LG's 5k "Apple" screen sold in the Apple stores in lieu of an actual Apple Display. I'm surprised Apple let that one in the door, although they probably told LG they have to make it black so no-one would confuse it with an Apple product.

Finally, to aid the visual imbalance of the Top Heavy design, Apple could have done what they have done in the past — balanced out the design by also adding a bezel or black area towards the bottom of the device. I call this design the Samsung, as this is the design path taken by Samsung S8 line of devices as well as a host of other flagship phones released in 2017, such as the LG v30, LG G6, Google Pixel 2 XL, etc. Apple probably steered away from this design early on. First, it looks too much like phones already released and Apple doesn't want to be seen as copying the designs of others. Second, as much as one might wonder why on earth the bezels on the iPhone 8 and the 8+ have to be so gigantic, they are in fact quite well-proportioned in relation to the size of the device and the display. The much smaller top and bottom bezels on 'the Samsung' design just isn't as balanced and harmonious.