4 ms·

It seems to me that a lot of articles about flat ui contrast it with skeuomorphic design, which misses the point. In all the examples, even though the visual d

by sksksk 13y ago

It seems to me that a lot of articles about flat ui contrast it with skeuomorphic design, which misses the point. In all the examples, even though the visual design is "flat", there are many cases where it's still skeuomorphic... See the pen and rubbish bin here: http://dribbble.com/shots/947749-Task-app/attachments/107085 http://dribbble.com/shots/947749-Task-app/attachments/107085 The calendar here: http://dribbble.com/shots/917819-iPad-Calendar-Login http://dribbble.com/shots/917819-iPad-Calendar-Login And the flat representation of a piece of paper here: http://dribbble.com/shots/962125-Filetypes http://dribbble.com/shots/962125-Filetypes They're all flat, yes, but it doesn't mean that they aren't skeuomorphic

gbvb 13y ago
Do you have good examples of true 'flat' design? I fear that if we are too flat, will it endup becoming an abstract entity that needs explanation on what that is meant to be? I thought the ones you point out seemed like good examples of not too abstract kind. :)
- sksksk 13y ago
  I think all the examples are examples of true flat design, the graphics and such are all flat. If you're talking about a skeumorphic free design, then I think they'd be extremely difficult to find, and that's not necessarily a bad thing. Refusing to use something purely because it's a metaphor to something in the real world seems somewhat counter productive. One example of a skuemorphic free design is this calculator app: http://www.acqualia.com/soulver/ http://www.acqualia.com/soulver/
  - gbvb 13y ago
    Thank you for that explanation and the example. I love that calculator. I see why skeumorphic free design is hard to find. :)
supercoder 13y ago
Yep, you're spot on. The Flat UI 'style' can be as skeuomorphic as you want. Using the term 'Flat UI' makes sense but I think it comes back to this misuse of the word skeuomorphic. Needs to be labeled as Gloss / Rich or something instead.
- kunai 13y ago
  Ornamental, perhaps?
Razwiss 13y ago
http://en.wikipedia.org/wiki/Skeuomorph http://en.wikipedia.org/wiki/Skeuomorph There is a difference between an icon and a real skeuomorph design. How would you represent a pen without drawing the shape of a pen otherwise ? Skeuomorph is, for example, faux leather on the header in iOS notes http://img.wonderhowto.com/img/13/10/63487286393710/0/iphone-notes-taking-care-notes-and-moving-your-iphone-notes-around.w654.jpg http://img.wonderhowto.com/img/13/10/63487286393710/0/iphone...
- supercoder 13y ago
  No, faux leather isnt skeuomorphic. The bookshelves in iOS's iBooks app are. But these could easily be drawn in a Flat UI 'style' and still skeuomoprhic style. So rich textures != skeuomorphic
  - ryanbrunner 13y ago
    Faux leather and textures in and of themselves aren't, but using a faux leather texture on a notebook app to make it look like a real notebook certainly is.
  - Razwiss 13y ago
    skeuomorph is a physical ornament or design on an object made to resemble another material or technique. Examples include pottery embellished with imitation rivets reminiscent of similar pots made of metal,[1] or a software calendar application which displays the days organised on animated month pages in imitation of a paper desk calendar.[2] Simulated woodgrain on automobiles is a skeuomorph, such as this station wagon which uses no actual wood construction http://en.wikipedia.org/wiki/Skeuomorph http://en.wikipedia.org/wiki/Skeuomorph
    - eddieroger 13y ago
      Same Wikipedia article: "Functional input controls like knobs, buttons, switches and sliders are often careful duplicates of the ones on the original physical device being emulated." The save button being a floppy disk (which is no longer used), or a sheet of paper to represent a document (which may or may not ever be printed to an actual sheet of paper) are skeuomorphs by this article's defintion.
killercup 13y ago
Exactly. "Real" flat design is more like the difference between animated toggle switches and plain checkmarks to show that something is enabled. (I guess checkmarks are more like a typographic convention than a "real world object".)
runjake 13y ago
I think you're confusing iconography and skeuomorphism in your examples. Skeuomorphism is more about simulating an environment, primarily through textures and colors and thus the experience. In the examples you give, the ideas are more iconography.
- adregan 13y ago
  I tend to agree with this line of thinking. The icons are becoming solidly ideogrammatic. They express the idea and are no longer literal — similar to Chinese characters or Kanji. For example, east 東, which is the character for sun 日, in the branches of a tree 木. The character is literally an image the sun rising, but it represents the idea of cardinal direction. The icon for floppy disk no longer represents the act of writing to a floppy, but it does represent the idea of saving.

by sksksk 13y ago

gbvb 13y ago

Do you have good examples of true 'flat' design? I fear that if we are too flat, will it endup becoming an abstract entity that needs explanation on what that is meant to be? I thought the ones you point out seemed like good examples of not too abstract kind. :)

sksksk 13y ago
I think all the examples are examples of true flat design, the graphics and such are all flat. If you're talking about a skeumorphic free design, then I think they'd be extremely difficult to find, and that's not necessarily a bad thing. Refusing to use something purely because it's a metaphor to something in the real world seems somewhat counter productive. One example of a skuemorphic free design is this calculator app: http://www.acqualia.com/soulver/ http://www.acqualia.com/soulver/
- gbvb 13y ago
  Thank you for that explanation and the example. I love that calculator. I see why skeumorphic free design is hard to find. :)

supercoder 13y ago

Yep, you're spot on. The Flat UI 'style' can be as skeuomorphic as you want. Using the term 'Flat UI' makes sense but I think it comes back to this misuse of the word skeuomorphic. Needs to be labeled as Gloss / Rich or something instead.

kunai 13y ago
Ornamental, perhaps?

Razwiss 13y ago

http://en.wikipedia.org/wiki/Skeuomorph http://en.wikipedia.org/wiki/Skeuomorph There is a difference between an icon and a real skeuomorph design. How would you represent a pen without drawing the shape of a pen otherwise ? Skeuomorph is, for example, faux leather on the header in iOS notes http://img.wonderhowto.com/img/13/10/63487286393710/0/iphone-notes-taking-care-notes-and-moving-your-iphone-notes-around.w654.jpg http://img.wonderhowto.com/img/13/10/63487286393710/0/iphone...

supercoder 13y ago
No, faux leather isnt skeuomorphic. The bookshelves in iOS's iBooks app are. But these could easily be drawn in a Flat UI 'style' and still skeuomoprhic style. So rich textures != skeuomorphic
- ryanbrunner 13y ago
  Faux leather and textures in and of themselves aren't, but using a faux leather texture on a notebook app to make it look like a real notebook certainly is.
- Razwiss 13y ago
  skeuomorph is a physical ornament or design on an object made to resemble another material or technique. Examples include pottery embellished with imitation rivets reminiscent of similar pots made of metal,[1] or a software calendar application which displays the days organised on animated month pages in imitation of a paper desk calendar.[2] Simulated woodgrain on automobiles is a skeuomorph, such as this station wagon which uses no actual wood construction http://en.wikipedia.org/wiki/Skeuomorph http://en.wikipedia.org/wiki/Skeuomorph
  - eddieroger 13y ago
    Same Wikipedia article: "Functional input controls like knobs, buttons, switches and sliders are often careful duplicates of the ones on the original physical device being emulated." The save button being a floppy disk (which is no longer used), or a sheet of paper to represent a document (which may or may not ever be printed to an actual sheet of paper) are skeuomorphs by this article's defintion.

killercup 13y ago

Exactly. "Real" flat design is more like the difference between animated toggle switches and plain checkmarks to show that something is enabled. (I guess checkmarks are more like a typographic convention than a "real world object".)

runjake 13y ago

I think you're confusing iconography and skeuomorphism in your examples. Skeuomorphism is more about simulating an environment, primarily through textures and colors and thus the experience. In the examples you give, the ideas are more iconography.

adregan 13y ago
I tend to agree with this line of thinking. The icons are becoming solidly ideogrammatic. They express the idea and are no longer literal — similar to Chinese characters or Kanji. For example, east 東, which is the character for sun 日, in the branches of a tree 木. The character is literally an image the sun rising, but it represents the idea of cardinal direction. The icon for floppy disk no longer represents the act of writing to a floppy, but it does represent the idea of saving.