Make GitLab A Little More Fun and Happy

One of the two most important differences in design between our site and other sites out there (consider Asana, GitHub, Dribble, Google) is these two things:

1. Depth
2. Color

Depth

Starting with depth: Our design is closer to the current Google design in that it is flat. It doesn't contain any gradients. Our buttons on their down state have depth (a drop shadow). Google on the other hand has depth on hover state. I think we should have depth on hover. Our hover state for buttons does nothing for solid color buttons. For lined buttons it goes solid. I think instead we should be consistent and create depth on hover.

Contrast and Color

Why does Google's input work and draw attention and our doesn't? Contrast. We have a lot of inputs in white areas. When Google does this, the border is #CFCFCF. When we do this it is #E5E5E5. Our lines should be more prominent.

Compare these:

GitLab:

Google:

Slack:

Our borders don't create enough contrast.

And depth. GitHub is big into gradients. But most interesting is their inputs with the light drop shadow (not unique to them). Google does this too but only on focus.

Out of all of those inputs ours looks fragile, like it would break or float away if the wind blew too hard.

Github has a similar border color but the input "works" because of the drop shadow making it stronger.

Buttons

Our buttons are good but they don't give the user confidence or desire to be clicked. They are apathetic.

Google solves this flat design by have a depth on hover.

GitLab on hover is the same as no hover for solid buttons.

That button does not care if you click it or not. I believe we should add depth on hover for all buttons. Slight depth. What if our button on hover looked like this:

Or closer to Google:

The idea is to give clickability. Not to say my design is perfect.

More on Colors

Our site is rather drab. We opted for sparse bold colors but I think we went too far.

Our sidebar is (in my opinion) a very dull blue. I think we should brighten it up, act like the site is fun.

Current:

Why not a little more fun:

I am not saying the colors I am choosing are the right ones. What I am saying is that the current color is very lackluster. It doesn't say fun.

Which leads me to my last point. It's all very dull.

Look at how Asana spreads fun colors around the screen:

You have pinks and blues and nice colors spread around the screen.

Look at Slacks profile card:

See how the picture takes up half of the thing? Nice blues and just exist by default.

And GitHub:

1 of the reasons it works is because of the spread of colors other than gray and white throughout.

Then look at ours:

The colors are much more sparse and we are mainly dealing with whites and grays. It works but it's not as fun. It's like pablum. It's dry wheat toast.

This is not meant to be critical but more helpful by providing examples. I'd like your take on my take.

cc @stanhu @dzaporozhets @DouweM @tauriedavis @cperessini @hazelyang @dimitrieh @annabeldunstone etc.