Comments (7)
I've made the unfocused green lines in guess graph a bit darker.
Will review the ballot colours later.
from writeoff.
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.
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.
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.
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.
(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.
Looks perfect. /)^3^(\
from writeoff.
Related Issues (20)
- Event archive should be paged
- Add "revised URL" field to entries after event is over
- Allow users to change page size
- Prevent user's artist from being leaked to organisers on edit form HOT 1
- Define behaviour for ranking algorithm when an entry has no votes HOT 1
- Create better abstraction for commands
- Define behaviour when there are no entries
- Put event prompt in entry listing
- Rework formats HOT 1
- Show user what groups they're in
- Make it easier for organisers to avoid accidentally seeing artists
- Add a calendar view for the schedule
- Show format in schedule form
- Create distinction between user-level preferences and client-level preferences
- Clicking on a post link that changes location should NOT do a hashchange
- Fic preview
- Define behaviour when there are no voting rounds HOT 1
- Delete image from filesystem when deleted from database
- Give better error message for images that blow up the memory limit
- If a final round is removed because there were no entries, event.tallied might never be set to 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from writeoff.