Skeuomorphism

The notion of flat, “digitally authentic” design has lately been a popular topic of conversation and controversy, especially with the software design efforts of Apple, Microsoft, and their respective flagship operating systems. Subtle colors, light typography and the other commonalities of modern flat design are components of the design trends many are coming to love (or hate).

Safari icon, before and after

Safari’s current icon on the left versus its flat version. The latter foregoes lighting effects, bevels and other details to create an attractive flat alternative while still retaining the compass metaphor.

While many specifics of the constituent theories that form the concept of flat, digitally authentic design, this design form has evolved as a move away from skeuomorphic, metaphorical design.

Skeuomorphism is the term one applies to a trend where elements of a graphical user interface mimic a physical object. For example, a skeuomorphic note-taking app may resemble a lined yellow legal pad. Skeuomorphism exists in many different industries but in the context of web and software design, designers know skeuomorphism primarily as the technique of using metaphors to induce familiarity.

Many examples of flat design exist. In this post the efforts of Microsoft and Apple wll be examined, due to their collective wide reach. Also, each of these companies are likely candidates to establish significant style guidelines that designers can investigate in order to emulate their interpretation of flat design.

Microsoft
Microsoft opted for one of the most radical and controversial redesigns of recent times with Windows 8. Its creation of the design language formerly known as Metro (now known as the Microsoft Design Language, but with the former term often colloquially applied) was first seen in widespread use with Windows Phone (and also in Zune, the platform’s inaugural design). It was Windows 8’s 2012 release that shined a light on the flat design trend.

Windows 8’s start screen breaks away from its former desktop design, being composed of flat, colorful live tiles, instead of icons. The tiles are not merely a stylistic choice: They allow useful information to be displayed on the start screen in the manner of a dashboard.

Apple
While Microsoft and others were making major changes to their design languages, Apple stuck by its skeuomorphic principles through multiple generations of its operating system. That changed with the announcement of iOS 7, taking a drastically different step in the design of the OS. Icons are flatter, typography is lighter and the metaphors are out.

iOS calculator app, before and after

Image courtesy of Smashing Magazine

This is particularly evident with iOS when you compare the current iteration of, say, the calculator app to its iOS 7 counterpart. That particular app has jumped from trying to resemble a physical device with buttons signified by gradient backgrounds to a completely flat design independent of any unnecessary metaphors.

The flat interface style is more than a trend. It is the manifestation of a desire for greater authenticity in design, a desire to curb visual excess and eliminate the fake and the superfluous.

This article excerpted courtesy Connor Turnbull, tutsplus

Urban Outfitters’ new “branding”

Urban Outfitters websiteHot on the heels of the Gap’s infamous lazy logo redesign (since withdrawn) comes another epic fail, Urban Outfitters. Usually reliable for being ahead of trends in clothing design, merchandising and communication, the apparel giant unveiled a clunky new look for its logo and website. The logo is a masterpiece of asymmetry and plainness, while the website’s sidebar navigation willfully mixes extended and condensed typefaces. Many critics have cited the logo’s similarity with Word Art examples found inside Microsoft’s Office suite, enabling amateurs everywhere to curve and bend type to create their own corporate logotype.

I would bet that by year’s end there will be an “emergency” logo design revamp, because this dog won’t hunt!

UPDATE
Since this was posted, UO has changed to a similarly bizarre branding scheme—at least for its website. This time round, clearly the same retail marketing team are conjuring 1991 with all its dots and squiggles. What do you think? Leave a comment below…
—Scott

Urban Outfitters 2013 home page

5 terrible typefaces

There are various reasons for qualifying a typeface as terrible for use in professional design. Some are overused, illegible, ugly, excessively cute, or a combination thereof. The following are the five worst, painstakingly ranked (and sure to be avoided) by yours truly.

Courier
A monospaced slab-serifed typeface designed in 1955 and originally intended for electric typewriters, whenever I see Courier used in print, I imagine the designer or printer failed to provide the proper font and Courier was its replacement by default. Handy only for computer coders who need columns of aligned text.

Monotype Corsiva
The de facto choice when a lazy designer/printer wishes to add some “elegance” to a business card or invitation. Illegible and clunky. Must resist.

Brush Script
Designed in 1942 and it looks it. Illegible. Vulgar. For added fun, try using it in all caps.

Papyrus
Since the 1990s, Papyrus has been made available to just about every computer in the world. And its use has exploded. I am sure poor Papyrus designer Chris Costello never intended text to be set at 12 point size! Film director James Cameron damned the torpedoes by famously using a variation of the typeface for his Avatar movie poster. Unfortunate.

Comic Sans
The “best worst” typeface ever, and a product of Microsoft. This casual and “cute” typeface designed by Vincent Connare in 1995 is the ultimate in amateurishness. There is even a movement to ban Comic Sans. Avoid using it, even if designing a comic!

Runners up were Curlz MT, Lazybones, Times New Roman, and Arial. Did I leave out your favorite? Leave a comment and let me know why.