2 Comments

Skeuomorphism vs. Flat Design: Some Inspirations

The design industry is rethinking Skeuomorphism lately. Whether flat design is a more appealing approach or Skeuomorphism is still  in its prime time.I was reading all those arguments and think to myself: Maybe they can work hand-in-hand instead of mutual exclusive? So I went out and did some inspirations search. The results are encouraging, not exactly proved my point but still offer a possible direction, here’s what I found:

1. Tiny Tower

Tiny-Tower-Level-Upgrade

‘Tiny Tower’  is a mobile business simulation game developed by NimbleBit. It’s 8-bit ‘Pixel Art’ style created a new genre on game graphics. Look at the above picture closely, you’ll find there are some little ‘glow’ effect on top of the arcade machine, and some strong shadow on the wall from ceiling down. So the art style is 8-bit pixelized and very 2-D (flat), but it also has some shadows, glows and subtle textures (which all add up to the chrome just like skeuomorphism design do), to create some depth and visual appeal.

2. Minecraft

lonely_night_in_minecraft__by_xmax247-d5ksm9y

Minecraft’s graphic design is ‘crude’. The entire world is built by all the little square blocks. Yet, if you put up some torches on the little hut you just built at night, you’ll find a very cozy orange glow around the torch. The glow is totally not ‘crude’. Another good example of combining lo-fidelity ‘flat’ elements with subtle hi-fidelity effects.

3. Fez

Fez-08

Fez is another platformer game using pixel art style. The game play is quite unique. You are a 2D creature that performing all the jumps and climbing in a 2D world, but you can change perspective, which will result in a 90 degree turn where a 3D world is revealed to you.(See picture above) The visual is 2D, but the interaction and the more dynamic part of the design is 3D, which offer another new approach.

4. Path

Path-UI-Style

Path is a perfect example of the strength when you combine flat and simple UI elements with subtle textures and effects. They really get it right and have the best of both worlds. The title bar is very subtly ‘textured’ yet still looks very clean and digital.(Upper part of the picture) The ‘Flyout Menu’ (red circle with ‘+’ or ‘x’ int he middle) has a very light ‘glossy effect’, but all the other action buttons are represented by flat circles (Middle part of the picture). All the emotion icons are totally flat though. (Lower part of the picture) The overall design language is flat for sure, but they spice it up with some textures, shadows, glossy effects here and there without breaking the clean look and feel. Really a marvelous job done.

5. Clear

Clear_swipe

Clear is the app that pioneer the ‘movement’ from skeuomorphism to flat design. But even Clear has gradient in it. It also support different themes, so if user get bored with one color scheme, they can switch to another one that they like.

Photo-Feb-06-5-17-49-PM

Image: By TheNextWeb.com

Also, Clear’s static visual design is flat and simple, its interaction animation is very interesting. For example, to create a to-do item in the middle of a list, user can simply pinch apart the list where they want the item created, then the list will unfold like a folded paper. It’s 100% skeuomorphism in action, drawing reference from real world experience of childhood paper-folding.

To Sum it up…

Skeuomorphism and Flat design are all but two different design languages. Each has its strength and limitation, and will fit into different scenarios to solve design problems. There’s no absolute right or wrong about using them, it’s just how well it fits into the problem you want to solve and the audience you want to please. And be creative! The above examples proves that you can use them both and still yielding fascinating results!

 

About these ads

2 comments on “Skeuomorphism vs. Flat Design: Some Inspirations

  1. […] Skeuomorphism vs. Flat Design: Some Inspirations (linwangge.wordpress.com) […]

  2. […] Skeuomorphism vs. Flat Design: Some Inspirations (linwangge.wordpress.com) […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 133 other followers

%d bloggers like this: