Streamlined Modern or Realistic Traditional? The Difference Between Skeuomorphism and Flat Design

Graphic design has come leaps and bounds in the last decade thanks to exciting developments in technology and software. Relatedly, web design has incorporated these updates as well, offering website designers many more tools to work with when creating new web pages. Some of these trends still have the jury out on their utility and durability in the competitive market of web design. One of the most influential developments in recent times is the popularity of a design trend known as skeuomorphism, which is in contrast to the more traditional designing method known as flat design. What should you know about these design methods to understand which is best for you?


DarkWave Studio

An example of Skeuomorphism is the user interface design of DarkWave Studio.

Skeuomorphism is what we call designing a program that then performs a certain function to contain elements reminiscent of that function through other more traditional means. If you have a notepad program on your computer or mobile that is designed to look like a spiral notepad of paper, you have been using a skeuomorphic program. Hundreds of thousands of computer programs take advantage of skeuomorphic designs to make their products’ use easier to identify and make customers feel as if they are simply using a digitized version of whatever real product or service they are imitating in the real world.

Skeuomorphic designs were popularized in Apple’s i-series of phones, tablets, computers, and MP3 players, which took the idea of realism in their graphic design to a whole new level. First commonly used in video games, this realism in technological programs is believed to better immerse the user in whatever game or activity the user is doing. For example, measuring your character’s life force in full or semi-full glass decanters instead of stark rectangular bars helps players of Diablo 2 be more fully involved with the medieval theme of the game. Traces of skeuomorphic design can be seen in several computer interfaces and programs, making the digital world as “realistic” as we know how to.

Flat Design

Windows 8 Start UI

A common example of flat design is the Windows 8 Metro-style user interface.

Flat Design goes in the opposite direction of skeuomorphic design, attempting to simplify and streamline programs and interfaces to make customer use as easy as technologically possible. Although Apple’s devices and programs incorporate several skeuomorphic elements, they are actually designed with flat design ideals at the foundation. Apple’s devices are the epitome of easy-to-use software that allows users to do an incredible number of processes in a few easy steps, all from one product. Flat design seeks to make what we used to do in other ways even faster and easier with a technologically-advanced program.

For example, a flat design note-taking app might allow you to simply speak into your microphone and have the text automatically uploaded into a text message or document. This is unlike how most people take notes without technology and thus might take some getting used to for customers, but this process is arguably quicker and easier than the tedious tasks of typing or writing notes oneself. In fact, this is one of the most celebrated aspects of flat design – less restrictions and improved experience. In fact, when a program attempts to mirror a real-world product in its user interface through skeuomorphic design, it is often limited by the same issues affecting its real-world match. This means that these programs are less exact than they could be were they to abandon their traditional interfaces.

If you are a web designer, incorporating elements of both skeuomorphism and flat design into your websites and programming to find the right balance between ease of use, aesthetics, and capabilities.

Would you like to receive similar articles by email?

Paul Tomaszewski is a science & tech writer as well as a programmer and entrepreneur. He is the founder and editor-in-chief of CosmoBC. He has a degree in computer science from John Abbott College, a bachelor's degree in technology from the Memorial University of Newfoundland, and completed some business and economics classes at Concordia University in Montreal. While in college he was the vice-president of the Astronomy Club. In his spare time he is an amateur astronomer and enjoys reading or watching science-fiction. You can follow him on LinkedIn and Twitter.

Leave a Reply

Your email address will not be published. Required fields are marked *