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(a)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(a)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(a)wikimedia.org>wrote;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(a)lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/design
_______________________________________________
Design mailing list
Design(a)lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/design
--
Pau Giner
Interaction Designer
Wikimedia Foundation
--
Pau Giner
Interaction Designer
Wikimedia Foundation