5 ms·
Nowadays, I tend to avoid gradients because it's so easy to mess it up. It's not only about choosing 2 colors, it's about eveything that happens in between. Put
by bbx 14y ago
Nowadays, I tend to avoid gradients because it's so easy to mess it up. It's not only about choosing 2 colors, it's about eveything that happens in between. Putting some text on top of it requires to be readable on both colors, and everything in between.
Buttons can have depth without gradients. Check the ones on http://www.facebook.com http://www.facebook.com. A flat background color, a subtle 1px light on top, a subtle 1px shadow on the bottom, and a darker border all around.
Depth is not only achieved through "3D" gradients and shadows. It is achieved in flat design through size, color, spacing. It's hierarchy by balance.
It's like a well-balanced music mix: if it sounds good on average level, it'll even sound better on loud level. Flat design is balance before the lighting tweaks.
- UnFleshedOne 14y ago"A flat background color, a subtle 1px light on top, a subtle 1px shadow on the bottom, and a darker border all around." This is exactly how Windows 3.1 was drawing its UI. :) (not that there is anything wrong with that)
- rahoulb 14y agoOT but I have a theory that the 3d button (which "depressed" when you clicked it) is the entire reason behind Windows 3's success. I can't remember if System 7 predates it but certainly the 3d effect on its buttons were less pronounced, and GEM was entirely flat.
- iclelland 14y agoNo, this is completely different. Modern. Revolutionary. Facebook lighting is directly overhead; Windows 3.1 was off to the left a bit :)
- njharman 14y agoI don't see any buttons on facebooks page. Just links, some with hover color changes. Are those the "buttons" you speak of?
- tiddchristopher 14y agoI think you're looking at the wrong page. If you go to facebook.com while logged out, the "Log In" and "Sign Up" buttons use the technique described by the above poster.