Flat vs. Skeuomorphism

Flat vs. Skeuomorphism

   15:36       Dav31d

---

Flat design or Skeuomorphism.. which one are you?

I will list my own personal views on both flat design and skeuomorphism, as it was only about 3  months ago that someone mentioned the actual term skeuomorphism to me, and as a designer I was a bit unimpressed with myself that I didn't know the correct term I always referred to it as 3D, realistic design (..as If that's a thing) and realism. So I decided to research into it, learn and make myself more aware of what the skeuomorphic design encompasses and some examples, it also gives me a chance to compare with the now on trend flat design.

What is skeuomorphism you ask? In it's simplest term I have found realism or skeuomorphism to be the design of objects (or near enough anything nowadays) on a website to look how it should if it were in a real life format, in 3D essentially. With the use of textures, gradients, shadows or what have you these design elements come together to create a pure visual style that tries to imitate real-world materials and textures. Personally I don't think there is anything wrong with it, it certainly helps distinguish the theme of an app or even a website for example, as the consumer knows what to expect because it is being clearly communicated via the design style. As humans we analyze the things we feel, see, hear, smell and taste. So when we visit a website and we see skeuomorphic designs across that webpage, it may well have the tendency to appeal to our senses (apart from smell and taste maybe) as the designs resemble what it would look like in reality.

An example of skeuomorphic design:

My Itunes interface (I'm an eclectic listener of music what can I say) is an example of skeuomorphic design and a lot more apple products do use skeuomorphism which adds that sense of realism to their designs, it also helps identify them as brand (for example) if I took any apple related elements away from my print screen I'm more than certain that one would be able to state whose interface it belongs to.

Advantages of skeuomorphism (from a personal point of view):

• New users of the internet may well be attracted to the skeuomorphic design simply because of how it looks

• The idea of skeuomorphism is a 'familiar' and 'safe' approach for both viewers and designers

• Skeuomorphic design helps users comprehend the use of an app or a webpage more effectively

Disadvantages of skeuomorphism (from a personal point of view):

• An app that uses skeuomorphic design may suffer from being deemed dated as design trends adapt and evolve overtime.

• Unlike CSS, skeuomorphic design tends to largely depend on images

• With skeuomorphic design, larger files take longer to 1. download and 2. render in an internet browser

What is flat design? (you're probably not asking now so I'm just gonna tell you) As designers we are well aware of the term 'less is more' well I suppose you could argue and say flat design is ultimately the essence of this term. At it's most scaled back flat design is present among designs to look clean, beautiful but most of all simple, it is a minimalisitc approach to design that removes a lot of (if not all) the effects seen in skeuomorphic design. There are no uses of textures, gradients or the like when it comes to flat design. I feel flat design embodies a designers passion for simple yet communicative minimalist concepts, not only for designers but viewers have agreed that flat design web pages (for example), are simple colourful and clean. Flat design continues to populate many websites and companies as well as application they are becoming or being known more as modern. As flat design embraces a simple layout it makes it a lot easier for usability and most importantly (or arguably) user interactivity.

An example of flat design:

This was an illustration I created at one of my internships for ideas for a landing page for Vistence (an instant messaging app) it is my own attempt at using and creating flat designs as I've never tried it before, I feel I didn't do too bad of a job, they didn't use this design in the end however and opted for something else which can be viewed via the link.

An example of a website I came across when I was doing my research was a site called Dolox if my representation of flat design (above) isn't clear then I'm sure the link I provided will extinguish any doubt left. The use of colours, shapes, typography, layout, icon and images all mix together to create a simple yet affective piece of design.. Flat to be exact.

Advantages of flat design in my opinion:

• Flat design makes user experience simple and easy, a minimal amount of time (and energy) is spent trying to locate things in order to navigate the website

• Flat design is useful for responsive webpages (responsive referring to the format of a site or application you open) the the fact there isn't a lot of realistic design means it's easier to load pages.

• It's trendy, modern and clean.

Disadvantages of flat design opinion:

• Though it is one of it's greatest asset the two dimensional viewing of nearly everything may make it difficult to separate the action buttons, interactive objects and images meaning a lack of clarity for the page being viewed

• As mentioned earlier skeuomorphic design relies more on images as opposed to CSS, flat design on the other hand focuses on CSS which has a tendency to make production for flat designed websites more difficult as the outcome may not be as high a quality as originally expected.

• Flat designed websites may begin to look very generic and similar as more websites adopt the use of geometric shapes, colours, layouts etc. 

So those are my pros and cons on the use of flat and skeuomorphic design. The use of either one is purely down to personal preference and whilst we're on the subject I personally prefer flat design simply because in my eyes it looks more appealing and it's a lot easier to use; and given a designer uses the right combination of text, colours, shapes or the like you can create some stunning pieces of flat design all the more pleasing to the eye. From an objective point of view though depending on what you want to create and who you are creating it for one design could be deemed better or more useful than the other.