New project buttons are difficult to understand

It took me a while to find the "Fork" button on this page. I couldn't tell a number of items here were buttons:

The previous page was easier to navigate, with the splash of color and helpful text:

I see it like @stanhu. The blue two lined version with labeled buttons looks better.

@skyruler, @dzaporozhets, @rspeicher: Thoughts?

I like new buttons more. Once used star and fork buttons are useless to me. Now with compact position it allows me focus more on content

Of course its always a trade off. We can not predict if you want to see button colorful and big or compact and gray

The position is fine, but the appearance is confusing. The buttons look like they are depressed already. They also get lost with the rest of the other fields.

But i think for everyday usage new style is better. Lets give it a chance

@stanhu it does get lost because people demand all this controls on the page. Making fork button different style would break awesomeness of design

@stanhu @boeserwolf91 People are also complaining that blue color is too much for them, what should we do? (╯°□°）╯︵ ┻━┻) 1. Solution: we can do primary actions with different color but tell me witch one is more important to you? Star Fork Download Global or Add. Cause there no way that people are less confused with 5 blue buttons in a row.

@skyruler I'm totally cool with another color. I just don't like to have all in one row. To my mind it makes it a little confusing and complicates "simple" actions because they're too near together. One has too look for a special button longer. So making the buttons grey as they're in the new version, shouldn't be a problem. For me the Add button is the most important. the Star and Fork buttons are just used once. The global won't get used often too. Just Download and Add are usefull more often and I personally create a new issue more often than I "download" a project without the git clone command. So maybe making the Add button blue and the other ones grey (but with the old layout) is a good way?

Is there a way we could make "Star" and "Fork" more obvious as buttons if the user hasn't starred or forked the project already? That way the first-time use has a more obvious call-to-action?

FYI, a first-time user of GitLab today said he had trouble figuring out how to fork the project: there was no obvious button, he said. After a while, he eventually stumbled on the project when he hovered over the right place with his mouse and saw that the URL on the bottom of his browser changed to what looked like the right link.

/cc: @sytses

mentioned in issue #3214 (closed)

thanks for collecting feedbacks @stanhu ! We can change it in 8.2

Reassigned to @creamzy

Milestone changed to 8.3

Added ~19492 label

Also related to gitlab-org/gitlab-ce#2406

Added frontend and removed ~19492 labels

Milestone removed

Assignee removed

@creamzy @skyruler please use existing UI elements in making mockups. The screenshot above use absolutely different style from what we have now. Gradients on buttons with different padding are not ok. Use elements from https://gitlab.com/help/ui instead of re-inventing new UI elements on every new page.

Added ~19492 and removed frontend labels

Milestone changed to 8.3

Updated based on the style guide

Added frontend and removed ~19492 labels

mentioned in issue #3482 (closed)

@dzaporozhets Is this a go?

@jschatz1 why not :)

Reassigned to @jschatz1

@jschatz1 essential is the copy button. There is a js lib that we use for that. it's great.

At the very least implement that!

@jschatz1 make sure assign it to you if you start working on it

mentioned in merge request !2156 (merged)

Status changed to closed by merge request !2156 (merged)

mentioned in commit aa712e2b