6 ms·
Can you show a pretty example of the approach you’re advocating? I’m skeptical, you see. I’ve never seen an attractive web site designed that way.
by Jolter 6y ago
Can you show a pretty example of the approach you’re advocating?
I’m skeptical, you see. I’ve never seen an attractive web site designed that way.
- enriquto 6y agoWikipedia is the perfect example: black text on white background with blue hyperlinks. It does not get more attractive than that in my opinion.
- seanwilson 6y agoExample: https://en.wikipedia.org/wiki/Hacker https://en.wikipedia.org/wiki/Hacker There's yellow, orange, blue borders, grey borders, different shades of blue for different links, grey background etc. so you're oversimplifying. The linked article even makes the point you end up needing several greys, reds etc. for things like borders and warning pop-ups. Nobody is arguing you should have 10 brand colours.
- enriquto 6y agoOK, so there are more colors. The example that you show uses colors to signal things that are wrong with the current page. This is somewhat logical: if things look wrong (because there are more than three colors) then they are wrong. Regular wikipedia entries do not have yellow nor orange: https://en.wikipedia.org/wiki/Riemannian_manifold https://en.wikipedia.org/wiki/Riemannian_manifold You are right that there's still more colors: very light shades of gray, and a thin light blue line for separator. They are almost imperceptible on my screen, but I would say that the page would look even better if the thin separator was black, and there were no different background shades.
- yoz-y 6y agoTFA specifically says that the colors added to greys and primary are there to convey states: warnings, destructive operations, tendencies and so on. > They are almost imperceptible on my screen, but I would say that the page would look even better if the thin separator was black, and there were no different background shades. Most would disagree. Separating the content from sidebar and asides such as the table of contents is useful because your eyes can follow where you are.
- soneca 6y agoI just opened a Wikipedia article on my phone and I saw 5 background colors: white (main), light gray (background of card), less light gray (background of footer, green (background of banner to show last edit), and light purple (background of card title). Also two shades of grey for text color, a dark one (main), a light one (Wikipedia title) Edit: The article I looked: https://en.m.wikipedia.org/wiki/Mark_Robinson_(American_politician) https://en.m.wikipedia.org/wiki/Mark_Robinson_(American_poli... The front page has even more colors: https://en.m.wikipedia.org/wiki/Main_Page https://en.m.wikipedia.org/wiki/Main_Page
- tomtheelder 6y agoWikipedia has dark grey text on a white background for the primary text. Headers are in actual black. I found another 6 shades of gray that are all used in multiple places on the site. I found 5 shades of the primary color blue. A good color palette uses many colors but feels like few. Wikipedia is doing a great job of this.
- gregoryjjb 6y agoThe article actually kind of addressed this with the shades, and I think that's what a lot of non-designers miss; having several shades of the same color adds a lot of variety without looking cluttered ("feels like few" as you said).
- enriquto 6y agoBut I don't understand the point of the shades, then. Why not go for the real thing? Why not use the exact same color, and it will not only "feel like few"? What's the actual advantage of using different shades (besides making the work of the web designer seem more difficult).
- gregoryjjb 6y agoIt lets you display more granular information. You can have light blue buttons with dark blue text, as well as solid blue buttons, to convey "primary" and "secondary" CTAs for instance. You could try to display the same amount of info in less color, or even black and white (maybe outlined buttons, bold/regular fonts in the text), but color variation looks "good" to the majority of eyeballs.
- visarga 6y agoHeaders in Wikipedia are rgb(0, 0, 0) but paragraphs are rgb(32, 33, 34). So they attenuate the black on the small font text.