Flat Pixels
sachagreif.com
sachagreif.com
https://farm1.staticflickr.com/16/92028519_6c7f4a6d50.jpg
http://www.migmusic.com/bin/pro52.jpg
Unlike apps for the iPhone, these virtual knobs and sliders don't benefit from a touch screen. No keybindings. No tabbing between them. Just reduced functionality and wasted screen real estate for the sake of looking ``cool'' to people with crappy taste.
For this reason, I've come to despise so-called realism in technology. Even the tried-and-true desktop metaphor seems like an outdated crutch for helping old people understand computers. How does imagining manilla folders help the next generation of computer users understand directory structures when they've seen more computers in their time than file cabinets? It's time to can the metaphors and let computers be computers.
As for folders it's simple. They look like folders today because early folder icons looked like folders and that's what people look for to find them.
an on/off toggle isn't skeuomorph, it's symbolic.
Making an on-screen switch look like a light switch, or a metal toggle switch from an old piece of equipment - that's skeuomorphism.
I strongly disagree; where apps are emulating the sounds of particular pieces of musical hardware (which plugins frequently are) there's a distinct plus in having the same layout as the emulated device.
While there's a lot of value in providing more direct controls in this context (eg envelopes, EQ curves, and so forth), many of these are not ideal for performance (as opposed to composition) because they either constrict the performer by requiring use of a mouse, or provide insufficient tactile feedback because of the limitations of glass. Despite the limitations of abstraction, knobs, sliders, and buttons still work incredibly well for physical performance - hence the popularity of generic MIDI controllers which map to virtual controls in the software plugins.
Now it's also true that one could use physical controls to manage the sort of manipulations that are hard to abstract in hardware while being relatively easy to do in software, such as additive or granular synthesis; and there have been a few applications that combine excellent sonic potential with excellent UX (such as Borderlands Granular [1] or AudioGL [2] but making the most of these requires a good deal of domain knowledge that makes them inaccessible to other musicians.
I eventually (mostly) stopped using software plugins, but not because of dissatisfaction with the UX paradigm; I just went back to using hardware. I like having ~100 physical controls, plus my deck looks like the Enterprise :-)
1. http://www.borderlands-granular.com/app/
2. https://www.audiogl.com/en/ BTW this seems like an ideal excuse for an Oculus Rift.
PS in general I hate skeumorphism and strongly prefer flat design...but I think there's much more justification for it in domains like this, not least because one is often blending a mix of old and new technology in music production; it's not unusual to combine digital aduio manipulation with analog or acoustic sources and treatments.
That looks insane. Trying it when I get home from work.
I completely agree that skeuomorphism and realism are nothing new, but I do think the iPhone gave them a newfound popularity among designers.
iPhone invented the "guess whether OFF = light blue and ON = dark blue, or vice versa", not realistic toggles.
The 1:1 mapping between the hardware and on-screen knobs is a great design decision.
There is nothing wrong with either and both can be over done. The reality is you have to meet somewhere in the middle, and most importantly, you have to do user testing for your specific application. Reading every blog post ever written about skeuomorphism vs flat design isn't going to help you build a more usable product, or a product that sells for that matter.
And for god's sake there's no such thing as "visual realism". The Internet and mobile phone apps are "real". This is what skeuomorphism is: https://en.wikipedia.org/wiki/Skeuomorphism . Anytime anyone feels compelled to define it, don't. Just link to the wikipedia page.
TLDR: Blowhards and drama drama drama.
You don't just design for a medium, you design for a culture. If you don't understand the cultural context of the design elements and terms you're using it's going to show in you work.
In recent months I've come to realise that (excluding so-called 'flat' design) such processes have sublimated and that we have actually converged on a new visual language for communicating a control's affordance.
Let's look at the basic button: we no longer make a button look like a button, per se, so much as we simply add contrast to the control's edges (according to taste), and perhaps overlay a low frequency over the entire control (otherwise known as a 'gradient').
Then, when a user activates the control, we rotate the phase of the control's spatial frequencies through 180º to communicate its state (equivalent to reversing all shadows and flipping the gradient).
I think flat design sucks because it effectively excludes you from using visual frequencies this way - it's a bit like asking someone to record a song, but they have to run everything through an extreme high-pass filter, or a bitcrush, or something (I dunno, someone help me out with this metaphor here).
But you're right that flat design takes away some of these tools. That's why it's important to look at each situation as its own thing.
For example, a big call-to-action button on a homepage cannot be toggled and lives by itself, so making it flat works. On the other hand, making an "on/off" toggle flat can potentially create a lot of ambiguity.
But even then, it's up to the designer to find workarounds and new solutions, such as http://drbl.in/giHY
I like the good old fashioned red and green on your example, but I feel any toggleable control should have two two-axis modes: unpressed/pressed, and on/off (e.g. in Cocoa Touch, UIButton can be highlighted, and/or selected), which is typically difficult to convey with flat shapes and colour alone. If you can do it, awesome.
I've found that people that are uncomfortable with computers have problems with flat design, often because it is harder to for them to find buttons. It seems like a trivial thing to people who are comfortable surfing the web, but for those who are not, it makes for a frustrating experience.
On another note, I found it curious that the author didn't mention Microsoft Bob and the other contemporary "real object" graphical shells.
http://www.salon.com/1999/09/30/quicktime/
"QT4, in contrast, presents a “player” that mimics the appearance of a real-world object — a high-tech Sony Watchman, say."
It became notorious quickly, gaining the attention for example of Bruce Tognazzini[1] and of the Interface Hall of Shame[2]:
[1] http://www.asktog.com/readerMail/1999-06ReaderMail.html
[2] http://web.archive.org/web/19991012163338/http://iarchitect....
Most notoriously, one controlled the volume not with a slider element, but with a rotating dial that appeared to require a circular motion to operate, not an easy feat with a mouse; only with experimentation did one learn that a linear motion also worked.
I think the moral of the story is that everybody's design sucked in 1999…
Microsoft's flat aesthetic dates back to at least Encarta, which was wonderfully designed.
I rather liked the paper-like one, though. Drawing Board or something.
You're not serious are you ? Maybe you should look back to day 1 of the Macintosh:
Trash Can, Files, Folders, Deck Accessories, UI Controls e.g. sliders, buttons and almost every single icon that existed in those days. They all tried to model the real world and were critical in the success of the Macintosh.
http://sachagreif.com/making-flat-pixels/
Basically it was a good exercise in responsive design, and was also a chance for me to try out publishing a book on Amazon.
And since this is just static HTML, it was also nice to write something completely free of the constraints of a blog layout and see how the content shaped the design.
In fact, I'm now thinking I might reuse that layout for my blog itself.
This bit is a good summary. I think flat design on mobile really frees designers up to look into animation and interaction design. Letterpress definitely proves that. It also frees designers up from focusing on detailed effects and stylized UI. Focusing on typography and layout will create much better and more usable applications.
But it's definitely true that if you do decide to go the route of realism, you impose a lot of constraints on your design that will A) take up a lot of your time and effort and B) close the door to a lot of options because they would break realism.
I recently read three books: one on the Kindle iOS app, archive.org's PDF scan of a real book, and finally, a real, printed-on-paper book.
I used to dislike skeuomorphism as exemplified by Apple faux leather. So it came as a surprise when I found I enjoyed the PDF scan much more than the Kindle version. (The paper version came out way on top, because it was an old book much enjoyed by bookworms of human and insect types, and was a pleasure to hold and smell as well as read)
I now appreciate that natural variations and noise inherent in paper and other real-world materials have a calming aesthetic effect, while ultra-Spartan black-on-white is perhaps _too_ antiseptic for comfortable human consumption.
The design tension then, is between
- being true to the medium, in the sense that the design should do its job within the abilities and limitations of the medium, rather than gratuitously imitating and importing look/feel from previous mediums just for the sake of familiarity.
- being human, respecting the human aesthetic sense, honed over millenia of exposure to fractal and noisy nature.
Extreme skeuomorphism results in campy, tacky faux leather. Extreme minimalism results in bland, "inhuman" interfaces. At the golden mean lie things like "noisy" linen backgrounds, subtle shadows, which assuage the human need for variation without imitation of real objects and grandfathering in their functional limitations.
I agree with the author - Google has found its design feet, and they're not bad!
I've experienced interfaces both good and bad that sit at either ends of the spectrum. It's hard to say which is better than the other because in reality most interfaces seem to land somewhere in the middle.
I find the whole debate rather shallow. As designers we should be educating others that a style is the result of a variety of factors such as branding, fashion, originality, time constraints, content, function, hardware, software etc etc.
I've already been asked by clients for "flat design" and it makes me cringe every time.
Mostly I wish Soulver was available on Android or PC...
This lead to the development of several calculator replacements to take advantage of the fact that a desktop has perfectly good keyboards hooked up, can afford to show good history, etc. I wrote one (which is now being maintained and ported to QML by someone else), but the most popular one seemed to be SpeedCrunch (http://code.google.com/p/speedcrunch/) or Qalculate (which KDE's KRunner supports using for inline expression evaluation nowadays, IIRC).
The answer you present is both, but in that case, the question is misleading and prompts a response picking only ONE of the two calculators.
The text under those 2 images seem to be a more accurate question: "Which of these two apps is skeuomorphic?"
That's still not right. This still suggests that only one is skeuomorphic due to use of "is".
Honestly, most people are scared of computers.
People like (eventual) change.
No one wants to be using the same app for 10 years. Or the same UI guidelines for 10 years. So naturally, there's always going to be some direction that people tend to flock towards.
I don't think it's always primarily for the better, although that is usually the goal. It's better and different. I'm sure in the vast open space of design, there are quite a lot of different equally good directions. Most of them just require people growing used to them.
That's why it seems we've made full circle in design. Simple flat colors, sharp lines -> fancy transparent effects -> complex -> back to minimalistic yet functional.
I would say that designers and early adopters like change, people only like improvements. My mom is still using her 10-year-old XP machine and would hate it if it did change just for the sake of change. My Mac running TextMate also looks pretty much the same as my iBook did in 2005. Or look at the public reaction to Windows 7 vs Windows 8, or the way Apple keeps basic designs the same (only geeks can tell an iPad 1 from an iPad 4 on the subway). Apple's only products that are still changed for the sake of change are cheap MP3 players that people buy on a whim.
I think the web is an outlier here...
I'm trying to think of a good example -- I probably catch a plane every 18 months or so, and I'm glad that after a few attempts, I feel I've now masted the process of getting through my local airport. At this point, I'd be annoyed if they made any changes to the process, throwing me back into a position of knowing nothing. If in the long term it made things better I would cope, if it was just a change which might end up going back in another 10 years, I'd get really annoyed.
VIM and Emacs users everywhere disagree ;)
Then Apple started breaking with its own HIG. The Finder was the prime example, once it adopted brushed metal.
The main shift, however, came not with the iPhone but two years earlier: Dashboard widgets were encouraged to have extreme visual richness, independent of whether there was a real world equivalent or not. Take the Weather widget, for instance. Previous to the slight adjustments in iOS6, the Weather app spoke the exact same visual language as the 2005 widget. You even got the grey linen when you flipped widgets to get to their settings.
Of course, iOS devices were the factor with enough impact to proliferate this style into so many designers' visual language, but this distinction in the timeline slightly takes apart the nice logic behind Apple's decision to push this type of design. Mobile devices had less to do with it than Apple's desire to create a wow factor in their UI. The touch target argument doesn't apply to widgets, neither does the "device becomes the software" point, and of course Apple was completely fine with having 100% inconsistent, heavily colored, heavily textured interfaces be on screen side-by-side, since that was the whole point of putting these widgets together on a Dashboard: they all came and went at once.
Now, I am actually not saying this to criticize the style. In my opinion, it showed guts, curiosity, and showmanship. And it worked. Nor do I want to attack the article - lots of great points in there. However, I thought it would be interesting to underline the typical Apple manner in which this stuff came to be.
(Of course, if anyone really wanted to stick to their guns, they could point out that Cupertino was already working on the iPhone at the time Dashboard came around. Maybe they were just giving the style a test run with full knowledge of its role in their future. The timelines only overlap sparsely from all we can tell, but it's possible. Still. That doesn't invalidate the wow-focus its implementation in Dashboard implies.)
The bare concept of a buttons, mouse pointers and icons are all analogous to physical objects, which makes sense from a usability perspective since people mostly relate to new things metaphorically.
The idea of shaded and highlighted buttons on a leather textured surface, however, makes no particular sense from a material or metaphorical perspective. I recognize it as an aesthetic choice more than anything, and an ugly one to boot.
That being said, I'm a strong believer of "you want a design? Code it"
It's not enough being able to sling it on photoshop, you have to learn the code to make it happen.