All posts tagged “skeuomorphic”

Skeuomorphic PSD to Flat Design With Skeuomorphism.it

So skeuomorphism is out and flat design is in, which is old news but hey, trends can be real fickle and designers are at the mercy of trying to keep up. If you have skeuomorphic designs that you want to turn flat, here is a tool that is going to be a big help.

Skeuomorphism.it is a free Photoshop extension, by Roy Barber which turns skeuomorphism design to flat design in just a single click. If you find anything skeuomorphic (icon, background or website templates) that you want to turn flat, this is the plugin to get.

Installation

Note that to be able to use this extension, you must at least have Photoshop CS6 installed on your machine. Now let’s head to the Skeuomorphism.it homepage and download the extension first.

Double click the Skeuomorphism.it.zxp file and Adobe Extension Manager will be opened. Accept the license agreement. Before the installation process begin you must first verify the publisher of the extension. Install it and restart your Photoshop if necessary. You’re now ready to use the extension.

Just Takes A Click

We’re going to use this Facebook Icon by Christophe Tauziet for the demo. This is the original icon.

On your Photoshop you should see a new panel in the right. If it doesn’t appear simply head to Window > Extensions > Skeuomorphism.

Click the Work The Magic button and all the shadows, inner shadows, gradients or light will be removed or reduced to make the design flat. Check it out.

Limitations

When you use this extension, not all skeuomorphism design will be transformed flat as you expect it. Sometimes the original color or shape of the design may change. In this Subscribe form from Tempees you will notice that the subscribe button is in blue.

When I tried to turn it flat with the plugin, the subscribe button turned grey. If this doesn’t work for you, Ctrl+Z to revert to the initial state.

Final Thought

I just have to say that the name of this plugin is ironic but it is a real useful time-saver and it makes the transformation almost instantaneous. You don’t have to repeat or do the design process from scratch. All it takes is a click and your designs are flat. How cool is that?


    




hongkiat.com

Flat or Skeuomorphic is the Wrong Question. It’s About Satisfaction.


A great deal of digital ink has been spilled of late regarding the relative merits of Flat Design versus Skeuomorphism. On one side of the spectrum, both Microsoft and Yahoo! are embracing elements of Flat Design while Apple famously incorporates facets of so-called skeuomorphic design across its application portfolio.

I’ve been thinking about this quite a bit recently while working on a new app project for an e-commerce provider. I kicked off the visual design process by mood boarding a spectrum of styles from sites like Pinterest, Dribbble, and Designspiration.

The point of this process is to determine what style appropriately conveys the attitude and personality of the app itself. The intended impacts of each theme are not mutually exclusive—in fact, the Hybrid direction we ultimately recommended deliberately borrows meaningful aspects of each.

Literal:
This theme takes the sense of layering and space a step further, depicting specific physical objects with three-dimensional relationships to their environment. Objects may be rendered with photo-realistic shading and texture effects, implying depth of space and physicality. These effects convey interactivity and evoke a sense of immersion and delight.

Minimalist:
The opposite extreme is the flat design aesthetic, reducing elements to their simplest essence. Space and relationships are defined by blocks of color or negative space, with big target areas for actions. Eliminating embellishment of the UI elements allows the tool to fade into the background. This allows the emphasis and emotional weight to shift to the meaningful, user-driven content.

This got me to thinking about the classic Handbook of Usability Testing, by Rubin and Chisnell in which they describe usability as a combination of:

  • Usefulness
  • Efficiency
  • Effectiveness
  • Learnability
  • Accessibility
  • Satisfaction

As a visual designer, my role extends beyond basic functionality to also address aspects of confidence, perceived value, delight, and emotional engagement: The “Satisfaction” piece of the Usability equation.

The goal of visual design should always be to facilitate usability, which could be qualitatively measured through research (but usually isn’t). Beyond mere functionality though, the presentation layer serves intangible, instinctual, and emotional functions as well. The chosen design style is an aesthetic choice, not a functional choice. It is meant to communicate something deeper about the character of the product. We’re talking art, not science. What is the personality? What does it feel like? What memories or cultural experiences does it evoke?

Consider these two houses. They each perform the same function equally well. They both keep us dry, have a place to watch TV with our loved ones, and let us sleep well at night. I prefer the modern one, while others would be more comfortable in the ugly one. Both are acceptable solutions, but they are undeniably different.

Don’t get me wrong: I am not advocating or defending the popular ‘skeuomorphism’. My point—and one that most dialogue about the issue misses—is that Flat or 3D styles are an aesthetic choice for emotional reasons, not an accessibility choice for functional reasons.

Yes, in some cases a physical real-world metaphor may help novice users grok what the thing is. Apple has long pushed physical simulacrum, from the original Mac desktop, files, and folders, to the infamous ripped notebook pages and leather stitching. The primary intention though is an emotional appeal. As Steve Jobs himself put it in Fortune magazine:

In most people’s vocabularies, design means veneer… to me, nothing could be further from the meaning of design. Design is the fundamental soul of a man-made creation that ends up expressing itself in successive outer layers of the product or service.

People have rightly called them out for illusions that are inappropriate or too literal, and it’s encouraging that a growing portion of the internet-commenting public has become so UI literate that many of these flourishes have become superfluous.

Overdoing it to the point of ridiculousness though doesn’t discredit the concept of visually implying depth, space, or tactile material. These qualities often do enhance usability by creating a sense of order and hierarchy. What is “in front”, which bits are clickable vs read only, what is most important on the screen, etc.

Appropriate use of visual metaphors and dimensional effects can both enhance usability and convey mood and attitude. Sure, the “authentically digital” flat style is en vogue, but extreme reduction by itself doesn’t alleviate usability issues, and may introduce new ones. Categorically abandoning visual cues and the tools of visual language for the sake of authenticity or current trends is dogma, not design. It may suit the particular goals of your application, but it doesn’t necessarily further the ultimate objective of usability.
Some suggested guidelines for deciding if a design style is appropriate:

  • Does it help or hurt usability (Usefulness, Efficiency, Effectiveness, Learnability, Accessibility, or Satisfaction)?
  • Does it highlight or distract from the important content or workflow?
  • Does the style communicate something important about the brand?
  • Will it hold up over time? Will it look dated in a year?
  • Do you have to make exceptions to the metaphor to make it work (i.e., scrolling on paper book pages)?
  • What else in the world shares that style? Does that association say what you intended?

My overall point is that neither Skeuomorphism nor Flat Design is inherently “better” or more usable. It depends entirely on how these styles are used, and if they serve the goals of the work.

It’s a nuanced and subjective question that depends on the intent and the implementation. There is no absolute answer so every design needs to be tested individually to determine how it performs. The user experience is about more than simple usability: it’s about how the user feels about what they are using. Visual design is a powerful tool for guiding that aspect of the experience.

You might also like…

The Flat Design Aesthetic: A Discussion
Flat Design and Accessibility
Examples of ‘Flat’ in Web Design



Speckyboy Design Magazine

Is Apple ditching skeuomorphic design?

Apple updates Podcasts app, ditching skeuomorphism for flat design. Is this the shape of things to come from Cupertino?


Creative Bloq

Skeuo What? An Interactive Infographic about Skeuomorphic Design

We invite you to visit the world where methores rule! Come and see our brand new interactive infographic about Skeuomorphism in web design.
Template Monster Blog

Skeuomorphic vs Digital interfaces and what will 2013 bring us

Skeuomorphic vs Digital interfaces and what will 2013 bring us

We’re well into 2013 already, but now that 2012 is gone, it’s the time to talk about one of the biggest trends in web and user interface design of the past year, and also one of the most loved and hated one, the Skeuomorphic interface. 2012, the year of Skeuomorphic 2012 was specially prolific in […]


Advertise here with BSA

You’re reading Skeuomorphic vs Digital interfaces and what will 2013 bring us, originally posted on Designmodo – Web Design. If you’ve enjoyed this post, be sure to follow on Twitter, Facebook, Google+!


Designmodo

Is using skeuomorphic design ever okay?

iBooks

Skeuomorphism is a dirty word in iOS and OS X app design, but where exactly does it come from, and what makes a skeuomorphic design succeed or fail? Christopher Downer of Realmac Software has laid out what defines skeuomorphism (roughly, it’s a design that retains features of an older object, like an e-reader app that looks like a book), how it’s been used over the years in software, and when it’s appropriate. “Comfort,” Downer says, “can make skeuomorphism a valuable part of an application’s design,” but gimmicky features or ugly textures rightly give the strategy a bad name.

Continue reading…

The Verge – All Posts