search

JanusGraph / janusgraph.org

JanusGraph website
https://janusgraph.org
Other
8 stars 20 forks source link

Update visual design of janusgraph.org #52

Closed mbrukman closed 5 years ago

mbrukman commented 6 years ago

The current janusgraph.org site is using a standard "Slate" Jekyll theme, which was the closest to the design of the Titan website when it was forked, but the design is quite dated at this time.

As examples of successful, well-designed open-source project sites, consider:

They are bright, they are using the full width of the page, and they have relevant, easy-to-follow information with bright, obvious calls-to-action. We should consider updating the site to use a more modern design theme which allows for customization and lets us showcase all the functionality that JanusGraph offers.

mbrukman commented 6 years ago

Here's a prototype: https://mbrukman.github.io/janusgraph.org/ — comments welcome!

porunov commented 6 years ago

@mbrukman I really like your prototype and hope it will be on the main page soon.

Here are small drawbacks which I found:

  1. When the page is opened on the full laptop screen and we scroll a little bit the header line which should be fixed ends after "Community" and only half of the line becomes fixed and another disappears (Checked on Chromium version 68 and Firefox version 62). The screenshot illustrates this issue: newmainpagejanusgraph
  2. I think docs link should be added into the header.
  3. Not sure about this case, but possibly we should add "Users" part of the current main page. Or make another page with the list of JanusGraph users in production. What do you think?
porunov commented 6 years ago

We should remove max-width: 1280px; from .masthead__inner-wrap to solve the first issue. I.e. turn:

.masthead__inner-wrap {
     max-width: 1280px; 
}

into:

.masthead__inner-wrap {
    /* max-width: 1280px; */
}
porunov commented 6 years ago

Another thoughts. I see that you listed an author of the photo. Can we omit this or put his name on the bottom of the page (https://unsplash.com/license)? The thing is that every time I open the page my focus goes into that name because subconsciously I think that the information which is written there is the important information which I should read. After the reading I understand that this information isn't important to me. I believe all legal copyrights, trademarks, author mentions and other legal staff should be on the bottom of the page because it isn't important information for most users and if some users need this information they know where to find it (on the bottom of the page).

porunov commented 5 years ago

I've updated design based on this theme https://github.com/jeromelachaud/freelancer-theme . The demo is here: https://porunov.github.io/janusgraph.org/

mbrukman commented 5 years ago

Hey @porunov, sorry for not getting back to this for a while. I see in the meantime, you've updated the sites visuals via PR #64; thanks for doing that! The green background is a bit hard to read I think (lower contrast from black-on-green may be an issue for accessibility); what do you think about making the background of those sections white or at least much lighter?

That said, what do you think about this original redesign? Do you think it would be worthwhile to revive this approach? If you're interested in this, would love to get your help with fixing the CSS to make it work!

porunov commented 5 years ago

what do you think about making the background of those sections white or at least much lighter?

If we make them white then there is no separation between sections. So, we should either make bigger padding or add some lines between sections. It is easier to change the color to be lighter (something like #dcf5e9 maybe). I've have moved all colors to _config.yml so that it would be easy to change color scheme.

That said, what do you think about this original redesign? Do you think it would be worthwhile to revive this approach? If you're interested in this, would love to get your help with fixing the CSS to make it work!

I like your original prototype. I said here https://github.com/JanusGraph/janusgraph.org/issues/52#issuecomment-423150351 what we should change to fix the problem with header. But it is hard for me to compare it with our current design because the prototype isn't complete. I think other commiters could look on this prototype ( https://mbrukman.github.io/janusgraph.org ) and add some thoughts about it if it worth to continue developing it. Personally, I don't want to work on a new prototype but I am OK with reviewing it and help with some CSS maybe. Also, I think it is easier to change our current design to look like your prototype (i.e. make image background instead of green background and make a white header).