PDA

View Full Version : Official iOS 7 Icons


andrewpturko
Jun 3, 2013, 11:20 PM
This seems to be perhaps the most authentic way of telling what the iOS 7 default stock app icons will look like
based on the recently released official WWDC 2013 app icon before the new design is unveiled next Monday.

http://i.cubeupload.com/8Ia440.png
:apple:
________________________________


>> UPDATE:

It looks like transparency is even more prominent now and is looking to be another key factor in iOS 7's
design based on the newly released WWDC 2013 banners. Compare/Contrast:

http://i.cubeupload.com/xGyK8T.png

________________________________

This mock up is based on all the given resources both Apple and respective rumors have provided [such as]...


Flat Design
Subtle Grandients
Color Consistency
etc


Additional Input Relative to Icons/Home Screen:

Dynamic Icons
The Calendar icon has always been dynamic, so why not make the Weather and Clock icons dynamic as well? Perhaps even make the Photos icon dynamic, showing the last picture taken in the frame. Also an option: make the visualizer in the Music icon animate when music is playing. Dynamic icons would make the homescreen feel more alive. App Store apps still only can have static icons.

Dock
Give iOS the same Mountain Lion Dock treatment to keep things consistent.

Notification Center
Show a badge with the amount of unread notifications in the top-right corner of the status bar, next to the battery icon. In Notification Center itself, get rid of the heavy linen texture. Make Notification groups collapsable by tapping the header.


Questions and comments are appreciated! I've also included a simple yes/no poll to see how many agree/disagree with this concept. By agreeing with the post you are agreeing to the simple idea that the layers of colors on the WWDC logo will match their respective apps and be applied much like they were on the official WWDC app icon. I tried my best to give a rough illustration of this, but your vote should be based on this idea rather than the rough icons themselves. It'll be interesting to reference back to this next Monday to see if we had the right idea!

>> UPDATE: I've modified the icons based on feedback, let me know what you think!

*The icons are provided to only illustrate an idea of the concept and
are not strictly meant to be accurate.

Tar Sniffer
Jun 4, 2013, 12:53 AM
You might be right. So the other colours could be..

Light Blue = App Store
Purple = iTunes Store
Yellow = Notes?
Dark Blue = Mail?

SamGabbay
Jun 4, 2013, 01:11 AM
http://s7.postimg.org/51ifgrfrv/KEEPCALM.jpg

hafr
Jun 4, 2013, 03:32 AM
There's no shading in the WWDC app icon, so why did you add it to the other icons? I believe you're on the right track though, but no shadows :)

roadbloc
Jun 4, 2013, 03:37 AM
http://images.anandtech.com/doci/6415/HTC-8X-4403.jpg
You're wrong. It'll look like this.










http://i2.kym-cdn.com/profiles/icons/tiny/000/079/547/trollface453.jpg

Bonestle
Jun 4, 2013, 05:24 AM
There's no shading in the WWDC app icon, so why did you add it to the other icons? I believe you're on the right track though, but no shadows :)

I can see shading (or at least gradient) right there in the icons, where are you looking?
Nice work, OP!

pmontanarella
Jun 4, 2013, 05:47 AM
This looks great, as long as it's not the only change, I also want new user features!

Pietro

TC03
Jun 4, 2013, 05:49 AM
I think the color saturation in your mock-ups is way too low. Also, corners for the calendar app should be rounded.

hafr
Jun 4, 2013, 06:11 AM
I can see shading (or at least gradient) right there in the icons, where are you looking?
Nice work, OP!

Look at the mock iMessage icon, you'll see that the text bubble casts a shadow. The apple in the actual WWDC icon does not.

DaSal
Jun 4, 2013, 06:15 AM
Why are there hints of grey at the bottom of the icons? That doesn't look good at all.

Bonestle
Jun 4, 2013, 06:46 AM
Look at the mock iMessage icon, you'll see that the text bubble casts a shadow. The apple in the actual WWDC icon does not.

My mistake, I see what you were referring to now.

tmanto02
Jun 4, 2013, 07:01 AM
http://s7.postimg.org/51ifgrfrv/KEEPCALM.jpg

Keep calm??!! Keep calm??!! This is a iOS 7 not just a world war! ;)

andrewpturko
Jun 4, 2013, 09:09 AM
Why are there hints of grey at the bottom of the icons? That doesn't look good at all.

Look at the mock iMessage icon, you'll see that the text bubble casts a shadow. The apple in the actual WWDC icon does not.

I applied the shadow based on http://cdn.macrumors.com/article-new/2013/06/ios7icons.jpg, perhaps it should have been more of a "glow".

I think the color saturation in your mock-ups is way too low. Also, corners for the calendar app should be rounded.

There's no shading in the WWDC app icon, so why did you add it to the other icons?

I believe there are subtle gradients and shading on the icon's color, although they most likely aren't around the white symbols in the icons like I previously applied. It's most likely more of a "glow" or at least more subtle. As I made this in Photoshop, applying no shadow awful to me at the time, so it's probably a bit more exaggerated than what I first imagined.


Like I said at the bottom of my post, the icons are provided to only illustrate an idea of the concept and are not strictly meant to be accurate because that's not the point. We won't know until Monday. My concept is only referencing the color choices to the existing icons and what they might be applied to. I made this in about 10 minutes, I realize the shadowing and gradients aren't perfect, they're only rough mockups, but I appreciate all of your feedback! I hope you all get the idea that I'm pointing out here, and appreciate the interesting conversation this is starting.

Anyway, by agreeing with the post you are agreeing to the simple idea that the layers of colors on the WWDC logo will match their respective apps and be applied much like they were on the official WWDC app icon. I tried my best to give a rough illustration of this, but your vote should be based on this idea rather than the rough icons themselves.

Last but not least...KEPP CALM?!?!?! Impossible. :p

Prototypical
Jun 4, 2013, 09:19 AM
While I understand that you're trying to mock up the "official iOS7 Icons," the thread title is pretty misleading. People are going to think these are the real icons... which is exactly how hoax stories get started.

...Just sayin'.

andrewpturko
Jun 4, 2013, 09:26 AM
While I understand that you're trying to mock up the "official iOS7 Icons," the thread title is pretty misleading. People are going to think these are the real icons... which is exactly how hoax stories get started.

...Just sayin'.

It's really just the first title that came to mind, no hoaxes here. Just my idea of what the official iOS icons will be based off of. I see what you're saying though, I'd think the same thing if I just glanced at the icons and replied. The underlying details are in the context of the post. Thanks for the input. :)

andrewpturko
Jun 4, 2013, 01:21 PM
I've modified the icons based on all of your great feedback, and I think the visual idea is a bit more on target now, although not perfect (because we just don't know yet! :D). Let me know what you think!

hafr
Jun 4, 2013, 01:23 PM
I've modified the icons based on all of your great feedback, and I think the visual idea is a bit more on target now, although not perfect (because we just don't know yet! :D). Let me know what you think!
Much better! This looks really nice :)

sdilley14
Jun 4, 2013, 02:42 PM
>> UPDATE: I've modified the icons based on feedback, let me know what you think!

*The icons are provided to only illustrate an idea of the concept and
are not strictly meant to be accurate.

Wow...those look great! I would welcome that change with open arms! Clean, simple, and the colors really pop. I like it!

It's something small, but I really can't wait to see some of these icons get a total makeover...particularly the Photos, Mail, and App Sore icons...They look dated and crappy, IMO.

andrewpturko
Jun 4, 2013, 05:15 PM
It looks like transparency is even more prominent now and is looking to be another key factor in iOS 7's design based on the newly released WWDC 2013 banners:

http://i.cubeupload.com/xGyK8T.png

Silvereel
Jun 5, 2013, 02:14 PM
I like the look of those. The transparent icons are giving me a sort of iMac G3 vibe, too.

VolceOntra
Jun 5, 2013, 02:34 PM
These look great, but lets pray they don't go with that obnoxious iTunes/Music color.

andrewpturko
Jun 5, 2013, 03:28 PM
I like the look of those. The transparent icons are giving me a sort of iMac G3 vibe, too.

Yeah! To this day I'm still in love with the design of the iMac G3. I think it still defines the Apple of this era in a way.

Also...
"We made the buttons on the screen look so good you'll want to lick them."
-Steve Jobs

lewismayell
Jun 5, 2013, 04:20 PM
If I'm honest, I don't think there has been a point for Apple to have a Music app and an iTunes app, on desktops iTunes is able to play music and be able to make purchases, I'd quite like to see them get rid of music and put it into the iTunes app, with a shortcut to the store

zhandri
Jun 5, 2013, 04:37 PM
you did a great job! no doubt

andrewpturko
Jun 5, 2013, 08:15 PM
If I'm honest, I don't think there has been a point for Apple to have a Music app and an iTunes app, on desktops iTunes is able to play music and be able to make purchases, I'd quite like to see them get rid of music and put it into the iTunes app, with a shortcut to the store

I agree 100%. iBooks has their store right in the app, so why not iTunes. The Music app, previously called the iPod app was conceived at a time where bringing the iTunes store to a mobile platform was completely new. As time progressed, it doesn't seem very intuitive anymore, and there needs to be a change in these things to make sense once again.

I'd also like to point out that on a personal computer iTunes puts all its stores under the App, where as on mobile it's separate. Perhaps a new "iStore" would work better and make more sense (think "Play Store") rather than consolidating it all under one app. Although this would create another problem that iTunes original solved - combining the player with the store. This method would separate that, so perhaps integrate the iStore into iTunes on the desktop. Better yet, integrate the respective stores to their respective apps on all platforms...oh I should stop babbling now before I'm tempted to make a concept. ...ideas ideas :D

ThisIsNotMe
Jun 5, 2013, 08:19 PM
Add some transparency to that icon and I think you get what Apple is going to be shooting for.
Look at the WWDC banner. Clearly the colored icon tiles are semi transparent.

andrewpturko
Jun 5, 2013, 08:27 PM
Add some transparency to that icon and I think you get what Apple is going to be shooting for.
Look at the WWDC banner. Clearly the colored icon tiles are semi transparent.

Yeah I saw and pointed the fact out, although I'm not sure they would make the icons themselves semi-transperent, due to the simple fact that they would be completely inconsistent relative to all of the other 3rd party app designs. There are certain levels of design that are easy for the 3rd parties to adapt to, such as removing the gloss effect (it's typically applied on Apple's end). Adding transparency would be difficult for each developer to implement correctly with their apps, and would be difficult for apple to automatically apply the precise amount to each icon. Only time will tell though!

chembox
Jun 5, 2013, 10:24 PM
Those icons look pretty similar to mine. ;)

Bright, flat colors, similar to this:

gpsouza
Jun 5, 2013, 10:28 PM
I really don't think they're going to be anything like this.

ionjohn
Jun 5, 2013, 11:40 PM
I love them!

dontpannic
Jun 6, 2013, 08:18 AM
Hardly the 'official' iOS7 icons are they? They're your interpretations, so surely the thread title should contain 'mockup'.

HeezyBear
Jun 6, 2013, 08:36 AM
Dynamic Icons
The Calendar icon has always been dynamic, so why not make the Weather and Clock icons dynamic as well?


Because that would require a constant pull of data for weather, which would negatively impact battery life.

MonkeySee....
Jun 6, 2013, 08:51 AM
Nice post, Dude. Hope you're right. Looks nice.

CAWjr
Jun 6, 2013, 08:56 AM
Because that would require a constant pull of data for weather, which would negatively impact battery life.

Why does it need to be a constant pull? Why can't they just get rid of the temperature, and show sunny, cloudy, rain, etc. Pull that down every 4 hours & update the icon. Smart icons doesn't have to mean brilliantly accurate icons.

HeezyBear
Jun 6, 2013, 09:41 AM
Why does it need to be a constant pull? Why can't they just get rid of the temperature, and show sunny, cloudy, rain, etc. Pull that down every 4 hours & update the icon. Smart icons doesn't have to mean brilliantly accurate icons.

If it's not accurate then what purpose would it serve? To determine if weather conditions have changed and thus the icon be updated, data would need to be used. If it's only every four hours my phone could say it's sunny outside, but in the last hour it may have started raining and if my phone won't update the icon for another three hours it would be inaccurate.

Banquo
Jun 6, 2013, 09:48 AM
I work indoors, and I always thought it would be great if my iPhone buzzed for two seconds when it started raining outside.

Then one day walking home it started to rain heavily. I remember being miserable and thinking if my iPhone buzzed to let me know I was already wet, I would probably smash the phone off the ground. So it's best that my ideas are not implemented.

dontpannic
Jun 6, 2013, 09:50 AM
If it's not accurate then what purpose would it serve? To determine if weather conditions have changed and thus the icon be updated, data would need to be used. If it's only every four hours my phone could say it's sunny outside, but in the last hour it may have started raining and if my phone won't update the icon for another three hours it would be inaccurate.

How about it refreshes each time you open the weather app? If you open the weather app and it downloads hourly forecasts for the current day and the next 7 days weather, the icon could just use the daily data until some such time that the app is opened and the data refreshed...

andrewpturko
Jun 6, 2013, 07:45 PM
I work indoors, and I always thought it would be great if my iPhone buzzed for two seconds when it started raining outside.


On a side note, Philips hue can blink a certain color as a notification for weather when connected to IFFT. This reply just made me think of that and thought it was quite neat.

See more about the Philips Hue 1.1 update here. (http://www.meethue.com/en-US/whatisnew)

See more about IFFT here. (https://ifttt.com) I absolutely love this service.

If it's not accurate then what purpose would it serve? To determine if weather conditions have changed and thus the icon be updated, data would need to be used. If it's only every four hours my phone could say it's sunny outside, but in the last hour it may have started raining and if my phone won't update the icon for another three hours it would be inaccurate.

I'm sure there's a simple solution to only update the icons when on the home screen. You're always getting push notifications through other services anyway, so I don't see, with the right resources from Apple, how this would differ much anyway.

Sdahe
Jun 6, 2013, 07:57 PM
Those icons look pretty similar to mine. ;)

They look very nice

Bugeyeblue
Jun 6, 2013, 08:14 PM
I think it's going to look just like this game.

andrewpturko
Jun 6, 2013, 10:26 PM
I think it's going to look just like this game.

Are you kidding?

oiuh151
Jun 6, 2013, 10:33 PM
Maybe an app folder will be similar to the WWDC logo? Dynamically changes with the apps you put in it.

ThisIsNotMe
Jun 6, 2013, 10:46 PM
Anyone want to throw together a "thick" "stain glass" type icon set based on the semi transparent "stain glass" tiles in the WWDC banner???
(I am feeling INCREDIBILITY lazy)