Starting work on Team Banner design

[clone1018]

This is going to be my focus for awhile, I want to mess around with the design a bit in an issue before I move it to a pull request.

My second draft is:

My goals were:

• Supporting teams on Gratipay is AMAZING! Let's show that off
• Highlight you (the user) setting up an easy gift to the team

I'd love some initial thoughts! Please be aware my "Gratipay Terminology" is way old :)

To Do:

• Ugly black border!
• What's the default tip amount?
• I added a semi-black transparency to the banner for the white text, good solution?
• Update terminology

[clone1018]

[clone1018]

Gotta figure out this black border... The top banner has a slightly brown border, hrmmm

[chadwhitacre]

@timothyfcook will love you if you ditch the picture of my table as part of this (#3569). :-)

We're due for a refresh on the banner, for sure. But every time I've started down this path, I've gotten bogged down and bailed, because it turns out that there is a lot going on in the banner. Since it's so dense, it's hard to tweak just one part without having to also address lots of other parts. To do this right, therefore, I think we need to start with a comprehensive view of the information tied up in the banner:

1. header
   1. logo (homepage link)
   2. search link
   3. sign in - or - user link + sign out
2. global call to action (cta, i.e., the annoying yellow "Support Gratipay" banner)
3. banner proper
   1. profile pic
      1. elsewhere indicator (Twitter, etc.)
      2. admin knobs
         1. status_of_1_0_balance
         2. is_suspicious
   2. verified national identities
   3. chalkboard
      1. {n,}{giving,taking,receiving}
      2. joined ago
   4. h1
      1. username
      2. team name
      3. package manager name(!?; Stub out /on/npm/foo/ pages #4212)
      4. section name (About, Search)
      5. pitch (Homepage)
   5. background image
4. ★ 1.0 announcement ★

[chadwhitacre]

Revisiting your goals in light of the above ...

• Supporting teams on Gratipay is AMAZING! Let's show that off
• Highlight you (the user) setting up an easy gift to the team

I think the first is referring to the receiving number, yes? That's currently buried in 3.iii.a.

The second is actually in the sidebar right now! So we're talking about adding this to the banner, yes?

[clone1018]

Right, giving is the focus of this page. It's the actionable item.

[clone1018]

Ideally, I want to keep this simple. Path of least resistance.

Why don't we separate out the banner from the "giving banner". Using it's own styling so we don't have to worry about a full refactor right now?

[chadwhitacre]

Why don't we separate out the banner from the "giving banner".

I think I agree. Do you mean not touching "3. banner proper" at all at this point?

Is there a way we can get (4) out of the way? That would free us up to move the giving component up below the banner ("giving banner").

[chadwhitacre]

That would free us up to move the giving component up below the banner ("giving banner").

... without having to muck with the black border.

[chadwhitacre]

The big problem with (4) is that it's nowhere else on the site right now, and it's the only link we have to the page where you can manage your 1.0 payout. Can we move that to ~user > Settings > Available Money?

[clone1018]

Yeah. I think we can replace the global banner on the team page with this one. Which will have it's own mini styling.

Moving (4) out of the way should be easy.

[chadwhitacre]

replace the global banner

I'm not exactly sure what this refers to. Can you give me a number in the outline? :-)

[clone1018]

3

[chadwhitacre]

Replacing all of (3) does not sound right to me, but I think we may be crossing wires? Maybe I will wait for your next screenshot? :)

[clone1018]

In order to do this without messing up literally every other, I was going to completely remove 3 from the team page and replace it with a team specific 3 design.

[chadwhitacre]

@clone1018 Well, that does move us towards #3852. Will the team specific 3 design include all the info that is in the current 3? Here's the above outline, filtered for teams:

1. banner proper
   1. profile pic
      1. elsewhere indicator (Twitter, etc.)
   2. chalkboard
      1. {n,}{giving,taking,receiving}
      2. joined ago
   3. h1:
      1. team name
      2. package manager name(!?; Stub out /on/npm/foo/ pages #4212)
   4. background image

[clone1018]

Looks good to me, however how important is the "Joined ago" 1.ii.b ?

[chadwhitacre]

@clone1018 Not as important as other things.

[chadwhitacre]

This could be a chance to also solve a problem I've been hitting on #4212, which is that it's a bit goofy to have the name of the package in the banner (h1) and in #content. Right now I have "npm" as the h1, but that breaks the parallelism with other teams on the site.

P.S. We're in the process of changing the term "team" to "project".

[chadwhitacre]

The big problem with (4) is that it's nowhere else on the site right now, and it's the only link we have to the page where you can manage your 1.0 payout. Can we move that to ~user > Settings > Available Money?

This is done in #4229.

[chadwhitacre]

Closing for now.