Deviation Actions

glange65's avatar

Perspective in Flat Icons

By
10 Comments
3K Views
Been studying and working on some ideas, specifically regarding flat icons.  I've been seeing a number of icons that have traditionally been viewed on an angle, with a little perspective...be given the "Flat" treatment.  I'm not sure it always works...  My idea is that along with simplifying the colors and eliminating fine details, shadows, etc..is to rotate or change an angled perspective as well....I mean REALLY flatten it out. 

Here are a few I've worked on.  These are traditionally seen on an angle, seeing the third side and creating depth (plus further defining the icon visuals).  Not sure which of the two Dropbox icons I like best...version B is more in keeping with the changed perspective, but version A is a bit more interesting. 

Love to hear your thoughts
Image details
Image size
3333x2500px 453.05 KB
Published:
© 2014 - 2021 glange65
Comments10
Join the community to add your comment. Already a deviant? Log In
DaKoder's avatar
:star::star::star::star::star: Overall
:star::star::star::star::star: Vision
:star::star::star::star::star: Originality
:star::star::star::star::star: Technique
:star::star::star::star::star: Impact

Just rewriting my comment as a critique <img src="e.deviantart.net/emoticons/s/s…" width="15" height="15" alt=":)" data-embed-type="emoticon" data-embed-id="391" title=":) (Smile)"/>.

These icons are a different point of view or thought on what "flat" really means. Does "Flat UI" mean flat in color or flat in shape... or both? I've seen both flattened shape and color in Metro UI, and just flat color in Google's UI. And then, just as you said, I've seen icons with flat colors, but still with shadows and such. However, your icons are completely new. They add, I guess, "depth" to the icons, as if, if you turned the icon or put in flat on a table, and looked from the side, it would have a height. For instance, on your WMP icon, the play icon seems lifted off the actual icon, and the orange circle seems like it is pressed in. On your library icon, the two flaps of the folder seem like they have space between them. If you understand what I mean, it's as if your icons are not just squares, but they are rectangular prisms. You made them more realistically 3D looking.

My only suggestion is, add more of that depth in. For instance, maybe move around some of those blocks on Defrag and add shadows that makes it look like on block is in front of another. Or on WinRAR, move around the books, or something like that.

Overall, the look is aesthetically pleasing and looks like it would fit right in with other Flat UI elements. I just love how, when I first saw the icons, I had to take a second look, because of that weird sense of 3D, even thought it isn't 3D. It's flat, but at the same time, it's not flat. Really cool and interesting. 5/5!
glange65's avatar
WOW...thank you for taking the time to explain and add the additional detail to your comments.  I appreciate it!
Funny...I had actually started to add some shadow lines to the "Defrag" icon just as you suggested.  I decided against it at the time because i was concerned that the icon would have too much going on / be too "busy".  But I do want to revisit that one and the WinRAR as well as they do seem to be out of place a bit with the others.
I'm also excited that someone , for lack of a better phrase, "gets" what I was saying and trying to do...that taking a 3 dimensional icon and changing the perspective can be an important part of the "flattening" as eliminating the color gradients and shadows is.

Just added another sampling of the idea, with yet another version of Dropbox, that I think is my favorite.
ChesterNi's avatar
Nice shadows. Love it :)
DaKoder's avatar
glange65's avatar
Thanks! 
I'll take an "Interesting" over most other compliments any day.  Means I made someone think which to me is more important than someone in agreement or who disagrees. 
DaKoder's avatar
It shows another "perspective" XD on flat icons. I've never seen it before. It's flat, but at the same time, it's not flat. Yet it still ends up being flat. Really cool!
glange65's avatar
Thanks.  I'm not following you when you say it "shows another perspective on flat icons"...
Could you elaborate?  If it's good I want to repeat it!!!
DaKoder's avatar
Sure :)

I mean that it is a different point of view or thought on what "flat" really means. Does it mean flat in color or flat in shape... or both? I've seen both flattened shape and color in Metro UI, and just flat color in Google's UI. And then, just as you said, I've seen 3D icons with flat colors, but still with shadows and such. However, your icons are completely new. They add, I guess, "depth" to the icons, as if, if you turned the icon or put in flat on a table, and looked from the side, it would have a height. For instance, on your WMP icon, the play icon seems lifted off the actual icon, and the orange circle seems like it is pressed in. On your library icon, the two flaps of the folder seem like they have space between them. If you understand what I mean, it's as if your icons are not just squares, but they are rectangular prisms. You made them more realistically 3D looking. I don't know if I confused you, but I tried my best to explain! :P
dAKirby309's avatar
Nice! Although I don't think I'll use this style too much, at least not consistently, a few will (and do) have perspectives like this, others, I'd like more of a 3D perspective :) nice designs though! I like the library and the WinRAR icon. And the shadows are nice!
Join the community to add your comment. Already a deviant? Log In