It seems like "flat design" is popping up everywhere and dominating the topic of web design conversation these days. Designers seem to love it or hate it.
If you are in the hate it category, skeuomorphism may be a better option to consider for your projects.
What is Skeuomorphism?
Skeuomorphism is a design technique in which the designer tries to make items on the screen look like things from the physical world. Elements are designed with three-dimensional qualities in mind so that they look like they almost pop off the screen.
The design concept has been made famous by Apple interfaces. The icons on the home screen of an iPhone, for example, are designed in the skeuomorphic style.
But skeuomorphism refers to more than just the look of something. When it comes to website and application design, skeuomorphism also refers to how something works. Does the visual representation help you understand how to use something? Think of it this way. On your iPhone or iPad, iBooks is designed so that titles open to look like physical books, and with a swipe you turn the pages. Both the look and the corresponding action mesh in an intuitive way.
The term comes from a combination of Greek words: skeuos and morphe, which mean tool and shape, respectively. And simply, skeuomorphism is digital realism.
Skeuomorphism Characteristics and Techniques
There are a lot of tricks that go into making skeuomorphism work, but the real genius is adding those tricks in such a way that you don’t see them. They should only add to the overall effect.
Drop shadows, bevels, embossing and textures are all designer effects used to make skeuomorphism work. The effects should be subtle and natural to be the most effective.
Layering is also a commonly used technique in skeuomorphic design. Objects often rest on top of one layer and there may be something in between, such as text or other user interface elements. Take a look at the layering on the G’Nosh site, for example. The background is textured and has type on it. The food elements are then arranged on top of the type with shadows (that even encroach on the space occupied by type) so that they look like they are actually sitting on the screen.
You want the overall effect to be one that makes you think you could almost reach into the screen and grab an object. And that’s skeuomorphism at its finest.
Why Use Skeuomorphism?
Designers can use skeuomorphism for a number of reasons.
It can be a great tool for helping to create a distinct user experience, realistic-looking elements are familiar for users, the look can feel special or "premium" and it can mesh with a designer’s style.
Fans of skeuomorphism also argue that the style makes it easier for users to know how to interact with the design. Shadows help highlight buttons and almost "lift" them off the screen, making each button an obvious place to click or tap.
Skeuomorphism can also create a sense of atmosphere and place. People react emotionally to objects and by creating an object (or replica or action) on the screen, you can connect and create an association with users. It can be a great way to establish a sense of nostalgia or even desire (which could work well if you are trying to sell something).
The skeuomorphic look is also thought of as more fun and playful than some other design schemes. In certain situations, it can take on an almost childlike or cartoony feel. For this reason, it is often used in games.
Great Skeuomorphic Design
Great skeuomorphic design is about more than shadows and tricks, it makes a user feel like that are part of the world on the screen. Here is a gallery of some great skeuomorphic design.
 
Tips for Getting Started
Skeuomorphism should be intuitive. If the design looks like it should do something or work in a certain way, make sure it does. Let’s go back to iBooks, for example, the pages make you think you can "turn" them on the screen and with a swipe of the screen you can. For users, the look of the interface and the action they expect to take are the same.
Don’t overdo it. Too many shadows can be overwhelming. The look should be natural. Shadows should follow patterns of light in both location, proximity to an object and depth. Don’t just add tricks because the software allows it; every technique should have a purpose.
Think about layering. One of the best ways to create a sense of realism is with depth. People live in a three-dimensional world and by recreating that on the screen users will know exactly how to interact with your design. Layer objects such as images, text and backgrounds in a way that feels natural or photographic.
Design for the way your interface should be used. Is it designed to be clicked or tapped? Make sure each button or interactive space is designed with that idea in mind.
Keep it simple. Too many tricks or elements can make your site overbearing for users. Design around a theme and stick to it. You don’t need a shadow on every element, or a design that replicates multitudes of items. Play up a technique that complements the design and purpose of the website or app. Avoid using a technique just because you think it is neat.
Conclusion
Design for the user. It really is that simple. I will not argue the merits of one type of design over another because much of it comes down to style and preference of the designer.
If your interaction rates are good and users like using your site, stick to it. This goes for any type of design outline – flat or skeuomorphic.
The five things that matter most are usability, learn-ability, accessibility, effectiveness and satisfaction. Design with that in mind. There is a place for almost every technique; use them wisely.
Comments will be moderated and
rel="nofollow"will be added to all links. You can wrap your coding with[code][/code]to make use of built-in syntax highlighter.Adding 'texture' to an interface increases understanding, communicates navigation/purpose, adds appeal, creates personality, helps information into long-term memory, is gorgeous to look at and when all is said and done it's how the world around us looks! Trees are intricate, multi-shaded things; they have bark, glistening leaves and insects. Wood looks like...wood!
Flat design websites look smooth, ordered, calm, but they also need some texture to communicate all of the above which we as humans appreciate and require for a fuller experience. Apple has gone halfway with gradients and bits of texture.
I'm still going to put 'texture' into my teaching of interface design but take some of the good things about flat design with it as well.
http://www.emailmonks.com/email-design-coding-order.html