Repository navigation
Improve overall website design. - #386
Conversation
|
@grobie @fabxc @beorn7 @brian-brazil It's a bit late, so if something weird slipped in, I'll re-check again tomorrow. Anyways, wanted to put this out there... check it out! |
|
Also, apologies for this all being one commit. To see if things look good, I had to change a lot at once and then view it all in combination. So by then, it was a bit too late to make better logical commits without a lot of work. The "From metrics to insight" slogan is up for discussion. It's the best I've found so far. Criteria that such a slogan should have, in general:
But maybe the current one is cool enough... |
|
Looks very slick. I leave the details to those that are less illiterate when it comes to design than me. I'm afraid I can't really appreciate all the hard work that went into this. My nerdy brain only tells me about weird details that others probably don't even notice, e.g. sans-serif fonts are really bad for running text, and Arial is the ugliest of all sans-serif fonts. Another nitpick: I might be too righteous, but it feels poor to me to use a quote on the front page that in the original mentions a number of open-source monitoring systems, and we just cut it right after "Prometheus". Almost as if we are desperate for that kind of acknowledgement. |
|
That's a significant improvement. 👍 for merging this soon and worrying about nits in later iterations. I find sans-serif fonts way better. Not a fan of Arial either though. Agreed on the quote – there's another one though only mentioning us, IIRC ;) |
|
I tried out Roboto and it looks a bit smudged at that font size on my non-Retina screen at least. I changed it back to Open Sans now (which we had before, but at larger font size). I think I like it a bit more, including its proportions. Does that sound ok? I see what you mean about the quote. It's the only part of the book that's really quotable though. It'd be a bit weird to include the full sentence with all the other monitoring systems on our page. I could either remove the quote part for now, or maybe someone else has a good customer quote? |
|
I think the quote is fine, Prometheus is listed first and I've heard we are the closest to this "Borgmon" system. |
|
Great work @juliusv, looks awesome.
I found the link to promcon very helpful. We should bring it back in some form next, maybe as extra bar below the jumbotron with a sentence like "Sign up for the first Prometheus Conference in August this year"
looks nice The only part I don't really like is the navigation bar padding. There is too much space around the menu items. Looking at common page designs with navigation bars (facebook, github, twitter, pretty much any page actually), it seems to be common to not give them that much space. Did you check that it still looks fine on mobile? |
|
Agreed, happy to bring back some form of the PromCon link. Just as an additional capital-text button in the jumbotron, it looked really crappy with the new design. Regarding the header spacing: a lot of my design inspiration came from https://wakatime.com/ (WakaTime is by a friend of mine, and he's fine with it btw. :)). I got the header spacing from there. I just made an alternative version with only 60px height here: https://github.com/prometheus/docs/tree/design-exp-smallnav. Comparative screenshots: Tall:
Shorter:
IMO, if you view the whole page, I find that the shorter navbar looks a bit more out of place next to the other very spacey elements of the page. It almost feels a bit squeezed relative to the others. The taller navbar feels more like it's part of the same design language. What do you think? :) |
8795858 to
18c884e
Compare
|
As for mobile: yep! |
|
I like the shorter version a lot more tbh, the other one looks like as if the text has a weird line-height. I'm fine with whatever the majority prefers. 👍 |
|
Ha ok :) Everyone! Vote with emoji reactions to this comment (finally an excuse to try them out!):
|
- Thinner and more elegant fonts on landing page. - Removed "Overview" menu item, shortened "Documentation" to "Docs". - Replaced jumbotron logo+title with motivational text. - Removed "View details" buttons on landing page, make features clickable instead. - Introduced testimonial quote section on landing page. - Introduced "Open Source" section on landing page. - Refactored overall jumbotron layout/content. - Removed PromCon 2016 button. - Changed documentation font to smaller size. - Adjusted header font sizes and weights. - Made code blocks look cooler, with orange left border. - Don't wrap long lines in code blocks. - Harmonized background colors between pre, code, and toc. - Aligned the navbar Prometheus logo with the docs menu.
18c884e to
d55a613
Compare
|
A designer friend said he likes the taller option, gives more attention to the top :) 3 / 3 :P @grobie As discussed, I changed it so that the tall menu is only used for the landing page. I also adjusted the Prometheus navbar logo left side to be vertically aligned with the docs menu left sides. |
|
Voted 👍 but not feeling strongly. Fine with either. |
|
LGTM. I still find the big menu "ugly", but I only feel strongly about the docs, where you have made the change. So go forward with what you think makes most sense and merge. |
|
Ok, merging as it is for now - you'll learn to love the big navbar on the landing page in time, I promise :) |
5 participants
instead.
Top of landing page:
Bottom of landing page:
Docs:
New code boxes in docs: