Group items tagged

Filter: All | Bookmarks | Topics Simple Middle

Flat Pixels: The Battle Between Flat Design And Skeuomorphism - 0 views

sachagreif.com/flat-pixels

Design Web Design Flat Design Skeuomorphism Skeuominimalism Minimalism

shared by Pedro Gonçalves on 07 May 13 - No Cached

Defining Skeuomorphism This obscure word describes the way designs often borrow a particular feature from the past, even when the functional need for it is gone. Examples include pre-recorded shutter noises on smartphones to remind us of film cameras, or calendar apps that feature torn paper and metal rings. Or, as Wikipedia tells us [1]: A skeuomorph is a physical ornament or design on an object copied from a form of the object when made from another material or by other techniques.
...

Cancel
the digital world has seen skeuomorphism popularized in the past couple years mainly thanks to the recent iOS-inspired trend of rich textures and life-like controls.
...

Cancel
By opposition, the other side of the coin would be the newly popular "flat style", of which Microsoft's Metro UI is probably the main example. Flat Style embraces visual minimalism, eschewing textures and lighting effects for simple shapes and flat colors.
...

Cancel
...23 more annotations...
this trend is not always about skeuomorphism – which implies a connection to a past incarnation of a similar design – but rather often about realism [2]: a purely visual style that tries to imitate real-world materials and textures, exemplified by Apple's tacky over-use of leather textures in some of their own apps.
...

Cancel
skeuomorphic designs tend to look realistic (to make the connection with the original object clear), and realistic designs tend to be skeuomorphic (otherwise the realism would look out of place).
...

Cancel
touch target couldn't be smaller than a certain size (Apple's Human Interface Guidelines recommend at least 44 by 44 pixels).
...

Cancel
showing less on the screen, but doing more with it.
...

Cancel
realism done wrong can morph into kitsch
...

Cancel
the problem of getting skeuomorphism wrong: making something look like a physical object, but not work like it
...

Cancel
That problem is that when borrowing elements from a design's previous incarnation, you often also bring its limitations along for the ride, even when these limitations have no reason to exist anymore
...

Cancel
When done right, skeuomorphism and realism will trigger strong associations with real-world counterparts. This is both a strength and a weakness: sometimes, the association can be so strong that it will stop you from improving on what's already been done.
...

Cancel
Gone were the shadows, highlights, gradients, and textures of iOS apps. Instead, Metro offered flat squares of color with big typography.
...

Cancel
Microsoft's new design philosophy certainly seemed to strike a chord within the tech sphere, with many praising Metro's strong focus on typography and colors.
...

Cancel
And while flat design is often purely visual, it does resonate with designer's love of minimalist concepts, embodied by the famous Antoine de Saint-Exupery that “perfection is achieved not when there is nothing left to add, but when there is nothing left to take away”.
...

Cancel
Two of the most talked-about games in recent month, Letterpress and Hundreds both feature flat designs. In fact, Letterpress creator Loren Brichter even revealed that the whole game only uses a single image!
...

Cancel
When you have a high-definition display and screen-optimized fonts, you quickly realize you don't need much else to create beautiful work.
...

Cancel
is pushing many designers towards prototyping in the browser directly, foregoing static mockups entirely.
...

Cancel
Add all this together and you begin to see why many designers are moving away from texture-heavy realism towards the more flexible and lighter-weight flat style.
...

Cancel
keep in mind that the needs of users should always come before our aesthetic pursuits
...

Cancel
visual style is nothing more than a means to an end [15]. If the situation calls for realism, go nuts on textures and highlights. On the other hand, if a flat aesthetic achieves the design's goal better then it might be time to go on a gradient diet.
...

Cancel
With the recent releases of their newer mobile apps, Google has started pushing a style that some describe as "almost flat" [18], or maybe "skeuominimalism" [19]. Unlike the drastic visual wastelands of Gmail or Google Reader, this new style uses elements like shadows and gradients in a tasteful, subtle way. This style offers the best of both world: realism's affordances and subtle hints combined with the purity and simplicity off flat design.
...

Cancel
another way to look at it is that it's simply design done right: seeking efficiency and simplicity without sacrificing usability to the altar of minimalism.
...

Cancel
I will pick a camp and put my chips in with flat design (specifically, Google's less-extreme variety).
...

Cancel
Google is not so much pioneering a new style as showing us what digital design looks like when it's done right
...

Cancel
catch up with what the web has to offer, we'll have to get our hands dirty and start coding [21]. And when you're both designing and coding a layout, you start to appreciate the value of keeping things lightweight.
...

Cancel
Flat design also forces you to really care about typography and layout, two areas where web design has traditionally lagged behind its more established print cousin.
...

Cancel