During the shift toward “flat design” in user interface over the last several years, controls with dimensional effects got kicked to the curb. Some people said that gradients and dropshadow effects are inappropriate for screen interfaces, while others claimed that the use of effects in bitmaps are too “expensive” — that they consume too much memory and/or take longer to download. “Down with skeuomorphism!” they chanted. Suddenly a term nobody ever used was being bandied about even more than the cliché “Think outside the box.”
Several years in now, with most everything looking flat these days, is it possible that flat has gone too far? Have user interfaces become soulless blocks of solid color with no visual affordances to guide users? At least one big player in the tech industry thinks so. Google’s Material Design approach to user interface seems to acknowledge that flat design has become too severe, and thus it incorporates dropshadow effects, albeit subtly.
So in the the words of Justin Timberlake, maybe it’s time to bring a little sexy back to user interface.
As a small protest against the Flat Movement, I created a set of simple “fancy” buttons that include bevels [gasp!], shading [groan!], and yes, even subtle dropshadows [the horror!]. You can view the button stack in LiveCode by copying the following line and executing it in your LiveCode message box:
Not only are these controls light weight, but they’re scalable, so you don’t need to have multiple versions for different resolutions. Each button is built as a group of graphic objects, and includes the following properties for you to customize:
– buttonHilite (boolean)
– buttonAutoHilite (boolean)
– buttonColor (RGB triplet)
– buttonRadius (integer)
– buttonLabel (string)
– labelSize (integer)
– showLabel (boolean)
For best results, the buttons should be used on top of a colored background that’s similar to the buttons’ color. The color slider in the stack takes care of this for you, creating a matched set of buttons and background graphic.
And keep in mind that you reference these buttons in scripts as “controls” or “groups”, for example:
set the buttonHilite of control "myFancyButton" to true
Using buttons like these in your stacks, you too can fight back against flat.