I imagine iOS 7 gets a bit more than a makeover, but I don't see a reason for it to get much more than this, honestly.
View full version here.
Things I've changed/updated...
Font: Avenir. Helvetica is beautiful, but can appear clunky. Avenir is friendlier and seems like a good step forward.
Navigation Bar: Light, almost like the iPad navigation bars. More rounded corners. Beveling on the "Settings" label.
Background: No pinstripes, just a clean slate gray color.
Grouped Table Views: Less rounded corners, slight beveling (like introduced lately in iOS) and minor separator-meets-the-edge fixes.
Icons: Tweaked to be consistently weighted and colored differently. Blue are radio frequencies. Navy for Notifications. Gray for audio and visual settings. Black for restrictions. There's also a tiny bit of a drop shadow on these icons.
On/Off Toggles: Less concave look, but still visually interesting and detailed. Matte instead of glossy. "Off" matches alignment with blue descriptive text.
Descriptive Text: Brighter, more vibrant blue to match both the radio icons and the "On" switch.
Chevrons: slightly longer and rounded, friendlier to match a new font.
Feel free to comment below, but please keep it constructive and friendly.
8 months ago
Not so sure about Avenir, everything else looks great.
I like this a lot. I don't see them changing stuff around too much. The last update, they updated the color of the navigation bar and I think they'll do something simple and similar to what you have. I also wouldn't mind lighter versions of those tables. More subtle shadows and lines.
I also think that using Avenir, while nice looking, reminds of of WebOS a little bit.
This is super interesting. I agree about Avenir, in fact, I recently launched an app where I decided to use Avenir Next throughout the app--I really like it.
Not sure about the 'On' toggle (font weighting seems the slightest too light) but that is a tiny niggle.
I don't think many changes have to be made to iOS besides some of the ones you mocked up above. And I doubt iOS will change experience-wise.
@Alex In the spirit of being constructive, would you mind elaborating why you feel so about Avenir?
This is really sharp. Love that new blue gradient and the font choice. I don't know if the average user will pick up on the rule that radio frequency text is blue, and I don't know if they would benefit from it, but I could live with it.
@Moeed Mohammad — True, but not necessarily a negative. Avenir is interesting. The contrast between the upper and lower cases stands out a bit (just observation), but I guess that's the nature of geometric fonts.
@Steven Bennett It's not as much that I'm trying to make a connection from the text to the icon... I'm just trying to get rid of what I believe is an ugly stale blue color they use for the text today.
All my yes, reminds me a bit of webOS thanks to the Avenir actually.
I'd love to see more 'density' at the top of settings though. Quick toggles, easy access to on/off'ing various key features, brightness...
what do you think of my approach?
I really think that using Avenir is a good idea. It does present a very friendly feel as you said. I've always thought that it is a very modern font so using it as a symbol of "moving forward" is a good idea.
The three standouts in this concept for me are the navigation bar, the sleeker looking grouped table views and the blue descriptive text. Altogether these create a very smooth and modern interface. I can tell you put a lot of thought behind each portion of this concept.
The only piece I am not feeling fits are the chevrons. I do agree that they match the friendly feel of using Avenir but I think that they need just a bit more weight for emphasis. But this is more of a personal opinion or preference.
But as always you have shown that putting a lot of thought behind the little things in your designs really can make a big difference.
@Sebastiaan de With perhaps you might like the top section of @Brent Caswell's mockup.
the Nav bar looks really great~~ yet the Grouped table seems not quite match the style of the bar, a bit more flat maybe better?
@Todd Coleman The Chevrons, I understand where you're coming from. They're the same thickness as before, but since elongated, appear thinner. In all honesty, I wish they didn't have to be there at all, though I recognize their importance. I'd argue perhaps less opacity but thicker, this might allow for them to appear bolder but less in-the-way.
@Phantass Could you elaborate on what you mean by which should be more flat? The navigation bar or the grouped table view?
I love the use of Avenir. After I saw Runkeeper use it, I felt like it should be used in more apps. I hope Apple brings this to their stock apps.
Excellent job on the mockup. One thing I would change is that the On/Off switches feel a little too flat, maybe adding just a touch of gloss would fix that.
@Louie Mantia Avenir has a much more curvy look than Helvetica does. It may just be the fact that I'm more used to seeing Helvetica there, but this page has a very blocky feel, and to me Avenir offers the opposite. I think a more chunky/blocky font, such as Helvetica, would be more appealing in this UI. Hope that makes sense.
@Scott Smith It seems Apple is already using it in a few places: Maps and select parts of Siri.
Why do you think adding gloss or depth to the switches would make them better?
@Louie Mantia I misunderstood. If there was more than one settings pane here I'm sure I would have seen that you changed all of the text that is currently the dull dark blu in iOS to your new blue, and not just the radio frequencies. Nice touch :)
I'm not going to get into the design debate so i'm gonna hang out with another question. Louie approximately how long did this take you to complete. I understand that some of these design choices could have been rattling around in your head or are based on office conversations etc. I'm just wondering about timeframe to lay this puppy out.
I think Avenir is a good comprise for blocky and rounded, but it is a bit shocking to look at, at first. I can't decide if Avenir has a bit too much "character" to be used as a system font though.
@Louie Mantia The gloss has always been a subtle detail of the switch that I appreciated. It gives the switch an added sense of depth, where here the text doesn't feel much "lower" than the knob of the switch, especially in the engaged state.
@Drew Matthews The majority of the time is spent thinking. In Photoshop though, just the time taken to hit buttons and create layers takes about 3-4 hours.
Thanks @Louie Mantia !
@Louie Mantia Avenir it's too rounded, if that makes sense. I love it, don't get me wrong, but I don't feel it looks nice paired with the square icons. Maybe the issue is that the font weight it's too light?
It does looks friendly, but it lacks some "seriousness" (?)
keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
Follow Dribbble on Twitter