Skeuomorphism and Neumorphism

 

recycle bin

Why is there an icon that looks like a trash can or recycle bin on your desktop? Are you actually “recycling” a deleted document or photo? Would a shredder make more sense?

Word saveWhy does Microsoft Word still use as an icon to “save” a document an image of a floppy disk that no one uses anymore and that most people under 21 wouldn’t be able to identify?

It is skeuomorphism which is an interface design theory that mimics real-life. In graphical user interface (GUI) design the term describes interface objects that mimic their real-world counterparts in how they appear and/or how we interact with them. If you want to “cut” rather than delete some text, you might click a scissors icon – though there are no scissors involved at all.

The idea goes back to the earliest digital tools that appeared on the first personal computers and in programs loaded from floppy and CD disks. It carried over when all of that moved into the online world. Skeuomorphism makes interface objects familiar to users by using images or actions they will recognize.

When I first taught classes on how to use PhotoShop, I always explained that many of the terms and icons used in this “digital darkroom” mimic the real-world tools we used in the actual darkroom to do things like burn (intensify) or dodge (eliminate) the light from the photo enlarger to the photo paper below.

A discussion of skeuomorphism will also get into affordances, which is a term used to refer to action possibilities of objects or other features of the real world. Common examples of affordances include door handles and push-buttons. Their physical designs inform users that they can be rotated or pushed. A properly designed door handle that should be pulled should suggest that action, and a door that should be pushed should have a physical design that suggests that action. Adding a sign that says “Push” is a lazt=y cheat. A handle suggests that you pull a dor while a metal plate suggests that you push. One belongs on one side of the door and the other on the opposite side.

There are affordances in digital user interfaces. The early Apple computers and iPhones used a lot of skeuomorphism. Buttons looked like something you could push – even though you actually clicked them. Photos might have old-fashioned white borders or 3D edges that looked like physical photographs.

But we have been using these digital tools ten to forty years, so is this skeuomorphism familiarity necessary any more? Are these digital objects relevant to generations of digital natives? Do they clutter the user interface?

Thirteen years ago, people were talking about the death of skeuomorphism. Apple, Google and other big players were opting for a new approach called flat design that was “cleaner” with no beveled edges, gradients, reflections, etc.

In fact, a new kind of morphism has risen – neumorphism. (“Morphism is a concept found in math, biology and other areas that generally means an abstraction that generalizes a way to map from one object to another.) ┬áSome designers are saying that neumorphism will be an important design trend for the 2020s.

Neumorphism doesn’t try directly to imitate lifelike objects and tools. It combines skeuomorphism and flat design. Those things you see on screen should be lifelike enough to be intuitive, but still be based in the virtual world.┬áVisual clarity is key.

Skeuomorphism has been a useful design concept that fell out of favor. But it isn’t gone. That floppy disc icon is still there. We still open directories by clicking something that looks like a manila folder.

In the 1980s, Steve Jobs at Apple was a fan of computer interfaces that were intuitive to users with skeuomorphic design. But some designers think that though it helped people up the digital learning curve, it’s not needed anymore. At the end of his life, Jobs began to embrace flat designs without those beveled edges, and reflections because they were cleaner and less cluttered.

clock face

Sometimes skeuomorphism comes back when we move something analog to digital. One example is the Apple Watch and the many Fitbit and other smartwatches that are far beyond the digital watch of the last century. I’m not surprised that my 2020 automobile with all its screens, WiFi and connections to my smartphone offers me the option to change those digital numbers to the familiar but old-fashioned circular clock face. (Many watches offer such options too.)

Watches have always been a fashion statement on the higher end and smartwatch makers have also embraced that. They brought in tech designers but also high-end traditional watch designers from companies like Rolex, Tag Heuer, Breitling, Patek Phillipe, etc. knowing that their digital versions would be on the high end of purchases and people would expect fashion as well as function.

A smartwatch does tell the time, but that’s pretty far down on the functions list. This has also become true for smartphones. The ability to make a phone call is not the top use of a smartphone. So, should a designer treat a phone or watch as a phone or watch or as a computer in your pocket or on your wrist?

 

 

 

White Space

logo

The white space between the E and X creates a subtle arrow in this logo.

 

I just finished a new website and reviewing it with the client before launching I was pleased (and surprised) that she said, “I like that there’s a lot of white space.”

White space (sometimes called empty or negative space) is a component of graphic design that is used on a website. White space can lead the eye to what you want your users to see.

In page layout, illustration and sculpture, white space is often referred to as negative space. It is the portion of a page left unmarked: margins, gutters, and space between columns, lines of type, graphics, figures, or objects drawn or depicted.

The term comes from graphic design where printing processes generally use white paper. White space is not “blank” space but an element of design.

The balance between positive (or non-white) and the use of negative spaces is key to aesthetic composition.

The simplest form is margins between text and pictures that act as a buffer between your copy.

A good example of web white space is the Google search home page which uses a wide margin of white space that focuses attention on the search bar. It is still similar to its original design which then was in great contrast to the incredibly busy competing Yahoo! home page.

 

Defining True Creativity Through White Space in Graphic Design