10 ms·

Made for iOS 7 - A directory of app designs and icons updated for iOS 7

76 points by stevestreza 13y ago

alariccole 13y ago
How might one submit an app to be included in this list? I have a few apps in review that are built from the ground up for iOS 7.
- villek 13y ago
  Try the 'Submit' link from the menu in the top-left corner.
philwebster 13y ago
Cool site, but it would be nice to see more than 1/2 a screenshot at a time on my 15" laptop.
- deleted 13y ago
  [deleted]
- joeblau 13y ago
  I used command + minus to zoom out. That helped a bit.
- kmfrk 13y ago
  Use the archive view: http://madeforios7.tumblr.com/archive/ http://madeforios7.tumblr.com/archive/.
- stevestreza 13y ago
  Click the images, the lightbox is a nice way to browse.
- thejulielogan 13y ago
  Should have been displayed like so: http://uxarchive.com/tasks/onboarding http://uxarchive.com/tasks/onboarding
gdonelli 13y ago
Still a lot of gradients in use, uh? didn't they kill those?
zaidf 13y ago
There is no design trend I hate more than buttons redesigned to look like normal(not even clickable) text. Simply insane. Flat designs represented by these screenshots are a depressing step back in usability.
- wahnfrieden 13y ago
  Please note what Apple is now calling the tint color, used to signify a tappable button, much like blue text on the web means it's a link. You think the web is "simply insane" now that most have abandoned underlines?
  - brymaster 13y ago
    Hyperlink vs an actual button is not a good comparison. You don't have a mouse on iOS to hover over things to see if they're 'touchable' or not. Bad design is still bad design even if the cool kids are doing it. You should note that on the web many have abandoned the hyperlink for graphics that represent buttons: http://getbootstrap.com/getting-started/#examples http://getbootstrap.com/getting-started/#examples
    - wahnfrieden 13y ago
      There's no mouse to use to hover on mobile or tablet devices on the web, either. I haven't seen any push for change in how hyperlinks work on the web now that mobile/tablet is a common client. Stretching the concept a little here, but design that hinges on being able to hover the mouse to detect possible interaction reminds me of those dreadful 90's web menus where you had to hover to see the title. In your linked example, there are as many or more hyperlinks that don't appear as buttons. The button styling in those examples indicates "primary call to action" more than anything. A page that uses button styling for every single hyperlink would be a mess. The iOS 7 styling for "primary call to action" is to make the tinted text bold, rather than giving it a background color, though that's used in some different areas too under different context. PS, a side note that these are 3rd party examples of iOS 7 UI. Certain things are going to be misused or overused etc.
cageface 13y ago
I'm not a fan of this style as implemented in Apple's own UI, but some of these aren't bad. I still think the translucency is a net loss in legibility and usability though. There's a reason this was tried and rejected in other operating systems.
- Osmium 13y ago
  Agreed that it's a net loss in legibility, but it does improve spatial reasoning. In a single window environment like iOS, there's a definite hierarchy: the home screen lies below apps which in turn lie below the control panel/notification window. Being able to see the blurred contents of the view below e.g. the control panel really helps reinforce that and stops the user getting lost in the OS, though admittedly at the cost of legibility. It's a fine line to be sure...
YOSPOS 13y ago
iOS 7 definitely sets the standard for beautiful mobile operating systems. Windows Phone is a close second. Anroid is just garbage though.
- poolpool 13y ago
  Considering that iOS 7 is taking UX cues from android and jailbreaking, I don't understand how you can say that.
- mcintyre1994 13y ago
  Each to their own, but I wouldn't describe Android as "garbage" now - I actually quite like its current style. I'd also argue that most of these iOS7 apps look like they'd need only minor tweaks to fit in with Android's style, so your claim is at the least a bit unfair.
- alecsmart1 13y ago
  Oh a fanboy...
- Macha 13y ago
  Except the design of iOS7 borrows liberally from both. The flat design was introduced in WP7 then copied and popularised in Android 4.0. A lot of these design elements that iOS7 is being praised for have been recommended in Android for quite some time. Kicksend in particular, and Reeder 2 to a lesser extent if you cropped out the iOS status bar looks far more like an Android app than iOS has been in the past. Your opinion of Android UI appears to have been formed where parts of the operating system looked like this: http://gigaom2.files.wordpress.com/2010/12/youtube-android.png http://gigaom2.files.wordpress.com/2010/12/youtube-android.p... whereas nowadays those same parts look more like this: http://www.blogcdn.com/www.engadget.com/media/2012/09/youtubeandroid.jpg http://www.blogcdn.com/www.engadget.com/media/2012/09/youtub... .
tzm 13y ago
Prediction: I think developers will find a harder time to differentiate than previous iOS versions, and will feel a bit marginalized as apps evolve around a common style, palette and pattern. However, the user experience will be evolutionary. Frankly, I feel that this design strategy has a split personality.
- LiweiZ 13y ago
  As I wrote in my past blog(http://mattzlw.wordpress.com/2013/07/24/ios-7-beta-ux-thinking-a-phone-as-a-whole/ http://mattzlw.wordpress.com/2013/07/24/ios-7-beta-ux-thinki...): "Making users think which part of the iOS application I am in less, instead, a more strong feeling in one single place Apple provides." Apple made their move. Whether the rebalance can be reasonably achieved or not, how and when remain uncertain. I do think, in terms of graphic design choices, it seems to have fewer variables. But, perhaps this is where a more dynamic 2D physics UI engine comes to help.
  - tzm 13y ago
    I agree.
MaxGabriel 13y ago
I know there are alot of images on this site, but I really think JPEG was a poor choice. The compression artifacts on UI elements look especially bad. I also agree with philwebster about it being really hard to see the full image.
- stevestreza 13y ago
  That's what the App Store serves.
  - cremnob 13y ago
    Can you at least resize it?
    - stevestreza 13y ago
      The Tumblr blog theme is resizing them. Just click the image and it'll show in a lightbox.
  - MaxGabriel 13y ago
    Oh that's too bad; I didn't realize that. It looks like Apple's Enterprise Partner Relational Feed serves up JPEGs as well. I guess the last place to check would be by monitoring network traffic coming out of the iOS App Store app or iTunes Mac app, but that'd be a bit of a pain (not even sure those use PNG).
hcarvalhoalves 13y ago
Some of those 3rd party apps are better designed than Apple's own iOS7 incarnation apps. Most are bland and hard to figure out though.
- nobleach 13y ago
  I think it'll take Apple a bit to figure out their exact niche. Remember the original release of OSX 10.0? It was a hodge-podge of pinstripes, liquicap buttons and realistic looking icons mixed with some old 4-16 color icons. It was a mess if you're judging by where they were by the time OSX Tiger (10.4) was released. I'm sure the same will happen for iOS.
  - leokun 13y ago
    Just going to point out here that iOS is already a 6+ year old operating system. Tiger came out 4 years after OSX's debut. iOS hasn't found it's niche yet?
    - hboon 13y ago
      Apple needs time and usage to figure out it's "niche" for iOS 7-style UI and interaction. I look at iOS 7 as a reboot.
chavesn 13y ago
Most of these, especially without colorful, professional photography adorning them (which is unlikely to be the case in real use), just look like wireframes to me.
- potatolicious 13y ago
  Most of these are probably. There's another blog out there covering iOS7 redesigns, but most of them aren't actually from the companies/apps in question, but rather spec redesigns by third parties. In any case, Kicksend is the only app there that strikes me as having problems with stock photography. The other apps that features photography: TeeVee and that blog reader app, strike me as non-problems, since they are in every position to use curated, professional photography everywhere. But yeah, I really hate it when social networking/sharing apps use stock photography in their designs - these screenshots look nothing like what their typical user will see. Build your design around shitty phone photographs (or help your users take less shit photos). Also, in my admittedly not-very-important opinion, both AboutMe and TigerLily Lane's designs are terrible and violate a truckload of very core iOS7 (or really just modern mobile design) philosophies. AroundMe uses the dreaded "internal homescreen", which was a fad that came and went during Facebook's v1 application back in 2008. Tile-homescreens within apps are confusing and do not read naturally, they also are indicative of extreme kitchen-sink design that hasn't been fully thought through. It's a crappy response to having an app that does too much stuff in completely unrelated ways. The linear list they have in their iPad design is much better. TigerLily Lane gets much worse though. Lots of drop shadows where iOS7 deliberately avoids them. Lots of boxed components instead of iOS7's standard of full-bleed to the edges. Lots of completely ignoring stock components/design in exchange for their own invention of the same thing - e.g. the size selector, where the user has to learn a completely new segmented control instead of using something that is (or looks/feels like) the stock segmented control. Lots of violation of new iOS7 button conventions. Icon buttons are conventionally surrounded by a circle to indicate tappability, they are never filled with a color except in their "down" state. All of their icon buttons violate this. And their home screen has nothing that implies tappability on the username/password fields. The least they could've done was separate those two visually so it looks like each is tappable. I love the PerfectWeather design though - IMO it's got the right mix of iOS7-convention-following without going straight off the flatten-everything deep end. Overall if this is indicative of iOS7 design in general, we've got a long way to go.

76 points by stevestreza 13y ago

How might one submit an app to be included in this list? I have a few apps in review that are built from the ground up for iOS 7.

villek 13y ago
Try the 'Submit' link from the menu in the top-left corner.

philwebster 13y ago

Cool site, but it would be nice to see more than 1/2 a screenshot at a time on my 15" laptop.

deleted 13y ago
[deleted]
joeblau 13y ago
I used command + minus to zoom out. That helped a bit.
kmfrk 13y ago
Use the archive view: http://madeforios7.tumblr.com/archive/ http://madeforios7.tumblr.com/archive/.
stevestreza 13y ago
Click the images, the lightbox is a nice way to browse.
thejulielogan 13y ago
Should have been displayed like so: http://uxarchive.com/tasks/onboarding http://uxarchive.com/tasks/onboarding

gdonelli 13y ago

Still a lot of gradients in use, uh? didn't they kill those?

zaidf 13y ago

There is no design trend I hate more than buttons redesigned to look like normal(not even clickable) text. Simply insane. Flat designs represented by these screenshots are a depressing step back in usability.

wahnfrieden 13y ago
Please note what Apple is now calling the tint color, used to signify a tappable button, much like blue text on the web means it's a link. You think the web is "simply insane" now that most have abandoned underlines?
- brymaster 13y ago
  Hyperlink vs an actual button is not a good comparison. You don't have a mouse on iOS to hover over things to see if they're 'touchable' or not. Bad design is still bad design even if the cool kids are doing it. You should note that on the web many have abandoned the hyperlink for graphics that represent buttons: http://getbootstrap.com/getting-started/#examples http://getbootstrap.com/getting-started/#examples
  - wahnfrieden 13y ago
    There's no mouse to use to hover on mobile or tablet devices on the web, either. I haven't seen any push for change in how hyperlinks work on the web now that mobile/tablet is a common client. Stretching the concept a little here, but design that hinges on being able to hover the mouse to detect possible interaction reminds me of those dreadful 90's web menus where you had to hover to see the title. In your linked example, there are as many or more hyperlinks that don't appear as buttons. The button styling in those examples indicates "primary call to action" more than anything. A page that uses button styling for every single hyperlink would be a mess. The iOS 7 styling for "primary call to action" is to make the tinted text bold, rather than giving it a background color, though that's used in some different areas too under different context. PS, a side note that these are 3rd party examples of iOS 7 UI. Certain things are going to be misused or overused etc.

cageface 13y ago

I'm not a fan of this style as implemented in Apple's own UI, but some of these aren't bad. I still think the translucency is a net loss in legibility and usability though. There's a reason this was tried and rejected in other operating systems.

Osmium 13y ago
Agreed that it's a net loss in legibility, but it does improve spatial reasoning. In a single window environment like iOS, there's a definite hierarchy: the home screen lies below apps which in turn lie below the control panel/notification window. Being able to see the blurred contents of the view below e.g. the control panel really helps reinforce that and stops the user getting lost in the OS, though admittedly at the cost of legibility. It's a fine line to be sure...

YOSPOS 13y ago

iOS 7 definitely sets the standard for beautiful mobile operating systems. Windows Phone is a close second. Anroid is just garbage though.

poolpool 13y ago
Considering that iOS 7 is taking UX cues from android and jailbreaking, I don't understand how you can say that.
mcintyre1994 13y ago
Each to their own, but I wouldn't describe Android as "garbage" now - I actually quite like its current style. I'd also argue that most of these iOS7 apps look like they'd need only minor tweaks to fit in with Android's style, so your claim is at the least a bit unfair.
alecsmart1 13y ago
Oh a fanboy...
Macha 13y ago
Except the design of iOS7 borrows liberally from both. The flat design was introduced in WP7 then copied and popularised in Android 4.0. A lot of these design elements that iOS7 is being praised for have been recommended in Android for quite some time. Kicksend in particular, and Reeder 2 to a lesser extent if you cropped out the iOS status bar looks far more like an Android app than iOS has been in the past. Your opinion of Android UI appears to have been formed where parts of the operating system looked like this: http://gigaom2.files.wordpress.com/2010/12/youtube-android.png http://gigaom2.files.wordpress.com/2010/12/youtube-android.p... whereas nowadays those same parts look more like this: http://www.blogcdn.com/www.engadget.com/media/2012/09/youtubeandroid.jpg http://www.blogcdn.com/www.engadget.com/media/2012/09/youtub... .

tzm 13y ago

Prediction: I think developers will find a harder time to differentiate than previous iOS versions, and will feel a bit marginalized as apps evolve around a common style, palette and pattern. However, the user experience will be evolutionary. Frankly, I feel that this design strategy has a split personality.

LiweiZ 13y ago
As I wrote in my past blog(http://mattzlw.wordpress.com/2013/07/24/ios-7-beta-ux-thinking-a-phone-as-a-whole/ http://mattzlw.wordpress.com/2013/07/24/ios-7-beta-ux-thinki...): "Making users think which part of the iOS application I am in less, instead, a more strong feeling in one single place Apple provides." Apple made their move. Whether the rebalance can be reasonably achieved or not, how and when remain uncertain. I do think, in terms of graphic design choices, it seems to have fewer variables. But, perhaps this is where a more dynamic 2D physics UI engine comes to help.
- tzm 13y ago
  I agree.

MaxGabriel 13y ago

I know there are alot of images on this site, but I really think JPEG was a poor choice. The compression artifacts on UI elements look especially bad. I also agree with philwebster about it being really hard to see the full image.

stevestreza 13y ago
That's what the App Store serves.
- cremnob 13y ago
  Can you at least resize it?
  - stevestreza 13y ago
    The Tumblr blog theme is resizing them. Just click the image and it'll show in a lightbox.
- MaxGabriel 13y ago
  Oh that's too bad; I didn't realize that. It looks like Apple's Enterprise Partner Relational Feed serves up JPEGs as well. I guess the last place to check would be by monitoring network traffic coming out of the iOS App Store app or iTunes Mac app, but that'd be a bit of a pain (not even sure those use PNG).

hcarvalhoalves 13y ago

Some of those 3rd party apps are better designed than Apple's own iOS7 incarnation apps. Most are bland and hard to figure out though.

nobleach 13y ago
I think it'll take Apple a bit to figure out their exact niche. Remember the original release of OSX 10.0? It was a hodge-podge of pinstripes, liquicap buttons and realistic looking icons mixed with some old 4-16 color icons. It was a mess if you're judging by where they were by the time OSX Tiger (10.4) was released. I'm sure the same will happen for iOS.
- leokun 13y ago
  Just going to point out here that iOS is already a 6+ year old operating system. Tiger came out 4 years after OSX's debut. iOS hasn't found it's niche yet?
  - hboon 13y ago
    Apple needs time and usage to figure out it's "niche" for iOS 7-style UI and interaction. I look at iOS 7 as a reboot.

chavesn 13y ago

Most of these, especially without colorful, professional photography adorning them (which is unlikely to be the case in real use), just look like wireframes to me.

potatolicious 13y ago
Most of these are probably. There's another blog out there covering iOS7 redesigns, but most of them aren't actually from the companies/apps in question, but rather spec redesigns by third parties. In any case, Kicksend is the only app there that strikes me as having problems with stock photography. The other apps that features photography: TeeVee and that blog reader app, strike me as non-problems, since they are in every position to use curated, professional photography everywhere. But yeah, I really hate it when social networking/sharing apps use stock photography in their designs - these screenshots look nothing like what their typical user will see. Build your design around shitty phone photographs (or help your users take less shit photos). Also, in my admittedly not-very-important opinion, both AboutMe and TigerLily Lane's designs are terrible and violate a truckload of very core iOS7 (or really just modern mobile design) philosophies. AroundMe uses the dreaded "internal homescreen", which was a fad that came and went during Facebook's v1 application back in 2008. Tile-homescreens within apps are confusing and do not read naturally, they also are indicative of extreme kitchen-sink design that hasn't been fully thought through. It's a crappy response to having an app that does too much stuff in completely unrelated ways. The linear list they have in their iPad design is much better. TigerLily Lane gets much worse though. Lots of drop shadows where iOS7 deliberately avoids them. Lots of boxed components instead of iOS7's standard of full-bleed to the edges. Lots of completely ignoring stock components/design in exchange for their own invention of the same thing - e.g. the size selector, where the user has to learn a completely new segmented control instead of using something that is (or looks/feels like) the stock segmented control. Lots of violation of new iOS7 button conventions. Icon buttons are conventionally surrounded by a circle to indicate tappability, they are never filled with a color except in their "down" state. All of their icon buttons violate this. And their home screen has nothing that implies tappability on the username/password fields. The least they could've done was separate those two visually so it looks like each is tappable. I love the PerfectWeather design though - IMO it's got the right mix of iOS7-convention-following without going straight off the flatten-everything deep end. Overall if this is indicative of iOS7 design in general, we've got a long way to go.