Tag Archives: flat design



Word: Realism

Definition: A design style that mimics physical items or textures for aesthetic appeal and effect.

Thoughts: While this might seem like a ridiculously easy term for me to be defining, it’s actually important because realism is often confused with skeumorphism. Realism is used purely for stylistic reasons while skeumorphism is about using metaphors as affordances and supports in order to teach users how to interact with and understand an interface.

Examples: Below are a couple examples to illustrate. Keep in mind how these designs are focused on realistic aesthetics and textures that mimic the real world but the visual does not provide clues as to how you should interact with the UI.

Screen Shot 2015-10-05 at 6.08.48 PM

Screen Shot 2015-10-05 at 6.08.25 PM

For fun: If you’ve scrolled down this far you deserve a final prize! Check out this amazing website that pits Flat Design vs. Realism!

Realism and flat design represent extremely different visual design choices and you will find most people have a strong preference for one over the other.


Skeuomorphic Design

Word:  Skeuomorphic Design

Definition: The design style in which old and familiar ideas are incorporated into new technologies even if the familiar no longer plays a functional role. In other words, the digital is made to look like the the old (in this case, the physical world) it represents.

Reference: Think of the early Apple iOS design in which the “Notepad” app physically looked like a ruler-lined notebook. Or my personal favorite, the first Southwest Airlines site that was designed to look and function just like the real world ticket counter. (Oh, how far we have come in the world of airline websites!)

Thoughts/Questions: We have long moved passed the “amateur” skeuomorphism of internets past and into a world full of flat and material design. Like fashion, will we ever see the day when skeuomorphism is so old, it’s new again?