iPhone Pro top notch/status bar mockup

March 25, 2015

edit: i've added solution 4 below, request, , have added poll. i've set poll users can change answer, if #4 better, feel free change vote. i'll continue take requests, within reason, comment below!

i've been trying figure out how top "notch" work status bar on iphone pro/edition/x, decided make quick mockups of possible design solutions. went off of rumored resolutions little wider iphone 6/6s/7. sized down mockups site these aren't pixel perfect. went colored app accent going way top. i'm not sure if apple going own notch, or make blend in black (which makes sense given oled display). however, given icon represents new iphone unearthed in homepod firmware other day, kind of seems they're going own part of visual language. other knock against using black across top background of status bar it's weird how black notch becomes bar—making iphone unbalanced doesn't have chin. perhaps offset sort of control area @ bottom—a sort of dock/widget/virtual home button area has black background , acts sort of balance. mean, apple tends want make things visually balanced, either way they're going make aesthetically pleasing. anyway—on initial batch of concepts!

solution 1:

first 1 made. centers icons on either side of time (it's missing location services , rotation lock less visible of time, there room them on either side). symmetry of one, , visual separation of status bar , ui elements doesn't cluttered.

solution 1, button:

since there nice negative space, decided try app backup button in area (instead of replacing carrier). think there ux issues this, not different there (i'm not big fan of app button , press accidentally while accessing app ui @ top).

solution 2:

1 nice because clock has more focus in center, , when app button present feels more balanced. conversely, icons less balanced of time, don't care one. perhaps if icons split each side unless app button visible?

solution 3:

in interesting because tucks of icons gaps. had stretch center "notch" down 2px align it's ios 12px around status bar elements. 1 interesting because fits of ios icons fine. however, can't think looks bit cluttered. might come down how deep "notch" on physical device , how many pixels of vertical height they'll have work with. think concept if had more breathing room.

anyway, checking out these quick mockups, , remember vote above! feedback welcome, , maybe if guys have ideas try other mockups when have time , update post. or feel free add own mockups. thanks!

solution 4 (added request):

getting kinda long truncated mockup. user @djlythium requested in thread. think thinking behind keep minimal , can tap or drag in "notch" areas expand second row. or user @deuxani posted having top , bottom status area. in hindsight should have put thin stroke on notch mockup it's distinguishable saved out , uploaded , it's not big deal. i've updated poll have option.