Code Monkey home page Code Monkey logo

Comments (7)

RogerDodger avatar RogerDodger commented on August 14, 2024

I've made the unfocused green lines in guess graph a bit darker.

Will review the ballot colours later.

from writeoff.

TrickQuestion avatar TrickQuestion commented on August 14, 2024

The new green is good! But, I think you need to desaturate both greens (i.e. add grey to push it a little toward forest green by raising the R and B values together). The reds are fine, because they're not super-saturated, but your green lines are much too saturated, which makes them a little hard to see even after you've turned things up. Ideally it should be equally easy to see the selected red and selected green lines, so it becomes clear that they're both selected.

As a matter of design (I have a lot of experience with this, so I'm not just talking out my ponut) it's usually better to err on the side of contrast than subtlety. The only downside is that too much contrast could end up being garish, but you're nowhere near garish anywhere on the site.

That said, most of the color choices on writeoff.me are excellent. You have a good sense of style and an eye for clear design.

The only other color choices I'd recommend changing are the following:

This isn't a necessity, but it would look nice if you made the four main-menu-bars more distinct (i.e. a lot higher saturation and maybe some more hue divergence). I mean the Rules, Prompt/Vote, Fic/Gallery/Guess/Vote/Results, and Discussion bars.

The six colors used in the lists (title blue, gold, silver, bronze, dark blue, light blue) need to be darker and more distinct. I don't think using blue for the title and dark/light lines is a good idea because the text is usually blue (hyperlinks). I'd probably go with a green like you use for the writeoff boxes (the box at the top that has the name of the writeoff), except maybe a little darker for the title, and a little lighter for the light/dark lines. And I'd make the light lines much lighter than the dark lines, for contrast. That would have the added benefit of making silver more distinct (it's bluish), but gold silver and bronze should be much darker too. Especially gold and bronze, they're practically white right now.

Obviously these are just suggestions, but I wouldn't pick if I didn't love the site and the wonderful work you have done for us all. Thank you so much!

And have a happy Hearth's Warming Eve!
/)^3^(\

from writeoff.

RogerDodger avatar RogerDodger commented on August 14, 2024

I tried out your suggestions and most of them look much nicer. Thanks. ^^

Specifically:

  • Increased saturation on event buttons (Rules/Prompt/etc.)
  • Fixed up guess graph line colours
  • Decreased lightness slightly on table backgrounds (result/gallery/ballots etc.)

The hues on the event buttons are a bit harder to change. There isn't really any meaning to the colours. They're just to make the page look more colourful, so they need to look pretty and not distracting. Also important is that with art events there's another row, and the hues need to look nice in that case too. Right now the hues used are 230-350. This is 5 colours over steps of 30. The other options are:

  • 180-220 looks ugly
  • 100-160 (green) conflicts with event header
  • 20-80 looks ugly

Changing to steps of 40 would bleed into cyan or yellow which both look ugly. Not being over a spectrum would be a pretty big change to all the colours, and probably make it more distracting. I think steps of 30 gives distinct enough hues.

The table background being blue is fine and contrast with foreground (links) isn't a concern since it's still very light. Making it green would conflict with the event box. I don't use desaturated green much elsewhere to give it visual significance.

from writeoff.

TrickQuestion avatar TrickQuestion commented on August 14, 2024

I think it looks perfect as-is. I'd maybe lighten the light blue just a hair so it's easier to distinguish the lines, but that's all.

from writeoff.

TrickQuestion avatar TrickQuestion commented on August 14, 2024

Actually, I don't think you need to change anything. Everything looks good.

Though... I might lighten the unselected green and red lines a little now. They're more than dark enough to be seen, but also dark enough to be distracting when the lines are selected. (A compromise might be to lighten all the background lines by half whenever you select a circle.)

from writeoff.

RogerDodger avatar RogerDodger commented on August 14, 2024

(A compromise might be to lighten all the background lines by half whenever you select a circle.)

I tried this and didn't really like the effect.

The lightness on unfocused lines was 92% before. 94% is too hard to see, so I set it to 93%.

from writeoff.

TrickQuestion avatar TrickQuestion commented on August 14, 2024

Looks perfect. /)^3^(\

from writeoff.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.