News for hackers. Stuff that matters.

A comment on Principles of Flat Design.

Re:Principles of Flat Design by sksksk on Tuesday May 28, 2013 @08:06AM (#5779417)
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

The calendar here: http://dribbble.com/shots/917819-iPad-Calendar-Login

And the flat representation of a piece of paper here: http://dribbble.com/shots/962125-Filetypes

They're all flat, yes, but it doesn't mean that they aren't skeuomorphic

[ Parent | on HN ]
Re:Principles of Flat Design by Razwiss on Tuesday May 28, 2013 @08:21AM (#5779486)
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...

[ Parent | on HN ]
Re:Principles of Flat Design by sksksk on Tuesday May 28, 2013 @09:06AM (#5779712)
> 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 ?

I wouldn't; personally I don't think there is anything wrong with using real world metaphors to make a point.

The trend seems to be moving away from realism in design, not skeuemorphism.

I think that having rendered textures that emulate leather became a trend in the first place because of high resolution screens; having some intricately designed texture was a great way of showing off how amazing the screen is.

Now that high resolution screens are the norm, there is no need to show it off, which is why the flat ui trend is emerging.

[ Parent | on HN ]
Re:Principles of Flat Design by hcarvalhoalves on Tuesday May 28, 2013 @11:46AM (#5780686)
> The trend seems to be moving away from realism in design, not skeuemorphism.

Yeah, exactly. Even if you don't simulate the look of paper (e.g.: texture), if the design functions like paper, it's skeuomorph just as well.

> Now that high resolution screens are the norm, there is no need to show it off, which is why the flat ui trend is emerging.

I think the reason is we have a native-digital generation that doesn't benefit from the connection to real life objects anymore. Those designers are all on their 18's.

For instance, the recording app on iPhone features a VU meter. How many people buying phones today have seen a real VU meter?

[ Parent | on HN ]
Re:Principles of Flat Design by supercoder on Tuesday May 28, 2013 @08:24AM (#5779497)
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

[ Parent | on HN ]
Re:Principles of Flat Design by ryanbrunner on Tuesday May 28, 2013 @08:34AM (#5779550)
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.
[ Parent | on HN ]
Re:Principles of Flat Design by Razwiss on Tuesday May 28, 2013 @08:34AM (#5779551)
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

[ Parent | on HN ]
Re:Principles of Flat Design by eddieroger on Tuesday May 28, 2013 @11:10AM (#5780469)
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.

[ Parent | on HN ]
Re:Principles of Flat Design by nollidge on Tuesday May 28, 2013 @12:15PM (#5780886)
Except the save button isn't, itself, a floppy disk, it's just got a floppy disk icon on it. The floppy disk or paper iconography are not "functional input controls" themselves. They are laid upon UI chrome which is likely skeumorphic to some degree, but the icons themselves are not examples of skeuomorphism.
[ Parent | on HN ]
Re:Principles of Flat Design by runjake on Tuesday May 28, 2013 @11:12AM (#5780479)
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.
[ Parent | on HN ]
Re:Principles of Flat Design by adregan on Tuesday May 28, 2013 @11:55AM (#5780736)
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.
[ Parent | on HN ]
Re:Principles of Flat Design by supercoder on Tuesday May 28, 2013 @08:20AM (#5779482)
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.

[ Parent | on HN ]
Re:Principles of Flat Design by kunai on Tuesday May 28, 2013 @12:36PM (#5781003)
Ornamental, perhaps?
[ Parent | on HN ]
Re:Principles of Flat Design by gbvb on Tuesday May 28, 2013 @08:20AM (#5779476)
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. :)
[ Parent | on HN ]
Re:Principles of Flat Design by sksksk on Tuesday May 28, 2013 @08:49AM (#5779615)
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/

[ Parent | on HN ]
Re:Principles of Flat Design by gbvb on Tuesday May 28, 2013 @09:10AM (#5779736)
Thank you for that explanation and the example. I love that calculator. I see why skeumorphic free design is hard to find. :)
[ Parent | on HN ]
Re:Principles of Flat Design by killercup on Tuesday May 28, 2013 @08:21AM (#5779488)
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".)
[ Parent | on HN ]