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
These were based off of Android's Ice Cream Sandwich Palette. http://developer.android.com/design/style/color.html
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.orgwrote:
So, commenting on this (I know nothing of its origin, just that itwas 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 ifwe 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
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. http://developer.android.com/design/style/color.html
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.orgwrote:
So, commenting on this (I know nothing of its origin, just that itwas 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 itif 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
I made some changes to adjust orange and green gradients. I also modified light red to make it less orange-like (which found problematic in big gradients).
I have included some images showing the colors and gradients in small and big elements: http://dl.dropbox.com/u/30377416/design/agora-design/index.html
The gradient colors I used are:
Red: #D94343, #CC333F Blue: #3492D1, #107FCF Green: #7DB11D, #71A117 Orange: #F78A16, #F07918
A pending discussion is about button decorations if any: straight corners vs. round corners, hover emphasis, and shadows.
Pau
On Thu, Jun 28, 2012 at 10:57 AM, Pau Giner pginer@wikimedia.org wrote:
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. http://developer.android.com/design/style/color.html
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.orgwrote:
So, commenting on this (I know nothing of its origin, just thatit 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 itif 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