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.
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:
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.
Last edited:
