iPhone Pro top notch/status bar mockup

[macduke]

EDIT: I've added a solution 4 below, by request, and have added it to the poll. I've also set the poll up so that users can change their answer, so if you like #4 better, feel free to change your vote. I'll continue to take requests, within reason, so comment below!

I've been trying to figure out how the top "notch" will work with the status bar on the iPhone Pro/Edition/X, so I decided to make some quick mockups of possible design solutions. I went roughly off of some rumored resolutions which are a little wider than the iPhone 6/6s/7. I sized down the mockups for this site so these aren't pixel perfect. I also went with the colored app accent going all the way to the top. I'm not sure if Apple is going to own that notch, or make it blend in with black (which makes sense given the OLED display). However, given the icon that represents this new iPhone that was unearthed in the HomePod firmware the other day, it kind of seems like they're going to own that as part of the visual language. The other knock against using black across the top for the background of the status bar is that it's weird how the black notch then becomes a bar—making the iPhone look unbalanced as it doesn't have a chin. Perhaps they could offset that with some sort of control area at the bottom—a sort of dock/widget/virtual home button area that has a black background and acts as a sort of balance. I mean, Apple tends to want to make things look visually balanced, so either way they're going to make it aesthetically pleasing. Anyway—on to my initial batch of concepts!

Solution 1:

This was the first one that I made. It centers the icons on either side of the time (it's missing location services and rotation lock which are less likely to be visible most of the time, but there is room for them on either side). I like the symmetry of this one, and also like the visual separation of the status bar and UI elements so it doesn't look too cluttered.

Solution 1, with back button:

Since there was some nice negative space, I decided to try the app backup button in this area (instead of replacing the carrier). I think there could be UX issues with this, but probably not much different than there are now (I'm not a big fan of the back to app button and often press it accidentally while accessing app UI at the top).

Solution 2:

This one is nice because the clock has more focus in the center, and when the app back button is present it feels more balanced. Conversely, the icons would look less balanced most of the time, so I don't really care for this one. Perhaps if the icons were split to each side unless the app back button was visible?

Solution 3:

So this was in interesting because it tucks all of the icons into the gaps. I had to stretch the center "notch" down 2px to get it to align so that it's like iOS currently with 12px around status bar elements. This one is also interesting because it fits all of the iOS icons just fine. However, I can't help but think that it looks a bit cluttered. It might really come down to how deep the "notch" is on the physical device and how many pixels of vertical height they'll have to work with. I think this could be a good concept if it had more breathing room.

Anyway, thanks for checking out these quick mockups, and remember to vote above! Feedback is welcome, and maybe if you guys have some good ideas I could try some other mockups when I have time and update this post. Or feel free to add your own mockups. Thanks!

Solution 4 (added by request):

This was getting kinda long so I truncated my mockup. User @djlythium requested this in another thread. I think the thinking behind this is you keep it minimal and then you can tap or drag in the "notch" areas to expand a second row. That or what user @deuxani posted about having a top and bottom status area. In hindsight I probably should have put a thin stroke on the notch for this mockup so it's distinguishable but I already saved it out and uploaded it and it's not a big deal. I've also updated the poll to have this as an option.

 

[VertPin]

I am confident that Apple will go with the notch and blend the areas to the left and the right to be all black. I can tell you put a lot of effort into this, so good job. The final design reveal of this iPhone is going to be interesting.

 

[ZEEN0j]

I think the placement of the signal bars and battery is correct. But the background will stay black to blend with the cutout. I haven't thought about the placement of the clock though. Maybe thats one of the reasons why notifications center now looks like the lock screen with the big clock.

 

[JohnApples]

The only one that really makes sense is the third. I don't really see a point in that extra screen space if the status bar extends down into the "regular screen space" anyway.

Though I am kinda stumped on what they'd do with the time. Only about a month left till we know, right?

 

[44267547]

I think the placement of the signal bars and battery is correct. But the background will stay black to blend with the cutout. I haven't thought about the placement of the clock though. Maybe thats one of the reasons why notifications center now looks like the lock screen with the big clock.

There is no doubt the background will remain black for obvious reasons. I can't see Apple allowing for the sensors to have a contrast with any other color. Apple typically is fairly uniform with these types of alterations.

 

[Knowlege Bomb]

2 and 3 look too cluttered to me. Love the simplicity of #1.

 

[9594864]

None of those.

The iPhone will have a black bar at the top, and a black bar at the bottom. The difference between this iPhone and all previous iPhones is that the top and bottom black bars are display, as opposed to plastic bezels. Apple will use these Touchbar-type areas for info and dynamic functional buttons. These areas will be completely off-limits to apps (aside from new APIs for function buttons), and likely videos as well.

The notch in the display is specifically there because Apple is using an OLED display and they knew they could match the actual bezel containing sensors and earpiece with the display black level, which eliminates the distinction that there even is a cutout. Apple has essentially taken the entire face of the device and used as much of it as they possibly could to fill it with useful info/functions as opposed to being unable to be used at all.

The status bar will be in a single line directly below the cutout I believe. I do not believe any aspect of the current status bar will go inside the corners, there simply is no room. Secondly, the clock would absolutely not be removed from the glanceable nature it currently has i.e., the Notification Center becoming the lock screen with the clock has nothing to do with what they're doing here.

 

[macduke]

None of those.

The iPhone will have a black bar at the top, and a black bar at the bottom. The difference between this iPhone and all previous iPhones is that the top and bottom black bars are display, as opposed to plastic bezels. Apple will use these Touchbar-type areas for info and dynamic functional buttons. These areas will be completely off-limits to apps (aside from new APIs for function buttons), and likely videos as well.

The notch in the display is specifically there because Apple is using an OLED display and they knew they could match the actual bezel containing sensors and earpiece with the display black level, which eliminates the distinction that there even is a cutout. Apple has essentially taken the entire face of the device and used as much of it as they possibly could to fill it with useful info/functions as opposed to being unable to be used at all.

The status bar will be in a single line directly below the cutout I believe. I do not believe any aspect of the current status bar will go inside the corners, there simply is no room. Secondly, the clock would absolutely not be removed from the glanceable nature it currently has i.e., the Notification Center becoming the lock screen with the clock has nothing to do with what they're doing here.
View attachment 710992 View attachment 710993

I mentioned something like this being a possible solution. I like the idea of having the app back button up in the notch area. That way it's only there when necessary, which isn't all the time. However, I also mentioned that Apple seems to be owning that notch as symbolism for the new iPhone as evidenced by the icon leaked the other day. Don't get me wrong, I like the design better that you posted, but why make that the icon if it's always going to be a black bar?

 

[9594864]

I mentioned something like this being a possible solution. I like the idea of having the app back button up in the notch area. That way it's only there when necessary, which isn't all the time. However, I also mentioned that Apple seems to be owning that notch as symbolism for the new iPhone as evidenced by the icon leaked the other day. Don't get me wrong, I like the design better that you posted, but why make that the icon if it's always going to be a black bar?

I doubt that icon was ever meant for the public. I don't know.

 

[deuxani]

This might be a possibility too still, it does fit:

And I like this idea too:

I am just really curious if they are going to make the home button small so the bottom black bar can be small too, or make them the same size as the physical home button. If they make it as big as the real button they will have to make the top have more blackn too to make it symmetrical.

 

[TinaBelcher]

You did a great job, but it looks cluttered no matter what. Not your fault, it's not avoidable when Apple is replacing the clock with the camera. I wish they didn't try to merge the status bar into the camera. The clock looks the best in the center of the status bar, and should never have been touched by Apple!

 

[macduke]

This might be a possibility too still, it does fit:

And I like this idea too:

I am just really curious if they are going to make the home button small so the bottom black bar can be small too, or make them the same size as the physical home button. If they make it as big as the real button they will have to make the top have more blackn too to make it symmetrical.

I think that could be a good idea. But I think the clock would be kept at the top and the celluar would go to the bottom with the WiFi, BT, etc in a sort of networking area on the left and other icons on the right.

Anyway, I came back here to add this mockup I whipped up for @djlythium in another thread. I'll see if I can add it to the poll. Maybe I'll update my original post too. What I don't like about it is how the screen starts to curve in. It looks bad. Maybe the actual display will have different curved corners than the icon, which may be accentuated for purposes of making an icon that reads as a round rect at small sizes. If I extend the bar down, then we might as well have two rows.

 

[djlythium]

I think that could be a good idea. But I think the clock would be kept at the top and the celluar would go to the bottom with the WiFi, BT, etc in a sort of networking area on the left and other icons on the right.

Anyway, I came back here to add this mockup I whipped up for @djlythium in another thread. I'll see if I can add it to the poll. Maybe I'll update my original post too. What I don't like about it is how the screen starts to curve in. It looks bad. Maybe the actual display will have different curved corners than the icon, which may be accentuated for purposes of making an icon that reads as a round rect at small sizes. If I extend the bar down, then we might as well have two rows.

View attachment 711052

Right, like that top image, but with the time where the LTE & Signal indicator is (similar to my other post). Thanks for doing these!

 

[adnbek]

No doubt solution 4. They'd never go for 1 to 3 IMO.