Is Flat Design Already Passé?

MAYBE IT’S TIME TO GIVE SKEUOMORPHISM ANOTHER TRY?

Over the last few years, we’ve seen an upheaval in the way computer interfaces are designed. Skeuomorphism is out, and flat is in. But have we gone too far? Perhaps we’ve taken the skeuomorphic death hunts as far as they can go, and it’s high time we usher in a new era of post-flat digital design.

Ever since the original Macintosh redefined the way we interact with computers by creating a virtual desktop, computer interfaces have largely been skeuomorphic by mimicking the look of real-world objects. In the beginning, computer displays were limited in resolution and color, so the goal was to make computer interfaces look as realistic as possible. And since most computer users weren’t experienced yet, skeuomorphism became a valuable tool to help people understand digital interfaces.

But skeuomorphism didn’t make sense once photo-realistic computer displays became ubiquitous. Computers have no problem tricking us into thinking that we’re looking at something real so we don’t need to use tacky design tricks like fake stitching or Corinthian leather to fool us into thinking our displays are better than they are. In addition, most people have grown up in a world where digital interfaces are common. UI elements don’t haveto look like real world objects anymore for people to understand them.

This is why Jony Ive took over the design of Apple’s iOS and OS X operating systems and began a relentless purge of the numerous skeuomorphic design elements that his predecessor, skeuomaniac Scott Forstall, created. To quote our own John Pavlus, “skeuomorphism is a solution to a problem that iOS no longer has”… and that’s true of other operating systems and apps too. Google, Microsoft, Twitter, Facebook, Dropbox, even Samsung, they’re all embracing flat design, throwing out the textures and gradients that once defined their products, in favor of solid hues and typography-driven design.

This is, without a doubt, a good thing. Skeuomorphism led to some exceedingly one-dimensional designs, such as iOS 6’s execrable billiard-style Game Center design. But in an excellent post, Collective Ray designerWells Riley argues that things are going too far.

Flat design is essentially as far away from skeuomorphism as you can get. Compare iOS 7’s bold colors, unadorned icons, transparent overlays and typography-based design to its immediate precessor, iOS 6. Where once every app on iOS had fake reflections, quasi-realistic textures, drop shadows, and pseudo-3-D elements, iOS 7 uses pure colors, no gradients, no shadows, and embraces the 2-D nature of a modern smartphone display. But while flat design has made iOS 7 look remarkably consistent, it has also removed a lot of personality from the operating system. It’s like the Gropius house, when the old iOS 6 was a circus funhouse. Maybe it needs to get a little bit of that sense of madness back.

Here’s how Riley defines elements of a post-flat interface:

• Hierarchy defined using size and composition along with color.

• Affordant buttons, forms, and interactive elements.

• Skeuomorphs to represent 1:1 analogs to real-life objects (the curl of an e-book page, for example) in the name of user delight.

• Strong emphasis on content, not ornamentation.

• Beautiful, readable typography.

Riley’s argument is that flat design has allowed digital designers to brush the slate clean in terms of how they approach their work, but it has also hindered a sense of wonder and whimsy. Software should still strongly emphasizes content, color, and typography over ornamentation, but why is, say, the curl of a page when you’re reading an e-book such a crime, when it so clearly gives users delight?

“Without strict visual requirements associated with flat design, post flat offers designers tons of variety to explore new aesthetics—informed by the best qualities of skeuomorphic and flat design.” Riley writes. Dust off your drop shadows and gradients, and introduce them to your flat color buttons and icons. Do your absolute best work without feeling restricted to a single aesthetic. Bring variety, creativity, and delight back to your interfaces.”

Maybe Riley has a point. Why should mad ol’ Scott Forstall be allowed to ruin skeuomorphism for everyone? With the lightest of brush strokes, skeuomorphism can be used to bring back a sense of personality and joy to our apps. For those of us growing listless in the wake of countless nearly identical “flat” app designs, he makes a good point. It is time for the pendulum towards flat and away from skeuomorphism to swing back, if only a little bit.

via fastcodesign.com

Advertisement

The Power of Smart Data

A Sailthru criou um site com algumas estatísticas de 2012 e comunica-as de uma forma muito criativa. Recomendo vivamente navegar pelo site que está muito bem feito.

Principles of Flat Design

Flat design – the design community just can’t stop talking about it.

And feelings are strong. Most designers either can’t get enough of this trend, or absolutely hate it.

I am somewhere in the middle. Good design is about creating something useful that works. If the answer is designed in the fashion of flatness, so be it. But the trend may not work for all projects, so it should not be forced.

So let’s examine what makes something flat. There are five pretty distinct characteristics. Here’s a look at each, plus an introduction to “almost” flat design.

No Added Effects

Flat design gets its name from the shapes used. Flat design employs a distinct two-dimensional style that is simply flat.

The concept works without embellishment – drop shadows, bevels, embossing, gradients or other tools that add depth. Every element or box, from image frames to buttons to navigational tools, is crisp and lacks feathered edges or shadows.

Nothing is added to make elements look more realistic, such as tricks designed to make items appear 3D in skeuomorphic design projects. Layers used in flat design mirror those in other projects, but the planes do not intersect leaving a distinct background image, foreground images or buttons, text and navigation.

So what makes it work? Flat design has a distinct look and feel without all the extras. It relies on a clear sense of hierarchy in the design and placement of elements to make successful projects easy for users to understand and interact with. While more and more websites are using flat design principles, it is maybe even more popular for app and mobile design. With small screens, there are fewer buttons and options, making a flat interface fairly easy to use.

Simple Elements

Flat design uses many simple user interface elements, such as buttons and icons. Designers often stick to simple shapes, such as rectangles, circles or squares and allow each shape to stand alone. Shape edges can be perfectly angular and square or include curvature.

Each UI element should be simple and easy to click or tap. Interaction should be intuitive for users without a lot of in-design explanation.

In addition to simple styling, go bold with color on clickable buttons to encourage use. But don’t confuse simple elements with simple design, flat design concepts can be just as complex as any other type of design scheme.

Need help getting started? Designmodo offers a variety of UI kits using flat styles – from the Square UI Free and Flat UI Free, a simple PSD/HTML UI kit with basic components, to Square UI and Flat UI Pro, a complete PSD/HTML UI pack for website and app design projects.

Focus on Typography

Because of the simple nature of element in flat design, typography is extremely important.

The tone of typefaces should match the overall design scheme – a highly embellished font might look odd against a super-simple design. Type should also be bold and worded simply and efficiently, in an effort for the final product to have a consistent tone visually and textually.

Consider a simple sans serif type family with plenty of variations and weights for the primary typography on a site using flat design. Add a touch of the unexpected with one novelty font as an art element, but be careful not to go overboard with use of the specialty typeface.

Type should also tell users how to use the design. Label buttons and other elements for increased ease of use and interactivity.

Focus on Color

Color is a large part of flat design. Flat design color palettes are often much brighter and more colorful than those for other sites.

Color palettes for flat design projects often contain many more hues as well. While most color palettes focus on two or three colors at most, flat design palettes may use six to eight colors equally.

The hues tend to be vibrant – think about the purest colors from the color wheel – without tints or tones. Primary and secondary colors are popular. In addition certain types of colors are also used frequently; in this iteration of the flat design trend, retro colors – including salmon, purple, green and blue – are especially popular.

Minimalist Approach

Flat design is simple by nature and works well with an overall minimalist design approach.

Avoid too many bells and whistles in the overall site design. Simple color and text may be enough. If you want to add visuals, opt for simple photography.

Some retail sites, such as Svpply (above), using flat design have done a good job placing items on a simple background to do this. (It should be noted that the photos do have some natural depth but still fit into the overall flatness of the design.)

“Almost” Flat Design

A style more designers tend to agree on is “almost” flat design.

In almost flat design, the basic theme of the flat style is used but some effects are added to the design scheme. Buttons, for example, may contain slight gradients or drop shadows. Designers typically pick one effect and use it exclusively in an almost flat project.

This style allows for a little more flexibility than some of the rigidness of the no effects thought behind flat design.

Designers like it because of the added depth and texture. Users like it because the style is a little less sharp and can help guide proper interaction. On the flip side, designers don’t like it because it marries two styles in a way that can lack definition of a true style.

via designmodo