What's with the "flat look" in GUI's of late? (2014) It looks so 1992. First Apple flattened their phones. Then in the new Internet Explorer, you cannot even tell they are buttons. I like dimension and shadows. It gives realism and breaks up the monotony of a flat page. Why devolve? Am I a fogey? How long will this dumb fad last? Get off my 3D lawn! ''Partly, it's a fashion thing. Fashion evolves by changing, and not always for the better. Partly, it's a resource-consumption thing. The shadows and shaded borders of skeumorphic displays requires larger image files and more GPU/CPU horsepower than flat style. On mobile devices, that translates into better battery life and faster response for flat style.'' If that were true, why didn't version 1's have flat instead of waiting until version 6 or so? And why has desktop software copied the flat look? Buttons were shaded in Windows 95, almost 20 years ago. And the iPhone added all kinds of fancy dancy animations since. If battery life or response were their concern, they'd skip the dances. I don't think battery life or speed was the primary trigger of the fad. ''Fashion and function have acted together. Fashion provides encouragement to adopt a flat style that improves battery life. Improved battery life provides encouragement to adopt the flat style fashion. Alone, each wouldn't have been sufficient to change display style. Together, they are sufficient.'' ''Desktop software has implemented flat style because flat style is the current fashion.'' There ways to get computationally cheap shading. Oh well, I'll just learn to live with the wipper-snapper flat look for 5 years until it's replaced by translucent gummy-gel buttons that squirt rainbows and stars when pressed, or whatever the hell is the next fad. Change is JobSecurity. ''There are ways to get computationally cheap shading, but they still involve alpha-blending. Flat style is intended to minimise GPU/CPU usage, including relatively simple stuff like alpha-blending.'' I disagree that alpha-blending is a necessity to generate a button that looks non-flat. True, without such it may not be very pretty or fancy, but at least give the approximate illusion of a 3D button. I'd still prefer bare-bones 3D over flat. Better yet, '''give the user an OS config choice''': 1) Fancy 3D, 2) Basic 3D, 3) Flat. Ship with the default to "flat", fine, but let us change it. ''True, you don't need alpha-blending to create a 3D effect, but you do to create the shading, shadows, and curved edges typical of an "Aero"-style display. Simple 3D was probably rejected as looking too much like Windows 3.0. Style as a configurable choice is fine -- most Linux distros allow it.'' I've seen some really "cheap" ways to do "good enough" 3D buttons that doesn't look like old-school Windows. And you don't need rounded edges. ''That's true. You can achieve a 3D look with nothing more than a grey rectangle with a white 1px border on the top and left edges and a black 1px border on the bottom and right edges. The effect is trivially enhanced by introducing greyish-white upper left and greyish-black lower right 1px borders just inside the outer border.'' http://shark.armchair.mb.ca/~dave/Button.png ''It's computationally cheap -- though it consumes more CPU/GPU cycles than no border at all -- but it looks cheap. Every time I use it, 1994 calls me up and asks me to give back its buttons.'' {Why is this necessary again? Most SmartPhone users weren't even alive in 1992, much less remember what UIs looked like then. Flat screen is flat and should look flat.} Maybe it's like ties and pant-legs: they cycle from wide to thin every 20 years or so, because old is new to newbies. http://img0.etsystatic.com/017/1/7473307/il_340x270.502662496_tf06.jpg http://c2.staticflickr.com/4/3176/3001219254_40dfa7089d.jpg Prediction: iPhone 8 will have paisley buttons. ---- I think it also has to do with the shift from desktop to mobile being the dominant platform. A desktop display is a MagicWindow - you look through it into your DesktopMetaphor, but a phone or tablet is an object among objects. Having a 3d appearance seems weird on these devices... like the edge of the buttons will catch on your pocket. ''I don't think Blackberry users worried about the actual 3D buttons catching on their pockets.'' Or maybe they did.... --------- One of the simplest ways to make a rough 3D appearance is to split the button into 3 ''flat'' rectangular zones: top, middle, and bottom. The top is tinted a lighter version of the middle color and the bottom is tinted a darker version of the middle color. The top and bottom are somewhere between about 3% and 15% of the total height. No rounded corners, no borders, and no graduations are necessary: just 3 flat rectangles stacked on top of each other. -t *----------------* |................| *----------------* |................| |...Press Me.....| |................| *----------------* |................| *----------------* (This AsciiArt example does ''not'' present realistic proportions. Dots to prevent TabMunging.) ''That works for small buttons:'' http://shark.armchair.mb.ca/~dave/TopbuttonSmall.png ''Doesn't work so well for big ones:'' http://shark.armchair.mb.ca/~dave/Topbutton.png Thanks for the examples. Try a ''smaller'' top and button width for large buttons. Also, they stand out better when the background is a different color. Although we cannot expect the background to always be a different color, it can help one see what a typical button would look like, as gray backgrounds are far less common these days. Large buttons may also do better with a thin, dark outer border; although that's more computational overhead. Also, the bottom rectangle may be a bit too dark in the large example. -t ''Ok...'' http://shark.armchair.mb.ca/~dave/TopButton3.png ''Not convinced.'' Still better than pure flat, in my opinion. And buttons that large are relatively rare for "good" designs. (Thanks for the new example.) I lightened the bottom bar for a local test, and I think it looks just fine. It goes to show that one must test different combo's of shades and sizes. ''Link it. Let's see it.'' http://shark.armchair.mb.ca/~dave/TopButton4.png (Based on HTML below) Another one to explore is to skip the top rectangle. However, if the background will vary or be unknown, it's best to keep it to avoid visual border bleed-in. -t ------ Please leave the HTML code here in case somebody wants to copy it and experiment with sizes, colors, etc. I appreciate the conversion to PNG, but it's okay to have both media types for different reasons.
Click Me - Sample | ||