In this chapter, we will decode the Skeuomorphic Design aka Skeuomorphism.
History
It began to take shape in the 1980s.
One of its earliest proponents was Steve Jobs.
Designers heavily used Skeuomorphism, because they wanted to build an interface that gave users; who would be seeing/using the computers for the first time ever; AMAP real-work-like experience and hence was easy to use/learn.
Skeuomorphism helped a generation through the learning curve of coming to grips with a digital era.
In 2007 Forbes declared its death.
Features
1.
It mimics familiar materials
2.
It invokes a sense of familiarity & intuitiveness &; hence; comfort in consumers.
3.
It looks real-like or realistic
4.
Is ornamental most of the times
4.
Is ornamental most of the times
5.
3D effects like gradients, gloss, textures, raised edges, drop shadows give an illusion of height or depth to an interface, which can help users interpret visual hierarchy and understand which elements are interactive.
Elements that appear raised look like they could be pressed down, i.e. clicked with the mouse.
Example: buttons
Elements that appear sunken or hollow look like they could be filled.
Example: input fields, like search tools.
6.
Skeuomorphism represents “perceived affordances”. An affordance is an object whose shape suggests its use (like: door handles and push buttons). It fits with our natural interpretation of objects but in a digital world.
7.
But, it eventually led to huge amounts of visual clutter (aggressive, overdone, and visually distracting use of 3D) on the desktop; which made it unappealing; by bringing too much of useless details to our computers which we no longer needed.
8.
As the focus is completely on real-work-imitation, the usability is almost compromised.
One example is the gear-UI shown below.
9.
It takes far more time to load.
The gear-UI shown below would be a good example.
Examples:
6.
Skeuomorphism represents “perceived affordances”. An affordance is an object whose shape suggests its use (like: door handles and push buttons). It fits with our natural interpretation of objects but in a digital world.
7.
But, it eventually led to huge amounts of visual clutter (aggressive, overdone, and visually distracting use of 3D) on the desktop; which made it unappealing; by bringing too much of useless details to our computers which we no longer needed.
8.
As the focus is completely on real-work-imitation, the usability is almost compromised.
One example is the gear-UI shown below.
9.
It takes far more time to load.
The gear-UI shown below would be a good example.
Examples:
Windows 95 dialog box
(This makes use of heavy shadows and highlights to create 3D effects.
Notice how the buttons appear raised and the input fields appear sunken.
It’s also clear which of the three tabs is on top of the other two.)
Grear Controller UI
(imagine how long will this UI take to load,
and how difficult would it be use using mouse)
Amazon Fire Kindle
(Earlier versions used a wooden-bookshelf-like design)
Credits:
En.Wikipedia.org/wiki/Material_Design
En.Wikipedia.org/wiki/Metro_(design_language)
En.Wikipedia.org/wiki/Windows_Phone_7
En.Wikipedia.org/wiki/Skeumorphism
En.Wikipedia.org/wiki/Flat_design
Cleveroad.com/blog/flat-design-vs-material-design-how-different-they-are
99designs.com/blog/trends/skeuomorphism-flat-design-material-design/
Interaction-design.org/literature/article/skeuomorphism-is-dead-long-live-skeuomorphism
NNgroup.com/articles/flat-design/
Visual.ly/community/Infographics/technology/ios-6-vs-ios-7
OSxDaily.com/2013/06/11/ios-7-vs-ios-6-visual-comparison/
DesignModo.com/flat-vs-material/
Gowtham.design/blog/material-vs-flat/
YouTube.com/watch?v=TfzEPtLPnP4
Hongkiat.com/blog/flat-20/
No comments:
Post a Comment