I created these test just to play with some gradients on buttons. To speed up the testing I just included the Bootstrap CSS (from Twitter) and start playing with colors.
Although I made buttons a bit less rounder and removed some of the effects, most of the style was still inherited from the Twitter-provided library (which explains the twitter look).
I agree on not following the Twitter-like style. A more simple and clean style (e.g., Android Holo or Windows Phone Metro) probably fits better the idea to emphasize content more than chrome.
The candy-effect, apart from the consequences of using Twitter lib, is probably accentuate by placing all different color versions together. I have modified the example to include a form that allows buttons to be seen more in context. I also included the original twitter shinier gradients in the side-by-side comparison.
I provide the hex values for the gradients I used:
Red: #D95B43, #CC333F
Blue: #3492D1, #107FC9
Orange: #FFA33A, #F07818
Green: #92D634, #7AB317
I like the red one because it provides a balance between attracting the attention and keeping the label readable.
Green is the one I like the less, it needs to be darker and a more subtle gradient (Orange having a similar problem).
Pau
On Thu, Jun 28, 2012 at 8:59 AM, Munaf Assaf
<massaf@wikimedia.org> wrote:
These were based off of Android's Ice Cream Sandwich Palette.
We started there and were tweaking from it, mainly because it was designed with a dark chrome in mind (which is why it's candy-like). In reality, ICS takes a mostly blue-accent approach and only uses those colors sparingly (e.g. never to fill a button).
On Wed, Jun 27, 2012 at 6:47 PM, Brandon Harris
<bharris@wikimedia.org> wrote:
So, commenting on this (I know nothing of its origin, just that it was pasted into the design channel - I've been out-of-pocket):
http://dl.dropbox.com/u/30377416/design/agora-design/index.html
Overall, I think the colors in the "test" palette are too . . . candylike. This could be an artifact of the shadowed text (which I generally think we need to stay away from), but overall it reminds me too much of Twitter.
I can tell you that the global community will not really like it if we go this route.
The red works, the blue is close, the orange seems . . i dunno. I've never really seen orange buttons. But the green is way, way too twitter-like to pass. This needs darkening, I think, or strengthening.
What are the hex values these are based on?
---
Brandon Harris, Senior Designer, Wikimedia Foundation
Support Free Knowledge: http://wikimediafoundation.org/wiki/Donate
_______________________________________________
Design mailing list
Design@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/design
_______________________________________________
Design mailing list
Design@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/design
Pau Giner
Interaction Designer
Wikimedia Foundation