decide on color palette

[gratipay]

decide on color palette

[thefoxis]

Okay, I looked through the old conversation. The current decision is quite bright and intense, I'd say. I mean, we want bright, cheerful, happy colors to portray our values, but the intense, chocolate brown, grass green feels slightly awkward to me in contrast with the rest of the pallette.

It's all just too intense. Moreover we need some hues (for hover, active states, dividers, boxes, etc.) and colors for the copy itself. I've based of the palette attached in the previous issue.

If it feels to flat design-ish I can adjust. I wanted to be on the warmer side of the spectrum though. Let me know @mtrythall @whit537 :)

[thefoxis]

Also, semi-related, what was the reasoning behind using brown for the heart logotype? For me it's kind of weird. I think that if I could I'd change it to some hue of red/pink.

[chadwhitacre]

It's brown because it's a coin. :-)

The original palette was more muted (#614C3E and #2A8F79; reflected in this year-old blog post):

 

It changed to its current intensified state (#663300 and #339966) on gratipay/gratipay.com#1195 :

 

[chadwhitacre]

I think it's worthwhile to keep the association of the heart coin logo with the analog (penny) version, though perhaps we could find a brown that was less chocolate and more copper. Beyond that, I don't think we need to feel too constrained by the conversation on gratipay/gratipay.com#1195.

Also, in the spirit of brainstorming, I'll repost this (from here):

[chadwhitacre]

Values: abundance, generosity, gratitude.

[chadwhitacre]

Expansiveness.

[thefoxis]

I'm not sure about this screenshot you've pasted, seems very confusing and lacks visual hierarchy to me (color-wise).

Are you suggesting that we should stick with the green, adjust the brown to be more gold-ish and then maybe pick one more color (despite body copy)?

What do you think about the thing I did?

[chadwhitacre]

@thefoxis My point with that screenshot is that, in the past, I considered using different colors besides brown for the heart. My thought at the time was maybe to use different colors for different parts of the site. That's not obvious from that shot since it just shows the homepage, and I was still considering some sort of coin-ish "brown" to be the canonical color for the heart coin.

P.S. The other thing I was toying with there (which is out of scope on a ticket about colors) was repeating the heart coin to evoke abundance, etc. I've thought at other times about showing a stream of them going into a tipjar or something.

[chadwhitacre]

Re: #16 (comment), it depends: is the red-orange/yellow going to predominate, or the brown/green? I tend towards the cool colors, to be honest. Gittip is about generosity and love and warm fuzzies, yes. It's also very much about patience and steadiness and long-term thinking. Relaxing in the confident knowledge of a secure funding stream, and a steadily improving society.

I think of Avaaz as our foil here. Avaaz is all about Now! Now! Now! Urgency! Call to action! Panic! Frenzy! Even moreso than Kickstarter or Indiegogo.

Someone pointed out that the current "hero" (not sure why it's called that in our CSS [here's why—ed.]) background on
Gittip evokes the watermark on a check:

I think we could be a little less drab, but there's something to this. I don't want to overwhelm, to assault. I want people to feel comfortable and safe with us, and then to discover this burning inner fire. We're doing something genuinely interesting, there's no need to be brash or showy about it.

Another angle: is our gestalt "bank"? Or "social network"? I think 60% bank, 40% social network. People are trusting us a lot with payment info and their livelihood. We need to communicate stability, with a heart of gold.

Is that helpful at all? :-(

[chadwhitacre]

I guess I'm having a hard time judging the color chips apart from their use in context. Too early for some sketches?

[patcon]

@thefoxis I really like the color swatch! I'm not particularly a fan of the current color scheme tbh. Fwiw, I never realized the significance of the brown logo

EDIT: To clarify, I'm not sure I understand the emotion of the current colors the way you do @whit537, so I'm not sure I understand them to be as important as you do. But maybe I'm inclined to just say "yes!" so you can get working @thefoxis :)

[thefoxis]

@whit537 your comments are useful :) I think taking into account your 60% bank/40% social network comparison it's good to think about Bank Simple as an example. It gained so much traction because they have a really good website and UI. They still have some visual connection to money (hues of green) but it's way clearer.

Another example to look at would be Stripe, which also somewhat keeps the green (iconography), but mostly focuses on clarity (similarly to Apple).

What that teaches us that color scheme can be somewhat secondary, and it's clarity, white space, good, concise copy that makes it so compelling and trustworthy.

I know it's hard to picture without a preview, so I'll throw a quick preview today.

[zwn]

👍 This is a great discussion.

[thefoxis]

Honestly I'd somewhat move away from making the brown a main color, it's really heavy and makes the design quite "dark" and gloomy, see below:

I did it kind of for kicks, with Whitney, not Ideal to show how it would look with something very near the current palette. Green also seems somewhat overwhelming. We need something more cheerful.

I'd eventually stay with green but move away from brown.

[chadwhitacre]

@thefoxis I'm seeing a predominantly cool palette on Stripe. The brightest things on their site are the Dribbble logo and the Union Jack. :-)

[chadwhitacre]

@thefoxis Simple's site is mostly white and grey-ish. The video preview image is cool and muted. The CTA button is warm and muted:

The muted blue of the icons and orange of the CTA echo their logo:

[chadwhitacre]

Okay! I made a playground over at https://github.com/gittip/redesign-playground to be able to iterate on design ideas in code instead of photoshop/sketch. Go check it out and see if it's useful! :-) I started with an implementation of @thefoxis' sketch from above.

Here's a screenshot of her screenshot, to get the ball rolling:

[chadwhitacre]

And here's a screenshot of an implementation of the same in code:

You can run it yourself—and fork it!—from here:

https://github.com/gittip/redesign-playground/tree/012245eaa93f37f975c596d93b0049a603dbd582

[thefoxis]

@whit537 I did it only for picturing purposes, didn't treat that as actual redesign, so dunno if you want to be doing coding on this.

Although it certainly incorporates some things that I'd like to see improved (navigation, CTAs, etc.) :)

[chadwhitacre]

@thefoxis Understood. I think code is going to be easier to collaborate on than Photoshop/Sketch files. My hope is that this playground repo can help us quickly get a number of design variations in front of us to inform our conversation. Do you think this will work? Can you try standing up the playground repo?

Also, buying desktop font licenses from HF&J gets pricey quickly: for Ideal Sans ScreenSmart Pro we're looking at $299 for one license, and $69 for each license after that. Since we're an open company we need to be able to have people dip in and out of working on Gittip, so HF&J's desktop licensing model doesn't really work for us. Does Gittip buy the fonts? How many do we buy? Who gets to install them? How do we ensure that someone uninstalls them when they drift away from Gittip? Or do each of us individually buy the fonts (using part of our take from the Gittip team, presumably)? That's dumb, to spend $299 each. And that's just for one font!

I added Whitney to our Typography.com account. We get five free web fonts to start with, so adding Whitney didn't cost anything, and we have three slots left. Are there other H&FJ fonts we want to explore?

[chadwhitacre]

Whitney:

Ideal Sans:

[chadwhitacre]

Here's the muted brown and green that we used to have (note that I swapped "Receive" and "Give" as well):

[chadwhitacre]

Here's a variant with a texture and solid buttons. The gold here is from #16 (comment).

https://github.com/gittip/redesign-playground/tree/a5ba2e930af085c12ad1193b78da5f22ceac164e

[chadwhitacre]

Here's a variation of the wording for the pitch:

[chadwhitacre]

Inverted. I like the way the white ties together "Give ..." and "I want to give."

[chadwhitacre]

Gold background.

[chadwhitacre]

I think the brown background is the strongest of that batch, because it has only three colors. The four-color variants feel cluttered to me by comparison. The gold background has three colors but isn't as strong, and can't be because, while both white and gold work on brown, white on gold doesn't.

[chadwhitacre]

Three-color variants using brown and green, texture and no texture:

[chadwhitacre]

Here's with the red and black from above:

[chadwhitacre]

What are our distinctions/hierarchies?

1. Giver / Receiver
2. Individual / Group (team, company, organization, ...)
3. Communities / Profiles / Accounts Elsewhere

The variants above are using color to encode (1). (2) is subordinate: both Individuals and Groups fall under Profiles. What about using color to encode (3)?

[chadwhitacre]

(3) is the firmest distinction on Gittip.

• Giver / Receiver and Individual / Group are properties of a Profile.
• Profiles (Users? Participants?) belong to Communities.
• Accounts Elsewhere are Participants who simply haven't joined yet.

[chadwhitacre]

Can we use the muted brown/green as a base, and then associate the more cheerful colors with Members (Participants, Profiles, Users) and Communities?

[chadwhitacre]

[chadwhitacre]

One giver and one receiver in the spotlight on the homepage. Weighted random rotation.

https://github.com/gittip/redesign-playground/tree/f3fc86b69cd9d147554836a7d49beb40b7b15c49

[chadwhitacre]

https://github.com/gittip/redesign-playground/tree/23a98e20e396ff6e4407f4ce81980e3ebad1cff1

[chadwhitacre]

Waddya think, @thefoxis, et al.? Could something along these lines work? My thinking with that last screenshot is:

• Base color scheme is brown/green (original muted) on white. Used for about/help pages, blog, stats/charts, etc.—meta information about Gittip as a whole.
• Members color scheme is gold/white on brown. Used for Profile Member pages, probably including Accounts Elsewhere. As mentioned, Profiles Member encompasses both givers and receivers, individuals and groups, teams and non-teams.
• Communities color scheme is red/brown on pink. Used for Community pages.

What's your take on the "cheeriness" of this, @thefoxis? Somehow I ended up making the muted brown the one color that runs through the whole thing. Do you think it could work as a unifying element? Or do you still see it dragging us down into "dark / gloomy / heavy" territory?

[chadwhitacre]

Contrasts, per http://webaim.org/resources/contrastchecker/ (low to high):

• red on pink: 3.3:1
• green on white: 4:1
• gold on brown: 5:1
• brown on pink: 5.6:1
• brown on white: 8:1
• white on brown: 8:1
• black on white: 21:1 (for reference)

Basically:

• Anything at or below 3:1 is a non-starter.
• Between 3:1 and 4.5:1 is iffy (definitely shouldn't be used for body copy).
• Anything at or above 4.5:1 is okay.
• Anything at or above 7:1 is great.

[chadwhitacre]

Dribbbled.

[chadwhitacre]

@thefoxis I'm getting the impression that you're a fan of Stripe. ;-)

https://news.layervault.com/stories/16753-site-design-stripe-checkout

... which is appropriate, because they're doing fantastic work. Definitely a product I look up to.

[thefoxis]

In terms of the comp, I made it in 30mins, just to picture where we should going. That wasn't even real design work in my sense :) Hence, the similarities to Stripe, which indeed is great in terms of design.

I'm kind of not sure where we are at currently, seems like you're discovering the design by yourself and there will be only front-end phase?

[chadwhitacre]

I'm kind of not sure where we are at currently, seems like you're discovering the design by yourself and there will be only front-end phase?

@thefoxis Damn. I was afraid of that. :-(

[chadwhitacre]

I was trying to mess around with colors. Everything else (layout, etc.) is still up in the air as far as I'm concerned. I jumped to markup because fonts are expensive and ... and ... I guess because I'm personally more comfortable in code than in Photoshop/Sketch? :-(

[chadwhitacre]

Also, colors are still very much undecided, as far as I'm concerned. I was trying to explore. I'm fully expecting to throw away the markup/css I've written, it was just for exploration. I wanted to get ideas out here so we have more material for our discussion.

[chadwhitacre]

@thefoxis I just bought a desktop license for Ideal Sans and mailed you the ZIP. Does that free you up to join in the spirit of exploration here? :-)

[chadwhitacre]

Or should we use LayerVault for this instead of posting screenshots on this ticket?

[chadwhitacre]

Or am I off-base in thinking that we should be tossing a bunch of stuff against the wall at this stage?

[chadwhitacre]

I'm kind of not sure where we are at currently

MOAR IDEAS!!!!!!!!!!!!! :-)

Critique what I did color-wise and otherwise, and post some screenshots of other directions.

[chadwhitacre]

One thing that emerged for me yesterday was the idea of calling our users "Members" (cf. Pinterest / Pinners). We've sort of called Gittip users "Participants." Members could work better because it fits better in the distinction, Members and Communities, and it also emerged for me yesterday that this distinction is the most solid distinction we have on Gittip: Member and Community. Gittip is made up of Members and Communities.

Givers and Receivers are (self-selected) kinds of Member.

Individual and Group are (self-selected) kinds of Member.

PayPal has users. Gittip has Members.

I'm a member of my local food coop and credit union. Member evokes alignment around a mission. I'm a member of a movement. Users register. Members join.

Member.

Member of Gittip.

Member of a Community.

Member of a Team—recursive! A Team is also a Member of Gittip and of Communities.

How do we want to use color relative to this distinction?

[thefoxis]

Just to clarify, I'm not upset, I was just asking :) Either works for me. I need to set aside some fixed hours per week, because otherwise it's hard to get something accomplish, that's not just advice.

[chadwhitacre]

@thefoxis Okay, cool. Sorry to have misread! :-)

[ESWAT]

@whit537 I really like the idea of replacing Participant with Member. Participant sounds too temporal and makes it sound like “they’re just in it for the ride”. Both of them are better than User though.

[Thelle]

Agree on member is better than participant.
I see LayerVault as a good way forward. Webflow is awesome for 'designing in the browser', but for this process version tracking would be key - therefore I see LayerValult as the best option..
Also for this process access web analytics data would be great to inform the design decisions - I'm immediately thinking of how many people use 'Who inspires you?' for example..

[chadwhitacre]

@Thelle What's your email? Happy to add you to Gittip's LayerVault.

Honestly I think the tools used are less important than the result. LayerVault, GitHub, Dribbble, Webflow ... whatever each of us is most comfortable with, I think the important thing at this point is getting ideas out on the table for us to discuss and revise.

Moar screenshots! 💃

[Thelle]

[email protected] - True :)
How about some kind of view access to web analytics data?

[chadwhitacre]

@Thelle Added! For basic analytics see here:

http://building.gittip.com/big-picture/ia/

I've added a +1 for you to gratipay/gratipay.com#1577.

[duckinator]

So this is where this conversation has been hiding... ;)

@whit537 re the screenshots you posted before: the pink background you used at the bottom literally hurts my eyes to look at. The gold background has the same issue (and that color doesn't seem to work well at all for text, either -- at least not on a brown background).

Are the design standups still a thing? If so, when are those happening?

[duckinator]

@whit537 I believe that the red and gold colors would work better as accent or text colors than background colors. Although they may be usable in a background gradient? (What do you think, @thefoxis?)

Also: count me as a fan of keeping the heart icon brown. It should look like the heart pennies, imo. :)

I also liked how in @thefoxis' design and your earlier variations, the "I want to give" button had the background filled in by default. It drew more attention to it, emphasizing giving/generosity more than receiving.

[rummik]

I'd argue the outline buttons feel like they're disabled and not clickable. That might just be to my eyes, but it's worth noting I think.

[chadwhitacre]

Closing as stalled out.