I recently started following author of this article on Twitter, he shares a lot of tips/tricks/insights about UI, visual design, etc. Highly recommended. And you will more articles like this on his website. He should add navigation to article pages, though.
It’s worse than that. I liked this article, but it was anonymous and undated. I looked around the site to find out who this was. Despite the author wanting you to know about him, what other people think about his skills, etc., he seems not to want you to know what his name is. I find this kind of thing bizarre. Does he want you to guess it from the URL? I finally saw his name in his page about “books I wrote”.
I think his design ideas are sound. But visual design without any notion of information design is like having a beautiful car with no wheels. Or something.
> It’s worse than that. I liked this article, but it was anonymous and undated. I looked around the site to find out who this was. Despite the author seemingly wanting you to know about him, what other people think about his skills, etc., he seems not to want you to know what his name is. I find this kind of thing bizarre. Does he want you to guess it from the URL? I finally saw his name in his page about “books I wrote”.
I'm guessing that his website is work in progress or/and he's learning cms he's using.
>I think his design ideas are sound. But visual design without any notion of information design is like having a beautiful car with no wheels. Or something.
Sure, but you should learn from multiple sources as not everyone should teach about everything. It's up to you to connect that knowledge.
Agreed.
I do think it's better to publish good ideas on an imperfect site than not to share at all, but yeah, every article needs to have a date on it. Leaving it undated doesn't make it "evergreen", it just makes it annoyingly cut off from the implicit context of the point in time.
Agree about the date. Even saying the year is better than nothing.
In another of his articles he begins with "Stripe recently refreshed their website..." but we have no way of knowing what "recent" means. The article might be 10 years old. For someone focused on attention to detail, he has neglected the importance of date in context:
Sometimes it's okay not to mention date, such as a movie or book review. We know it was written some time after the book or movie was released - a date already known to reader.
>he seems not to want you to know what his name is. I find this kind of thing bizarre. Does he want you to guess it from the URL?
I know this is hard to grasp in the world of LinkedIn that we live in, but would it shock you to learn that sometimes people just like to share things without it being directly marketed somehow? Not everything has to be a hustle.
A good reason to break "Use near-black and near-white instead of pure black and white" for blacks is if the design will be viewed either on a projector, or with an an OLED screen as both will display pure blacks quite pleasingly.
I thought the no-pure white/black was due to human visual perception. That neither occurs in nature and they seem fake/artificial to the viewer. Nothing about how good it looks on the medium.
Very true. This is more coming from print media where you can get closer to true colors. This might be one of those things that needs a tweak when translating between mediums. Much like optimal line length.
Sadly we're still in the past when it comes to displays to be used outdoors, but if you compare a Kindle in sunlight, the white background is probably an order of magnitude brighter than any normal computer or telephone screen.
"Don't use pure black for text" or "don't use a pure white background" are total myths among designers. You'll never have anything close to a pure color on current display technology.
I suspect the designers with their near white and near black to have superior monitors that are capable of more contrast than regular users. Ironically my cheap monitor automatically converts pure black and white to near.
My understanding is professional designers use color-calibrated monitors, which unfortunately have nothing to do with the actual monitors and screens most people actually use to view content.
Designers monitors' are calibrated to perfectly match a cheap 90s CRT (sRGB, Rec. 709, 200 nits brightness). Sadly, most cheap modern LCD screens are far worse in contrast and color gamut than 90s CRTs.
> Use near-black and near-white instead of pure black and white
Please don't. Reducing contrast of text makes it harder to read. Even if you do it just a little bit, it still makes it a little bit harder to read. Worse, a lot of designers seem to get carried away with this and end up with gray-on-gray text that's impossible to read for anyone over the age of 30.
Plus it doesn't even look better. I guess this is subjective but I frequently open the devtools inspector to edit people's CSS to turn their near-black into black and their near-white into white, and every time I'm like "Wow, that looks so much better!"
Maybe I'm just a systems engineer with no sense of taste but I absolutely don't understand why anyone wants this.
Most content on most users’ screens doesn’t use pure black/white for UI. Most users will (assuming they even know or care how to adjust their monitor, which is far from a given!) adjust their monitor to make most content look good, which will not be the same as making pure black/white UI look good.
My point is that nobody is adjusting their screen for your website, and using black and white doesn't imply that people would need to adjust their screen for your website.
That every website uses different “blacks” and “white” is the problem though, because it means you have to adjust your screen differently for each website. If they’d just use #000 on #FFF like 20 years ago, you’d only adjust your screen once and be fine.
So, then if designers stopped lowering the contrast of their sites, users would adjust their monitors back to sensible defaults rather than cranking the contrast to make low-contrast web sites look good. Right now we are stuck in a loop where designers assume users have cranked the contrast too high, so they make low-contrast web sites, so user have to crank the contrast too high...
TBF, I think having a small range of blacks in use is a good thing. Use 0.0 and 1.0 for highlighted items. 0.1 and 0.9 for the rest. Great! A little color rather than grayscale? Great!
But, I've seen far too many sites that take it too far and think they are smart by presenting dim-on-grey text. f2 hex is 0.87 and 22 hex is 0.33. That's cutting my screen's range in half! And, that's much better than many lovingly designed sites I've had stomp over with screen-reader mode, on my 800 nits phone screen!
What are all of you people talking about? People adjust their laptop brightness at will. I adjust mine all the time for comfort when reading. It is two buttons on the keyboard. All cell phones have easy brightness controls a swipe away and everybody knows how to use them.
Monitors have contrast and saturation adjustment, not just brightness. Since we're talking about text-on-background contrast, I'm (and I figure others are) referring to the contrast adjustment that other devices don't have.
LCD screens don't need contrast or saturation adjustment unless you are a design or photo professional. For any screen really, you set the contrast at the proper level if it isn't already there from factory. We adjust brightness because the brightness of our environment changes during the day.
As I read the thread, the discussion is about reading text on a laptop or mobile screen. For that you need nothing else than brightness controls. And 100% black text on 100% white background is a good default and works well for all users.
A lot will and for those less savy probably a majority of new devices come setup to adjust brightness based on ambient light conditions. This difference between ambient and screen brightness will be what determines how comfortable max white is on SDR content.
Also can't control if a user has their brightness too low. So what then?
For me pure black text on pure white background looks good, but pure white text on pure black background it doesn't look good, my eyes are getting tired faster but that also depends on what font family/weight/size is used. For thin font weights (100-300) maximum contrast increases readablity, for regular/bold weights it's not neccessary to be pure white on pure black.
I believe near-black and near-white suppose to be used in conjunction with all the other suggestions made in the article, not just by itself. If you are looking at a document, I would say that should have different rules applied.
IDK. I'm over 30 and pure black background with white text hurts my eyes. It isn't a brightness thing either. I can turn my screen brightness down to 30% and the contrast still hurts my eyes. Black text on white background is fine though.
Yeah, over 50 I might buy but I am almost 40 and have no big issues reading low contrast webpages. Sure, I prefer higher contrast like here on HN but low contrast is about as hard to read as when I was 20.
The example from the article is #F2F2F2 and #222222, which has a contrast ratio of 14:1, which is nearly three times the WCAG guidelines and better than most websites. I think it would be instructive for people who think they hate off-black and off-white to try reading #FFFFFF on #000000 text and compare their reading speed to #F2F2F2 and #222222. I believe (but can't prove) that most of the hate is for contrast ratios below 10 being falsely applied to higher ratios.
People over the age of 30 can mostly read books and newspapers just fine, and when they can't it's rarely the fault of the off-white paper and slightly faded ink.
The opinion that something is wrong with your display if black text on white background is too bright strikes me as odd. Would one expect that #f00 or #0ff to be comfortable as well? Asking the monitor to blast the highest light intensity possible across the screen clearly risks being uncomfortable in many light conditions. Monitors emit light, they aren’t passively illuminated like a paper. If you reduce the brightness to the point where #fff is comfortable across the screen, there’s no room for bright details, that should exceed the brightness of the bg. So many programmers use dark mode to reduce eye strain for a reason.
That said, even though monitors like laptops and phones increase brightness, that’s not enough when in direct sunlight. There, black in white would make sense, but of course comes at a cost of reducing range (it’s physically impossible). Screens that are incapable of keeping up with direct sunlight should probably increase contrast in those conditions.
If you are making a video game or movie and you wast super-bright stuff on the screen, that's what HDR is for.
(Incidentally I'm a big gamer but I generally prefer to turn off HDR because it hurts my eyes. It's actually really annoying. I don't want certain parts of a scene to be extra-extra-bright.)
If you're giving me text, please don't second-guess whether I've set my monitor brightness appropriately. The vast majority of text I look at is already black-on-white. By reducing the contrast of your text you're assuming that everything else I look at is blinding me and somehow you're saving me with more appropriate contrast. No, I've set my monitor so everything else I look at looks right and what you're showing me is too washed out.
> If you're giving me text, please don't second-guess whether I've set my monitor brightness appropriately
Why would #000 text on #fff be the correct way? It’s common but not at all ubiquitous, there’s no standard for this.
> No, I've set my monitor so everything else I look at looks right and what you're showing me is too washed out.
If you don’t like the extra range you can easily increase the contrast and reduce the brightness, but the other way is very destructive. You can go from #def -> #fff with a simple transform but you can’t go the other way. And if you use 100% of your range in a single element, you have no room for using color, shadows and background, which is a critical tool for all complex design, including old school Windows and Mac UIs from the 90s.
That said, there should be better APIs/standardization and monitors should be better at adjusting brightness and contrast to lighting conditions. I don’t mind at all that people change to whatever suits them, in fact I wish it was easier to use things like reader mode (which ad-tech has been fighting against, hard). Lots of web sites suffer from all kinds of design issues these days, sometimes too low contrast, even for me.
I worked in the nuclear industry for several years building control room consoles. Use near-black and near-white was dictated. Neither programmers nor designers had a say in the matter. It was not a matter of "opinion". Human factors researchers made those decisions.
In fairness, that's also what the article is saying: near black and near white.
Do you have any links to the studies by those researchers? My own understanding is that yellow-on-blue is traditionally meant to be the most visible option, but that there's not actually a huge amount of evidence to back this up, and it's more tradition than anything else right now.
I do not understand the first rule. I want pure black backgrounds, even if "you" wont give me pure white foreground letters. This has become more and more important as I have aged. Maximum contrast please. Especially on OLED.
> Too much contrast has never been an issue, which is why no one uses flux or dark themes, right?
f.lux is for increasing color temperature. Dark themes are for reducing the ratio of bright to dark. Neither is primarily intended for reducing contrast.
> It's relatively easy, by turning #ffffff and #000000 both closer to #ff0000, or in other words, by reducing the contrast.
Yes, but decreasing contrast is an unfortunate side effect, not the goal. This is like saying that the purpose of a light bulb is to increase your electricity bill.
> Dark themes (excluding amoled themes) exist to reduce the perceived contrast between the screen and the environment.
Yes, but not the contrast between text and background.
I actually have trouble reading the text on that page but not on HN. When you have actually bad eyesight you can easily "see" what works and what doesn't and that page is bad.
The main problem is that the worst consequence of not following this rule is still perfectly usable, while the worst consequence of overdoing it is the
font-weight: 300, color: #555
nightmare that we see everywhere on the modern web.
So lets just not.
Also, a backlight-based screen is not the same thing as a newspaper, where you can easily increase contrast by improving your light source almost infinitely. I can always decrease my screen brightness quite a bit, but there is an upper limit of increasing it.
By maximising contrast, one is trading short-term legibility with long term legibility. The maximum amount of contrast is as problematic as almost no contrast. There is a maximum useable deviation to both ends.
By approaching max contrast, it gets harder to read for longer periods, because your photoreceptors approaching exhaustion, creating an after image [1]. It may happen slow enough to go unnoticed for some periods but should be noticeable at the end of a day as eye strain.
Yes. The default settings on most monitors are unusable for reading. Calibrated reference screens for print reproduction are approaching 120-140 cd/m^2, which tends to be in the 20-35 percent rage of most monitor brightness settings (if the implemented brightness curve of the monitor scales lineary; not the case with some Eizo‘s. These use something akin to an inverted gamma 2.2 to compensate for the nonlinearity in brightness sensivity of humans) 120 cd then looks somewhat like matte paper. Ideally, this should shift up and down with the brightness of the environment the screen is put into. That is why most serious photometers/colorimeters include ambient light sensors and consider the results during calibration.
It's "too bright" because 100% white is being used and covers most of the screen.
When most displays blast intense white light in your face at normal settings, it's not a screen brightness issue, it's a content brightness issue. Solved with controls such as dark modes, reading modes and options for users to customise. Obviously a lot of users prefer the full contrast experience, but many don't. Providing user choice is best strategy.
The neuroscience of after-images is a lot more complicated.
It's certainly possible to cause them by "bleaching" photo-pigments, but this requires extremely bright light. Other mechanisms likely produce the after-effects you normally encounter, and even there, eye movements (large and small) should help counter-act them unless the stimulus is very large and bright.
I have no doubt that overly contrast-y web pages can cause eye strain, but it's usually not because they're exhausting photoreceptors.
At the very least GP included a some sort of source (a link to an interesting wikipedia article). You dismissed the source with an anecdote. Not sure you're the one who should be making claims about pseudoscience.
GP's source doesn't actually motivate why an after-image is tiring for the eyes.
I'd associate eyestrain with the muscles in the eye. Like you can give yourself eye-strain by quickly moving the focus from close to far-away a couple of times.
Meanwhile, after-images are a neurological artifact. They do not cause your eyes to change focus, and are not caused by the muscles in the eye.
Although extremely bright light may strain the eyes in the same way your eyes may be sore from contracting if you go outside on a bright summer day.
Regarding the pseudoscience argument, maybe this helps a bit: as far as I understood it, there are two types of after image: One is a neurological artefact, the other one is a biochemical one.
What I described earlier as exhaustion is buried in a process called visual cycle, which is a biochemical process. If enough photons of a given wavelength hitting special molecules of a part of your retina, these molecules run through a replenishing cycle after photon absorption to run through the same loop again and again. If light source is strong enough, the cycle is not adequate to account for the incoming mass of photons, essentially triggering temporary deactivation. The molecules responsible for colour vision register the inverse of the incoming wavelength, as in: the absence of all other wavelengths registered gets interpreted as the colour one sees. This essentially creates the yellow after image if one looks at an object with strong red and blue content.
This is a can of worms and there is more involved, even on the side of the emitter which is why there is measurement in watts per steradian going on but my knowledge ends here. Maybe a Biologist can chime in.
This completely depends on the reader's lighting conditions and time of day.
If I'm sitting on my laptop in daylight, outdoors or in a room with large windows, I'd really like to max out the contrast while reading. Later in the day, the "Night Light" feature that's built into Windows 11 will reduce the contrast and increase the color temperature towards a yellower hue. (In past years I used f.lux for this.)
This kind of adjustment is not something each website should try to do. It's a system-wide setting that needs to take into account e.g. local sunrise/sundown times, like Night Light does. (And on iPhones, there's a light sensor that takes care of this.)
Videographers would recommend using the full dynamic range that is available, right? That way you are providing maximum detail and letting other systems (e.g. screen, room light, human visual system) scale as appropriate.
Even if your scene were in the middle of the night you would still use your brightest white ("FFFFFF") for the least-dark moonlit areas. (Striking recent example is The Northman fighting in the caves.)
In that context I wonder if the motivation for recommending near-white and near-black, i.e. foregoing dynamic range for no intrinsic benefit, is for contrast against other things in the user's field of view e.g. large images, browser toolbars, popup notifications, etc.
and guess what, it's far easier and more pleasant to use all contrast available in color and tone it down with the brightness setting of the monitor, than doing grays on grays and having to shade or crank up contrast in the monitor
Yes it does depend on lighting, see my other comment.
No, ‘Maximum contrast everywhere’ given as a directive without consideration is not a solution and will increase the problem.
Consider things beyond HDR displays: At technology progresses, we will approach superbright display technologies which will surpass the dynamic range of the human visual system. Technically, these will be as bright as light bulbs and brighter and could be used as such. Going by that max brightness directive, we will all stare happily into a direct light source one day. Or one is happily busy dragging the brightness slider up and down the whole day, one at a time for every app and site. It won’t work. To solve this, we would need tone mapping at the latest pipeline stage, everywhere. And this will, of course, again reduce contrast, but this time, by design.
The other major problem is: by leaving it all to the users (all three dimensions of the now prevalent color model), one throws every standard out of the window. One website will send out 4000 nits, the next one 350. One display can handle it, the other cannot. Color shifts abundant. How should that be accounted for?
Furthermore, your model makes it impossible to design for: this removes the visual target platform and puts legibility and qualitative design principles at the mercy of technological progress. So solve this with the tech available, there were several agreements made to specify calibration targets - which include brightness and contrast settings, aka gamma in more than one dimension.
In a perfect world, no screen would leave the factory without a built-in calibration device and an ambient light sensor.
One more problem, the constant intermixing of use cases while discussing HDR displays: not every use case needs an HDR treatment. It does not make any sense.
The main problem HDR solves is that content creators are not forced to squeeze 10 pounds into an 6 pound bag anymore. And if your display supports this, you can benefit from the full color space the content creator wanted the observer to see. Which is totally nice for hundreds of use cases. However, staring at a pitch black font next to a white background which emits 20.000 cd/m^2 would be painful.
This both ignores that color calibration is a thing, and that the hypothetical 4000nit display will still have a brightness setting, and ignores the pain of real users with real 250nit displays
The problem is that if your monitor is set up so that a white background looks OK, then all photos, video, etc, will look too dark. If your monitor is set up bright enough for photos to look good, then text on a white background is too dazzling and tiring for the eyes. So the only good compromise is for the monitor to be set up so that photos are bright enough and then not use text on a pure white background.
Better solution: provide user controls so people can select the contrast themselves. It's never going to happen that developers and designers all decide never to use pure white. User controls and options is best solution.
> Worse, a lot of designers seem to get carried away with this and end up with gray-on-gray text that's impossible to read for anyone over the age of 30.
I have always put this down to designers having very high quality monitors with excellent contrast. Apple screens (laptop or desktop) particularly tend to show those low contrast things as more readable than for the rest of us.
It is a plague that seems to be less bad than it used to be. I think it's ok in principle but it should be quite subtle. Also, I think that full-black should generally be used for text, but you can get away with more on the background (look at HN for example!).
> Pure black looks unnatural on a screen, and pure white is too bright.
Huh? Nothing about text on a screen is "natural". "Too bright" is completely meaningless, you have no idea what my motivations are for the brightness settings on my screen. The content should make use of the full range of brightness, and the user can then adjust the contrast to any point in [0, 1] as desired. This is like suggesting that an audio sample should only use 10% of the dynamic range allowed by the file format, because "speakers are too loud".
> some odd shapes have a visual centre that is different from their mathematical centre.
"Mathematical" doesn't really mean anything here. Are you referring to the centroid? If anything that is a "more mathematical" concept than a midpoint. The use of this word here makes it look like you want to eschew the technical perspective in favor of the emotional, aesthetic perspective. But a centroid can be computed.
This is the entire basis of the article. Use the word "mathematical" where convenient to sound smart, but never come close to defining the word. Sprinkle in a whole bunch more of these opinions-masquerading-as-facts, and there you have it.
Same thing with the "too bright". Too bright based on what? Too bright for whom? Doesn't matter. Just follow these opin- I mean rules.
"Mathematical" and "optical" alignment is not the best wording I think. It seems that "align by weight, not by width" would be a better way to summarize the author's advice.
But apart from that, it is good advice, and I think the post gives a few more good rules of thumb too.
Indeed. That's how my brain reacts to it - it keeps nagging me that thing is not properly balanced and will tear everything apart when rotating, like a washing machine does when you throw a brick inside it.
“Mathematical" and "optical“ stems from design lingo and is AFAICS not an invention by the author. One can find these terms in most of design related software packages. “Mathematical” is also often described as “metrics”.
? Not only is there a very specific meaning to 'mathematical' the article is in fact dead-on example of good design rules.
'Mathematical' alignment would mean centering on the basis of width or height, whereaas 'optical' aligment would adjust for the 'visual weight' of the item, which often 'feels' different.
For example, a 100px wide container with a 50px wide image within it, may not be appropriate to sit at the 25px->75px range. It may need to be slightly adjusted depending on the visual mass of the images.
Honestly these are excellent rules for design, and it's a bit funny in fact to see all the comments from people unable to process ostensible ambiguity in the rules, as though they are looking for a 'precision algorithm'.
I would say to anyone having difficulty processing why these are helpful rules, that it would be worth looking into design principless overall, it'll be a fun experience.
A better wording than “mathematical” would have been “simple integer ratios”. Taking √sin(e) would also be “mathematical”, but probably not what the author meant.
I think all of their uses of “mathematical” just means bounding box. It’s pretty reasonable because those are the numbers design software shows you for placement and uses to make guides. And you can calculate a centroid, but what about when the image has multiple colors, making one side look heavier than the other, or any other weird case? This isn’t rejecting math, just in this case it’s more effective to go with what looks right versus follow a formula. You don’t use a slide rule to catch a baseball.
I doubt that any of these rules are things the author considers to be proprietary opinions. The majority of them are common guidelines that are echoed by any competent graphic or UI designer. Many things like line length and leading have been extensively studied. Human factors researchers take things like readability/legibility seriously. A lot of science goes into signage or other functional uses of text.
While the presentation may have struck you as pompous, as far as I can tell, the author is just trying to save people time of researching these things and make it more likely that people won't keep building terrible websites which are hard to read or use.
There are a few things like using slightly off-black or off-white that can be controversial, but overall this reads to me like a great place to start if you don't know any better.
These are a set of extremely good ‘rules of thumb’. General engineering is full of them. One rule not mentioned though is this; “Break any of these rules sooner than do anything outright barbarous”, to paraphrase Orwell. However, to safely break these rules, it helps to know and understand them in the first place.
If you can't use pure black and pure white can you at least use "pure black plus 1" and "pure white minus 1"? If not then how far can you go away from the extremes before it becomes permissible?
it ought to be clarified that this is from the perspective of digital design, i.e. things that appear on screens. some, but not all of it is applicable to print design. that said, it seems to be a pretty decent list, all told—I clicked the link expecting to find lots of things to complain about, but it's actually alright.
A lot of negative comments here, but these are useful rules of thumb when designing UI, especially if you don't have a design background. They're not perfect, sure, but it's a good starting point.
A lot of these tips I've learned on my own just analyzing how designers I've worked with did things or noticing how sites I thought were aesthetically pleasing to the eye have done it. I kind of wish I had a summary like this a few years ago.
It's wearisome how predictable HN is. I guess I've spent too much time on here (and continue to do so!). Every single time something vaguely design-related comes up, the entire discussion is about how thou shalt not steal my god-given right to use pure-black-on-white. Programmers apparently detest anything even remotely not #000, but fuck me is it ever repetitive and boring.
I don't think there's a name for this concept but I think of it as like, anti-pretentious pretentiousness. The place I first saw it well described was in a novel where tennis players who spend a lot of time on the court picking up balls develop a fluid motion to launch the ball off the ground with their racket and so avoid bending over to pick it up. It becomes a signal that a player is serious. But then less serious players see that, see that it looks smooth and cool, understand what it signals, and so practice that motion for its own sake.
In response the really elite players just go back to bending over to pick up the ball with their hand, signaling that they're too skilled to bother signaling how skilled they are.
HN falls hard into this in general. But then combine it with the disdain or even contempt it's fashionable to show towards subjective pursuits like aesthetics, and it gets dialed way up.
Like you said it's very predictable. Any time I see a link that has any sort of distinctive design, unique typographic style, or especially authorial tone, I know instantly what a handful of comments are going to be.
> In response the really elite players just go back to bending over to pick up the ball with their hand, signaling that they're too skilled to bother signaling how skilled they are.
Truly elite players have ball boys and girls pick up balls for them.
Your point, though, reminds me of the Sneetches by Dr. Seuss
I grew up in the days of SD video and the start of using computers for digital designs for video. In SD NTSC/PAL, you'd never use 000 for black nor 255 for white. Instead, you'd use broadcast safe 16,16,16 and 235,235,235. That's just something that has always stuck, even when converting to web. It's not because some rule, but just because I like to know there's a little bit more if I ever need it. To this day, I'll still start in a similar limited vein for HD and 4K designs. It's like a warm fuzzy blanket that I'll never let someone take away.
You missed the motivation behind my diatribe. Wanting black on white is fine (it's what I do on my text editors). I just hate that up and down this thread, that's all I get to read, although the list is full of other nuggets that I would have loved to have seen fleshed out here.
Your comment was the first one related to that rule I read, and I'm a good way down the page. Maybe you just happened to see the comments early on when a discussion on that happened to be at the top.
There are a lot of rules/guidelines type of things like these that are as stated "safe" to follow. However, it's after understanding these types of rules and what makes them safe that allows rules to be broken for purpose rather than ignorance.
Film/video/photography have them as well. Things like looking room, rule of thirds, and similar guidelines will pretty much always be safe. However, there are times when breaking those rules can look very awkward or very artistically done, but it can be telling when it was done from ignorance and just looks awkward or done with intent and the breaking of the rule reveals something else deeper.
1. The ROT has a bastardized history, that involves the artist Thomas Smith semi-completely misunderstanding the work of the artist Joshua Reynolds.
2. Smith re-wrote Reynolds's observation as a rule of prescription (e.g. 'walk only on the path') not as a rule of exclusion (e.g. 'don't walk on the path'). In aesthetics, the former generally do not have a long life expectancy.
3. Reynold's original observation was not restricted to composition. It addressed the artist's abhorrence of symmetry. Symmetry is understood as being a general phenomenon. Hence the following cases are all understood as being manifestations of symmetry...
maybe the rule of 1/3s was applied to way more than it should be, but i don't think it's one to throw the baby out with the bathwater though. again, it's a good starter rule. once you get skilled enough to start composing shots without needing a check list of rules to apply, you'll see that some of those starter rules getting broken regularly.
a common use of thirds is in graphics use of lower thirds. it's just enough room without being too much. lower quaters would be small. lower halves would be too much. centering your subject in the first 2/3 and leaving the remaing third as looking room isn't bad aesthetically.
so maybe how you are interpretting the ROT is different than how i use it, but you definitely seem to have a grudge
Yup. I guess I do. Perhaps I overstated my feelings, but as an art and design teacher such non-truths are the bane of my life.
Almost all 2D aesthetic images (paintings, art photographs or page layouts) feature a region of interest (ROI) sometimes called the point of focus or the center of attention. Indeed, it is difficult to construct an aesthetic image that does not.
The so-called rule of thirds states that this ROI is best located one third across the vertical and horizontal axis.
However, the actual; truth is more complex and more interesting:
1. The horizontal axis ratio is not 1:2 but closer to 1.618. In other words, the golden ratio https://en.wikipedia.org/wiki/Golden_ratio [1]. For many purposes, one third is close enough to the golden ratio. However, in practice artists/designers tend to actively avoid exact fractions (third, half, quarter, seventh etc).
2. There is a difference between the placement on the vertical axis to that of the horizontal axis. The vertical axis seems to be tighter towards the edge (the bottom edge in a painting, the top edge in a flat design).
3. Mysteriously, there is a slight favoring of the left side over the right. This seems to have something to do with writing direction [2].
My own small-scale field research supports these observations (on 31 art students), as well as the work of a few others (below).
On a personal note... one reason I like lurking in Hacker News is for the precision of thinking that computer and software engineers exhibit. In my own field (fine art) 'received wisdom' is often taken as lore. These non-truths are harder to kill than vampires. Examples:
- Red recedes over blue (in a FG/BG pairing, one will always recede, but which would depend upon which red and blue you employ and how they are used).
- The complementary of red is green (yes it is the perceptual complementary in RYB space, but the mix-to-neutral complementary in RGB space is cyan).
- That the Pointillist painter Seurat employed optical mixing of primaries by placing them in close proximity, like a CMYK printer (he simply did not... there were other reasons he favored small dabs of paint in close proximity).
... I could go on.
[1] Amirshahi, S.A., Hayn - Leichsenring, G.U., Denzler, J., Redies, C.: Evaluating the rule of thirds in photographs and paintings. Art Percept. 2 , 163 – 182 (2014)
[2] Chahboun, S., Flumini, A., Gonzàlez, C. P., McManus, I. C., & Santiago, J.: Reading and
Writing Direction Effects on the Aesthetic Appreciation of Photographs (2016)
These are good rules of thumb. As a professional designer for coming up on 2 decades, I'd say they are indeed safe to follow in most situations.
He gives the good advice that you should only follow the rules when they make sense, and not otherwise. With that in mind, the two rules I disagree with the most are:
> Measurements should be mathematically related
> Elements should go in order of visual weight
Because, whereas most of the other rules are probably good to follow 90% of the time, these feel sort of arbitrary and opinionated.
I think making measurements mathematically related is a convenience and is often helpful, but for the same reason that optically centering things is better than mathematically centering them, I think you can easily ignore a mathematical relationship between values if it doesn't look as good. There is nothing inherent about humans that makes us prefer magic numbers, it's just that using them gives us an easy way to achieve visual consistency. If it stops doing that, ignore the ratio. If a grid or your font sizes look better nudged by a pixel or two in one direction or the other, do that instead.
With respect to ordering elements by visual weight, my only complaint is that he specifically says "heavier first", rather than "heavier first, or heavier last, both are fine as long as you're consistent". So, it's a nitpick, but it bothered me because it's an easy distinction to make.
At the end of the day I feel like you are correct in practice but the advice to follow mathematical relationships is still solid.
Yes you are probably going to need to deviate from the mathematical relationship at some points, but these are generally helpful to observe and understand the design challenge. For one thing have a mathematical basis acts as a good starting point. This is helpful for more junior designers, it is good when the assets that are in flux and it is generally useful for getting things close before tuning. Second, having some mathematical conception of the layout can help provide deeper insights into the problems. You can start to formulate things in more regular terms and you can start thinking beyond a layout configuration and consider how the problems generalize.
Ultimately people have different methods and you should do what works for you, but I think that this point is still good advice in general.
I (not a designer) figure it's like the "rules" of photography such as the "rule of 3rds".
For those unfamiliar, the rule is that the main focal point (the bit you want to draw the observer into the picture first - such as the eye of a the person in a portrait) of the picture should be at the intersection of one third from the edges of the picture.
Another "rule" is the "sacred geometry" where elements that have long edges are more appealing when they are in alignment either with other "lines" in the image, or with the edges of the image itself. I've taken many landscape photos with a camera leveled with a gyroscope stabiliser (or just a spirit level when on a tripod) but the resulting images didn't "pop" until they were rotated so the ground aligned with the frame, or the picture skewed so the walls of buildings were truly vertical.
But then I've seen some incredible photographs that break those rules and only work because they deliberately broke the rules - some quickly found examples (and article affirming my diatribe above :)) from natgeo: https://www.nationalgeographic.com/photography/article/break...
As a software engineer I like these simple rules, they let me produce something that doesn't look terrible without having to spend years studying design.
It reminds me of shuhari (守破離), an idea from martial arts and other traditional practices. It basically means "Follow the rules, break the rules, transcend the rules", and the characters mean "follow, break, transcend". The article hints at this too: follow the rules until you find a good reason not to. As it is aimed at beginners we should mostly be learning and following the rules until we have enough experience to start breaking them.
I see The Analytical Language of John Wilkins was posted again today. While you're creating those rules, it's important to remember the map is not the territory.
I liked maxims when my life was simple and I was young, now they feel completely meaningless, as they never have a context for real life and they break down easily when applied to complex behavior and interactions. It's more like a prayer or chant, more for self reassurance, that you follow some principle, than anything.
Probably it's not against shuhari. Shihari is often used to describe professional principles in martial arts or playing instruments. It assumes they're trained to the point where if they do it, they unconsciously follow all the rules. When they play guitar, their fingers just move in the most effective ways and play the most satisfying melody. Then they intentionally break a few rules to improve it.
So shuhari is ”first do it, then do it right, then do it better” for professionals.
> and the characters mean "follow, break, transcend"
守 does mean "follow" in the specific sense of "following rules", though it has no sense related to motion and most "following", including metaphorical following, would be represented by 隨. 守 mostly means "guard" or "protect", and I assume that's the metaphor that was extended to complying with rules and correctly performing rituals.
破 means "break", no problem there.
離 means "leave" as in "go away"; it does not appear to have any sense of "transcend".
Presumably that would also be "leave" as in "abandon"? I think the idea is that you no longer need to think of the rules at that point because your intuition has matured to a point that you no longer have to reference them at all.
> Presumably that would also be "leave" as in "abandon"?
Well, sure, in the sense that abandoning necessarily involves leaving, and 離 can refer to the leaving aspect of that. But "abandon" adds a lot of meaning that isn't generally present in "leave"; you might be looking for 棄, which is specifically about abandoning.
離 is a much more basic word having to do with distance and separation. But since separation and abandonment are closely related, it does appear to have been used in something resembling that sense. Consulting a dictionary of Middle Chinese:
> 離
> 1. to part from, separate, leave; e.g. 離緒 emotions at parting; 離居 leave one's home; also, live apart
> b) stray from, astray; estrange(ment); divorce oneself from; be or get free of; e.g. 離落 aimlessly astray, drifting rootlessly; 離書 bill of divorce; 離結 free from bonds
That gloss is the closest one I see to "abandon". (And also looks like a pretty good match to the usage above; you can imagine escaping the binding of the rules as a close analogue of escaping literal bindings.) Compare
> 棄
> 1. throw away, discard; put aside, leave behind; abandon, forsake; renounce, reject, abolish, get rid of; annul
(Why Middle Chinese? It's easier for me to look up, and it seems more likely to be reflected in Japanese than modern Chinese usage is.)
This is actually very close to the advice I've heard when it comes to design, i.e. "you need to understand the rules in order to understand when to break them". Following the rules helps build an intuition that later allows you to judge when breaking them is advisable.
I was thinking about this and to me it seems like it’s closer to the centre of mass. It doesn’t really help that that the article doesn’t describe how they centre the thing in the ‘mathematical’ version. For example is it the mid-point of the extents. I think even using the average horizontal position of the vertices would be closer to ‘optical centre’ and even more so if you took area into account by breaking the shape into triangles.
The ‘mathematical’ alignment is usually just considered "centered however the alignment button works in the software you're using" in design discussion. For most software that'd be bounding box based - the center of the rectangle the software draws around it.
Optically is more center of mass, but ideal more 'center of visual weight'. Larger things are 'heavier', darker/more contrasty things are 'heavier'. Rounded things should extend over an alignment line a bit, flat shapes butt up against it (e.g. in the letters lO the O extends over the baseline slightly compared to the l, to visually connect with the baseline more).
In general the way it works is you align with whatever software says and you look at it and say does it actually look aligned or need minor adjustment? Because the point is to look aligned rather than to be mathematically correctly aligned. Like our letters above, they look more visually on the same baseline when they're not, then when all the rounded base letters sit most 'correctly' on the line.
The author is suggesting you use the mean X value of all the pixels in the shape, instead of the mode x value.
I'm sure fancier image editing software does this, but your eyes are pretty good at it too because it's just dividing the surface area in half, or thinking about it as the "center of mass" as you put it: where could you attach a string to this shape such that it doesn't tip over one way or another?
I think that this might be more true in screen based work than in printed publications. The focus of a printed page tends towards the top, but not necessarily at the top. A webpage is a different entity… not always seen in its entirety. The way that unity manifests would therefore necessarily be different. The order of weight would be better maintained at a local level, not global.
> Make outer padding the same or more than inner padding
This is one that is generally true, but not always. A framed drawing can often safely accommodate more space at the bottom than the sides and top.
If you can measure and quantify your choice, it's math. I think it is more like "don't make decisions with your gut, understand why something looks better."
I disagree with your disagreement. The brain has a strong preference for simple patterns. The more it can compress information down into assumed symmetries and extrapolations, the more "pleasing" it feels. There's always a mathematical explanation, even if you're not consciously aware of it. In the "optically aligned" example, the 2nd object is aligned about its center of mass rather than its height/width pixel border.
There can always be an mathematical explaination sure. But that won't help you as a designer if there is no way to know/apply that explaination beforehand. There is probably also a (quite complex) mathematical rule to drive your car on a public road, so it should be simple to implement automatic driving, right?
Optical weight is nice and all (and a better simple rule than just spacing things by equal distance), but in the end you also have other phenomena (humans perceive horizontal lines different than vertical ones etc.)
Just the seemingly simple task of spacing out letters can get complicated pretty fast if it should look pleasing as in "as if there was no design there".
It's also the case that some of the simplest and most intuitive possible mathematical rules are going to look less good than some less mathematically elegant ratio, like picking line spacing for body text which is exactly the font-size or exactly twice the font-size rather than somewhere between 1.2x - 1.5x
> I think making measurements mathematically related is a convenience and is often helpful
I think, in the absence of any guiding principles or rules, this is a good one to have. It's easier to say "Ok, this should be 4, 12, 36" then go from there.
I think heavier first is just because so many people make the same mistakes. Clearly, if you have experience, you can break the rules anytime you want and even make up your own.
As somebody with a similar job profile & experience I totally agree with you, but do think the point of keeping mathematical relations between sets of measurements is a very good tip indeed:
not because not doing so would result in bad design decisions, but because it makes it much much easier for people unfamiliar with design work to:
- keep things consistent
- stay within a balanced set of measurements that are easy to remember and expand
- avoid ending up with a set of values that are too close to each other to meaningfully impact the design, but are therefore hard to maintain and identify
I agree! Good design is hard and these basic rules make sense for most designs. It's better to stick to them unless you are certain about your reasons otherwise. These days, I tend to use a utility library like Tailwind, to take some of the guesswork out of color matching, spacing, and sizing.
Logarithmically related is mathematically related.
Heck, related by Wiener noise/integrated random walk is mathematically related, and if you watch 2D animations of random walks you'll soon develop a visual feeling for that.
I agree with you about the mathematical relations. I used to do it when I was younger, but it never quite worked out so I stopped.
However, there is sort of a reason to do it: baseline alignment. If you have columns with different contents, the heights of everything should work out so that the baselines continue to align over the page. You can adjust this manually, but a mathematical relation can be a shortcut there.
Does this or something similar exist as a browser plugin? I suck at visual things, and it mostly looks dumb because I don't have an intuition about these things.
I could go over a list like this and apply every tip to each element of what I might be working on but that's annoying. Font-size vs line-height, element alignment, button contrast and padding etc feel like things that could be automated -- even if it just ends in "hey, I drew a bunch of lines over your page, maybe you find something that looks like it could be moved to one of them".
This is well done: the scope is well-contained, the text is clearly written, the ideas are clearly illustrated, and the advice seems helpful. Glad to have read it.
I deeply hate the style of design that's become popular over the past few years. "No borders, flat text and flat buttons, multiple fonts and font sizes on the screen at all times, heavily simplistic and hidden menus".
I use software to build stuff, damn it. I want well-notated and labelled complexity. Stop making my tools look like an elementary school classroom in a dystopian short film.
The "Tertiary button" example in the article. How is this a button? It's a piece of text. Zero visual indication whatsoever that it functions as a button.
I've done my fair share of front end dev and I like modern flat designs, however these text-only buttons take it too far.
I once counted twenty different methods of indicating that something was clickable on a single screen in a Jira build my company was using. They ranged from a button with depth to literally nothing but blank white.
16px is the default text size in most browsers. Text below this size gets harder to read, so it’s safest to avoid it for body text. The higher you go beyond 16px, the easier the text is to read."
Hacker News was designed by someone who considers design a waste of time and a distraction from the purity of information, and who made the site ugly and awkward on purpose to keep normies away. Honestly we're lucky it looks as good as it does.
IMO, HN looks better than many sites created by professional designers. It allows you to actually read the content instead of waiting ten seconds for the page to load, then scrolling through kilometers of whitespace and unrelated “hero images”.
>It allows you to actually read the content instead of waiting ten seconds for the page to load, then scrolling through kilometers of whitespace and unrelated “hero images”.
I'm able to read the content on every site I visit even when it has whitespace and images but to each their own. I'm glad Hacker News serves your needs.
Out of curiosity, I played around with HN font size: by default on my monitor is 12px, at 13px is almost the same, at 14px is great, 16px is not better than 14px so it is wasting screen space. I think it depends a lot on the pixel physical size, that means diagonal and resolution.
Text should have the same size today is it did in the 90s. If your monitor has a higher resolution then please use DPI scaling isntead of wasting screen space for everyone else. That way old websites will still be readable without having to update everything.
HN would have rendered at the equivalent of 16px (exactly, actually) on a 90s computer. The issue here is that Apple and Windows assume two different default DPIs for a 90s computer (72 vs 96dpi), and as result, what 1pt is can differ by 1/3rd.
> Use a line length around 70 characters ... It doesn’t matter too much if your line length is 60 or 80 characters, but go too far either side of that and you might run into subtle readability issues.
Says a website using a painfully-large font size that results in a line length of only ~40-characters ;P. That said, despite using a much more reasonable font size, Hacker News goes out of its way to limit line length to ~40 characters even though there is extra margin it could be using to get up to ~50-60.
Now, I'm sure some people are going to balk and say that this website--and Hacker News--in fact have longer line lengths and I must be crazy, but the reason they look the way they do to me is because I am reading this on a phone... as are most people doing most of everything they do these days: using actual computers is now somewhat rare.
However, I honestly have no issue reading with a ~40 character line length! In truth, I am pretty confident that I prefer it to longer 60-80 character lines: I read books on my phone, and I have the font size set to reflow at ~40 characters per line, and if I move to landscape (at the same size) I find that difficult to track as the lines are simply too long.
Now, we might then conclude that this is somehow just obsolete advice caused due to a lot of designers having grown up during a time when people used to have devices (even computers) with larger screens and were maybe more used to seeing long lines of text on large sheets of paper, where obviously everything had longer lines than my narrow phone...
...but no: I'd argue that some of the best typesetters in the field, who had the strongest reason to care about optimizing for legibility and readability, worked for newspapers, and if you pull up a scan of an old paper--whether from the 1980s or the 1860s--you will find that they all prefer ~40 characters per line (and you will find the same with science journals and government registers and most magazines).
I will thereby claim that the only reason we put up with 60-80 character lines is because it feels like a waste on a widescreen monitor to enforce such a narrow column and the technology of scrolling makes it extremely awkward to have multiple columns (as anyone who gets angry at navigating PDF articles--almost all of which are typeset with ~40 characters per line--in a web browser experiences viscerally).
(I believe) 80% of design is technical and 20% is creative.
This means developer built UIs, documents, etc. could look waaay better by following simple design (typography! included) guidelines.
I believe these guidelines exist, but there's no well defined, available, or well-known "grammar" (as in this type of grammmar https://vita.had.co.nz/papers/layered-grammar.html) and there's no set of rules.
With a proper grammar and rules we could go a very long way.
Other examples are
When/where/if:
1. Illustrations should be used.
2. Photos should be used.
3. IxD (interaction design) / animations.
4. Colour palette selection / creation.
5. Flourishes.
These are the things I struggle with when designing generic corporate marking websites. I'm not a designer but I've worn the designer hat many times. I always warn my employer/client that I'm more of a technical designer than a creative one. Nowadays I just stick to application design since it's 100% technical.
Example: as someone who's more technical than creative I could have come up with the overall layout of the Excalidraw+[0] website but I don't think I would have thought about adding circles around keywords or the dashed line that leads users down the page.
Playfulness, "flair" and other emotive forces guide creative decisions usually, but there's nothing stopping a technical person from arriving at similar outcomes via a more technical process. It will take more time and be less fun, less satisfying, but it's possible.
For example, once the basic IA is worked out, you could have a phase of the project called "flourishes", where your knowledge of illustrative techniques, eye-tracking, colour theory and UX tricks and so on, guides the design. Along with business needs, communication preferences... Another phase could be "product photography" where knowledge of what makes a good photograph comes into play.
But yeh it's usually easier to get a professional designer who enjoys and does these things all day long!
Pure blacks only exist on OLED, and to a lesser extent with FALD (not relevant for text). What’s worse, IPS panels only have a nominal contrast ratio of 1:1000 or less. #000 already is only dark gray on them. Please, PLEASE, use pure black for text!
> pure white is too bright
I’d argue that the brightness of your display is turned up too high if pure white is too bright. It shouldn’t be brighter than a sheet of white paper held next to it, and normally we don’t claim that those are too bright.
>normally we don’t claim that those are too bright
I print a lot of books, and I find that a more "cream" colored paper is much more pleasant to read for an extended period of time. YMMV but if there's more than a paragraph of text involved I'd prefer a lower contrast ratio.
Adjusting the screen brightness means you need to calibrate your screen again from scratch. All other settings have to be redone after changing the brightness, and you need to generate a new color profile.
Standard brightness has a fixed value, adjust contrast in your designs, not in the settings of the screen.
> "It shouldn’t be brighter than a sheet of white paper held next to it"
That comparison makes no sense for emissive light sources such as screens. You could argue it for e-ink displays, but not normal screens where we watch mixed content such as videos and photos - where we want whites to be bright.
Such rules are great help for beginner designers or engineers working without full design specs. Even if experts might debate the reasoning and science, it provides some rails for such folks.
The "multiples of 8" for spacing and sizes is one such rule I follow and it is easy to remember. Some of the rules in the original article are harder to remember. Though I will remember the 16px as min font size idea.
It’s really unfortunate that the author started with the most controversial of rules, because I find much of the rest of the article to be quite the helpful summary.
Particularly padding and margins - I’ve only recently taken the time to study what makes a design look good vs looking off in terms of spacing, and have come to similar conclusions as the author.
I suspect if the rule against pure black on pure white were buried in the middle (or omitted) then the response would be warmer.
I learned about "too much contrast" from a type designer that painted typefaces by hand. We were taught not to use pure black ink on white paper because it's a bit less legible than softer contrast.
I'm not sure why it's so controversial among digital designers.
The same person taught me that "optical alignment is often better than mathematical alignment" (which is why the bottom of curved letters often falls slightly below the baseline if you look closely).
>I'm not sure why it's so controversial among digital designers.
Assuming you're talking about the "Give me #000000 on #FFFFFF or give me death!" crowd, it's a kneejerk reaction to the cardinal sin of gray-on-gray content that is fucking impossible to read.
"Kneejerk" is a bit of a down-putting assumption, isn't it? There are many, MANY, reason why someone might disagree with the OP opinion on black and white.
I happened to have a few iOS apps where true black is an option (which is desirable on OLED to save battery). A perhaps less common concern is eInk whose dynamic range is quite limited and for which #000000/#FFFFFF greatly enhances readability.
If I open up word and print out something with a black font color on standard paper, that printed document won't have completely black ink on a completely white paper. Things that are 100% black and 100% white don't actually exist in the real world.
If you're not well-versed in visual design, it's okay to stick to some basic guidelines.
But remember, every rule is just a starting point. If you have a solid understanding of contrast, color, composition, usability, accessibility, and more, you have the freedom to experiment and try new things.
In my professional opinion, standardization and commoditization in design have their pros when it comes to production and usability. However, this approach is leading us towards a bland and uninteresting user experience.
I'm hoping that the emergence of XR will bring back some of the old-school "skeuomorphic" spirit of exploration, expression, and texture in design. If we keep relying solely on "best practices," we risk being replaced by automation.
And please, don't design UI without having a design background. Use some UI library or Tailwind/Bootstrap instead.:)
> And please, don't design UI without having a design background. Use some UI library or Tailwind/Bootstrap instead.:)
Maybe it's time overthrow the W3C and invent HTML6 already, and provide for some proper modern UI widgets instead of needing piles and piles of JavaScript UI-library-of-the-month that create widgets by hacking together a clutter-fest of div hell.
Stuff like <hamburger>, <tabset swipeable="true">, <img pinchzoomable="true" onclick="window.lightbox(this)" lowsrc="..." highsrc="..." ultrahighsrc="...">, <ul pulltorefresh="true" onrefresh="foo()"> should be part of it already, <button> should have more sane margins, font, contrast, and border radius choices by default, <hr> should be low contrast by default as the article says, and the default background and text colors should be #f2f2f2/#222222, and not #ffffff/#000000. Visual centering should be implemented in CSS with a neural net. Let's get standards with the beat.
>Visual centering should be implemented in CSS with a neural net. Let's get standards with the beat.
Actually, I am utterly baffled that this is not the target of current neural net implementation. I expected some form of automation to emerge in this field first.
Instead, someone decided, that investing in generative "A.I." art and removing the human element from the illustration process is more important.:)
I'm a frontender in a two men team and we have a backoffice application that doesn't require nice ui but still would like to see wheter I can improve it with those rules.
332 comments
[ 2.7 ms ] story [ 265 ms ] threadhttps://anthonyhobday.com/sideprojects/
https://anthonyhobday.com/sideprojects/visualtechniques/
https://twitter.com/hobdaydesign
I think his design ideas are sound. But visual design without any notion of information design is like having a beautiful car with no wheels. Or something.
This is not difficult.
I'm guessing that his website is work in progress or/and he's learning cms he's using.
>I think his design ideas are sound. But visual design without any notion of information design is like having a beautiful car with no wheels. Or something.
Sure, but you should learn from multiple sources as not everyone should teach about everything. It's up to you to connect that knowledge.
In another of his articles he begins with "Stripe recently refreshed their website..." but we have no way of knowing what "recent" means. The article might be 10 years old. For someone focused on attention to detail, he has neglected the importance of date in context:
https://anthonyhobday.com/sideprojects/attentiontodetail/str...
Sometimes it's okay not to mention date, such as a movie or book review. We know it was written some time after the book or movie was released - a date already known to reader.
I know this is hard to grasp in the world of LinkedIn that we live in, but would it shock you to learn that sometimes people just like to share things without it being directly marketed somehow? Not everything has to be a hustle.
It also doesn't occur on monitors. White and black on a screen is not pure, screens aren't that good.
"Don't use pure black for text" or "don't use a pure white background" are total myths among designers. You'll never have anything close to a pure color on current display technology.
OLED has a delay when switching pixels on and off.
That being said, if it's static please offer a "high contrast dark mode".
Nothing looks better (and more battery efficient) than pure black on an OLED.
You tend to get a smearing effect, where the pure black parts have a slight delay.
You can see it demonstrated in this video https://youtu.be/eHpLN0rX2DI
Everything about modern design is "unnatural", this design rule is the "appeal to nature" fallacy manifest.
If you need proof that beautiful things can be black and white: https://gwern.net/
(also, OP blog is _so close_ to pure black and pure white, it's almost imperceptible)
Please don't. Reducing contrast of text makes it harder to read. Even if you do it just a little bit, it still makes it a little bit harder to read. Worse, a lot of designers seem to get carried away with this and end up with gray-on-gray text that's impossible to read for anyone over the age of 30.
Plus it doesn't even look better. I guess this is subjective but I frequently open the devtools inspector to edit people's CSS to turn their near-black into black and their near-white into white, and every time I'm like "Wow, that looks so much better!"
Maybe I'm just a systems engineer with no sense of taste but I absolutely don't understand why anyone wants this.
The "safe" rule would be to use 100% black and 100% white for maximum contrast. Only diverge from that if you have a good reason.
TBF, I think having a small range of blacks in use is a good thing. Use 0.0 and 1.0 for highlighted items. 0.1 and 0.9 for the rest. Great! A little color rather than grayscale? Great!
But, I've seen far too many sites that take it too far and think they are smart by presenting dim-on-grey text. f2 hex is 0.87 and 22 hex is 0.33. That's cutting my screen's range in half! And, that's much better than many lovingly designed sites I've had stomp over with screen-reader mode, on my 800 nits phone screen!
Or if their device is even capable of it (phones/tablets and laptops)
For a parallel, mplayer lets me adjust these and I use it often because video is just as inconsistent.
Also can't control if a user has their brightness too low. So what then?
People over the age of 30 can mostly read books and newspapers just fine, and when they can't it's rarely the fault of the off-white paper and slightly faded ink.
That said, even though monitors like laptops and phones increase brightness, that’s not enough when in direct sunlight. There, black in white would make sense, but of course comes at a cost of reducing range (it’s physically impossible). Screens that are incapable of keeping up with direct sunlight should probably increase contrast in those conditions.
(Incidentally I'm a big gamer but I generally prefer to turn off HDR because it hurts my eyes. It's actually really annoying. I don't want certain parts of a scene to be extra-extra-bright.)
If you're giving me text, please don't second-guess whether I've set my monitor brightness appropriately. The vast majority of text I look at is already black-on-white. By reducing the contrast of your text you're assuming that everything else I look at is blinding me and somehow you're saving me with more appropriate contrast. No, I've set my monitor so everything else I look at looks right and what you're showing me is too washed out.
Why would #000 text on #fff be the correct way? It’s common but not at all ubiquitous, there’s no standard for this.
> No, I've set my monitor so everything else I look at looks right and what you're showing me is too washed out.
If you don’t like the extra range you can easily increase the contrast and reduce the brightness, but the other way is very destructive. You can go from #def -> #fff with a simple transform but you can’t go the other way. And if you use 100% of your range in a single element, you have no room for using color, shadows and background, which is a critical tool for all complex design, including old school Windows and Mac UIs from the 90s.
That said, there should be better APIs/standardization and monitors should be better at adjusting brightness and contrast to lighting conditions. I don’t mind at all that people change to whatever suits them, in fact I wish it was easier to use things like reader mode (which ad-tech has been fighting against, hard). Lots of web sites suffer from all kinds of design issues these days, sometimes too low contrast, even for me.
Do you have any links to the studies by those researchers? My own understanding is that yellow-on-blue is traditionally meant to be the most visible option, but that there's not actually a huge amount of evidence to back this up, and it's more tradition than anything else right now.
Too much contrast has never been an issue, which is why no one uses flux or dark themes, right?
f.lux is for increasing color temperature. Dark themes are for reducing the ratio of bright to dark. Neither is primarily intended for reducing contrast.
It's relatively easy, by turning #ffffff and #000000 both closer to #ff0000, or in other words, by reducing the contrast.
Dark themes (excluding amoled themes) exist to reduce the perceived contrast between the screen and the environment.
In both cases, either directly or indirectly, contrast is reduced.
Yes, but decreasing contrast is an unfortunate side effect, not the goal. This is like saying that the purpose of a light bulb is to increase your electricity bill.
> Dark themes (excluding amoled themes) exist to reduce the perceived contrast between the screen and the environment.
Yes, but not the contrast between text and background.
So lets just not.
Also, a backlight-based screen is not the same thing as a newspaper, where you can easily increase contrast by improving your light source almost infinitely. I can always decrease my screen brightness quite a bit, but there is an upper limit of increasing it.
By maximising contrast, one is trading short-term legibility with long term legibility. The maximum amount of contrast is as problematic as almost no contrast. There is a maximum useable deviation to both ends. By approaching max contrast, it gets harder to read for longer periods, because your photoreceptors approaching exhaustion, creating an after image [1]. It may happen slow enough to go unnoticed for some periods but should be noticeable at the end of a day as eye strain.
[1] https://en.m.wikipedia.org/wiki/Afterimage
When most displays blast intense white light in your face at normal settings, it's not a screen brightness issue, it's a content brightness issue. Solved with controls such as dark modes, reading modes and options for users to customise. Obviously a lot of users prefer the full contrast experience, but many don't. Providing user choice is best strategy.
It's certainly possible to cause them by "bleaching" photo-pigments, but this requires extremely bright light. Other mechanisms likely produce the after-effects you normally encounter, and even there, eye movements (large and small) should help counter-act them unless the stimulus is very large and bright.
I have no doubt that overly contrast-y web pages can cause eye strain, but it's usually not because they're exhausting photoreceptors.
I'd associate eyestrain with the muscles in the eye. Like you can give yourself eye-strain by quickly moving the focus from close to far-away a couple of times.
Meanwhile, after-images are a neurological artifact. They do not cause your eyes to change focus, and are not caused by the muscles in the eye.
Although extremely bright light may strain the eyes in the same way your eyes may be sore from contracting if you go outside on a bright summer day.
What I described earlier as exhaustion is buried in a process called visual cycle, which is a biochemical process. If enough photons of a given wavelength hitting special molecules of a part of your retina, these molecules run through a replenishing cycle after photon absorption to run through the same loop again and again. If light source is strong enough, the cycle is not adequate to account for the incoming mass of photons, essentially triggering temporary deactivation. The molecules responsible for colour vision register the inverse of the incoming wavelength, as in: the absence of all other wavelengths registered gets interpreted as the colour one sees. This essentially creates the yellow after image if one looks at an object with strong red and blue content.
This is a can of worms and there is more involved, even on the side of the emitter which is why there is measurement in watts per steradian going on but my knowledge ends here. Maybe a Biologist can chime in.
[1]https://en.m.wikipedia.org/wiki/Visual_cycle
If I'm sitting on my laptop in daylight, outdoors or in a room with large windows, I'd really like to max out the contrast while reading. Later in the day, the "Night Light" feature that's built into Windows 11 will reduce the contrast and increase the color temperature towards a yellower hue. (In past years I used f.lux for this.)
This kind of adjustment is not something each website should try to do. It's a system-wide setting that needs to take into account e.g. local sunrise/sundown times, like Night Light does. (And on iPhones, there's a light sensor that takes care of this.)
Even if your scene were in the middle of the night you would still use your brightest white ("FFFFFF") for the least-dark moonlit areas. (Striking recent example is The Northman fighting in the caves.)
In that context I wonder if the motivation for recommending near-white and near-black, i.e. foregoing dynamic range for no intrinsic benefit, is for contrast against other things in the user's field of view e.g. large images, browser toolbars, popup notifications, etc.
and guess what, it's far easier and more pleasant to use all contrast available in color and tone it down with the brightness setting of the monitor, than doing grays on grays and having to shade or crank up contrast in the monitor
No, ‘Maximum contrast everywhere’ given as a directive without consideration is not a solution and will increase the problem.
Consider things beyond HDR displays: At technology progresses, we will approach superbright display technologies which will surpass the dynamic range of the human visual system. Technically, these will be as bright as light bulbs and brighter and could be used as such. Going by that max brightness directive, we will all stare happily into a direct light source one day. Or one is happily busy dragging the brightness slider up and down the whole day, one at a time for every app and site. It won’t work. To solve this, we would need tone mapping at the latest pipeline stage, everywhere. And this will, of course, again reduce contrast, but this time, by design.
The other major problem is: by leaving it all to the users (all three dimensions of the now prevalent color model), one throws every standard out of the window. One website will send out 4000 nits, the next one 350. One display can handle it, the other cannot. Color shifts abundant. How should that be accounted for? Furthermore, your model makes it impossible to design for: this removes the visual target platform and puts legibility and qualitative design principles at the mercy of technological progress. So solve this with the tech available, there were several agreements made to specify calibration targets - which include brightness and contrast settings, aka gamma in more than one dimension.
In a perfect world, no screen would leave the factory without a built-in calibration device and an ambient light sensor.
One more problem, the constant intermixing of use cases while discussing HDR displays: not every use case needs an HDR treatment. It does not make any sense. The main problem HDR solves is that content creators are not forced to squeeze 10 pounds into an 6 pound bag anymore. And if your display supports this, you can benefit from the full color space the content creator wanted the observer to see. Which is totally nice for hundreds of use cases. However, staring at a pitch black font next to a white background which emits 20.000 cd/m^2 would be painful.
2. I especially considered calibration in my comment and others above yours.
No, it doesn’t ignore it. Your comment, however, does not go into any details I mentioned besides ‘you are wrong‘.
What is actually your argument?
Otherwise I loved this list as a lay person.
Regarding color palette, I really like the work of Kate Rose Morley: https://fosstodon.org/@kate/109348023789472321
> “Pure black looks unnatural on a screen, and pure white is too bright.“
Even though it looks “unnatural“ at least I can read it.
I have always put this down to designers having very high quality monitors with excellent contrast. Apple screens (laptop or desktop) particularly tend to show those low contrast things as more readable than for the rest of us.
It is a plague that seems to be less bad than it used to be. I think it's ok in principle but it should be quite subtle. Also, I think that full-black should generally be used for text, but you can get away with more on the background (look at HN for example!).
Huh? Nothing about text on a screen is "natural". "Too bright" is completely meaningless, you have no idea what my motivations are for the brightness settings on my screen. The content should make use of the full range of brightness, and the user can then adjust the contrast to any point in [0, 1] as desired. This is like suggesting that an audio sample should only use 10% of the dynamic range allowed by the file format, because "speakers are too loud".
> some odd shapes have a visual centre that is different from their mathematical centre.
"Mathematical" doesn't really mean anything here. Are you referring to the centroid? If anything that is a "more mathematical" concept than a midpoint. The use of this word here makes it look like you want to eschew the technical perspective in favor of the emotional, aesthetic perspective. But a centroid can be computed.
Same thing with the "too bright". Too bright based on what? Too bright for whom? Doesn't matter. Just follow these opin- I mean rules.
But apart from that, it is good advice, and I think the post gives a few more good rules of thumb too.
'Mathematical' alignment would mean centering on the basis of width or height, whereaas 'optical' aligment would adjust for the 'visual weight' of the item, which often 'feels' different.
For example, a 100px wide container with a 50px wide image within it, may not be appropriate to sit at the 25px->75px range. It may need to be slightly adjusted depending on the visual mass of the images.
Honestly these are excellent rules for design, and it's a bit funny in fact to see all the comments from people unable to process ostensible ambiguity in the rules, as though they are looking for a 'precision algorithm'.
I would say to anyone having difficulty processing why these are helpful rules, that it would be worth looking into design principless overall, it'll be a fun experience.
The documentary 'Helvetica' is pretty fun.
While the presentation may have struck you as pompous, as far as I can tell, the author is just trying to save people time of researching these things and make it more likely that people won't keep building terrible websites which are hard to read or use.
There are a few things like using slightly off-black or off-white that can be controversial, but overall this reads to me like a great place to start if you don't know any better.
A lot of these tips I've learned on my own just analyzing how designers I've worked with did things or noticing how sites I thought were aesthetically pleasing to the eye have done it. I kind of wish I had a summary like this a few years ago.
I loved this list.
In response the really elite players just go back to bending over to pick up the ball with their hand, signaling that they're too skilled to bother signaling how skilled they are.
HN falls hard into this in general. But then combine it with the disdain or even contempt it's fashionable to show towards subjective pursuits like aesthetics, and it gets dialed way up.
Like you said it's very predictable. Any time I see a link that has any sort of distinctive design, unique typographic style, or especially authorial tone, I know instantly what a handful of comments are going to be.
Truly elite players have ball boys and girls pick up balls for them.
Your point, though, reminds me of the Sneetches by Dr. Seuss
Once you realize that "appeal to nature" is a fallacy, you will be free.
Film/video/photography have them as well. Things like looking room, rule of thirds, and similar guidelines will pretty much always be safe. However, there are times when breaking those rules can look very awkward or very artistically done, but it can be telling when it was done from ignorance and just looks awkward or done with intent and the breaking of the rule reveals something else deeper.
Here is an essay I wrote on the subject:
https://www.dropbox.com/s/il89ks8jzw8wwsd/thirds.pdf?dl=0
To summarize:
1. The ROT has a bastardized history, that involves the artist Thomas Smith semi-completely misunderstanding the work of the artist Joshua Reynolds.
2. Smith re-wrote Reynolds's observation as a rule of prescription (e.g. 'walk only on the path') not as a rule of exclusion (e.g. 'don't walk on the path'). In aesthetics, the former generally do not have a long life expectancy.
3. Reynold's original observation was not restricted to composition. It addressed the artist's abhorrence of symmetry. Symmetry is understood as being a general phenomenon. Hence the following cases are all understood as being manifestations of symmetry...
- Two or more lights of the same colour
- Two or more diagonals of the same angle
- Two or more objects of the same size
a common use of thirds is in graphics use of lower thirds. it's just enough room without being too much. lower quaters would be small. lower halves would be too much. centering your subject in the first 2/3 and leaving the remaing third as looking room isn't bad aesthetically.
so maybe how you are interpretting the ROT is different than how i use it, but you definitely seem to have a grudge
Yup. I guess I do. Perhaps I overstated my feelings, but as an art and design teacher such non-truths are the bane of my life.
Almost all 2D aesthetic images (paintings, art photographs or page layouts) feature a region of interest (ROI) sometimes called the point of focus or the center of attention. Indeed, it is difficult to construct an aesthetic image that does not.
The so-called rule of thirds states that this ROI is best located one third across the vertical and horizontal axis.
However, the actual; truth is more complex and more interesting:
1. The horizontal axis ratio is not 1:2 but closer to 1.618. In other words, the golden ratio https://en.wikipedia.org/wiki/Golden_ratio [1]. For many purposes, one third is close enough to the golden ratio. However, in practice artists/designers tend to actively avoid exact fractions (third, half, quarter, seventh etc).
2. There is a difference between the placement on the vertical axis to that of the horizontal axis. The vertical axis seems to be tighter towards the edge (the bottom edge in a painting, the top edge in a flat design).
3. Mysteriously, there is a slight favoring of the left side over the right. This seems to have something to do with writing direction [2].
My own small-scale field research supports these observations (on 31 art students), as well as the work of a few others (below).
On a personal note... one reason I like lurking in Hacker News is for the precision of thinking that computer and software engineers exhibit. In my own field (fine art) 'received wisdom' is often taken as lore. These non-truths are harder to kill than vampires. Examples:
- Red recedes over blue (in a FG/BG pairing, one will always recede, but which would depend upon which red and blue you employ and how they are used).
- The complementary of red is green (yes it is the perceptual complementary in RYB space, but the mix-to-neutral complementary in RGB space is cyan).
- That the Pointillist painter Seurat employed optical mixing of primaries by placing them in close proximity, like a CMYK printer (he simply did not... there were other reasons he favored small dabs of paint in close proximity).
... I could go on.
[1] Amirshahi, S.A., Hayn - Leichsenring, G.U., Denzler, J., Redies, C.: Evaluating the rule of thirds in photographs and paintings. Art Percept. 2 , 163 – 182 (2014)
[2] Chahboun, S., Flumini, A., Gonzàlez, C. P., McManus, I. C., & Santiago, J.: Reading and Writing Direction Effects on the Aesthetic Appreciation of Photographs (2016)
He gives the good advice that you should only follow the rules when they make sense, and not otherwise. With that in mind, the two rules I disagree with the most are:
> Measurements should be mathematically related
> Elements should go in order of visual weight
Because, whereas most of the other rules are probably good to follow 90% of the time, these feel sort of arbitrary and opinionated.
I think making measurements mathematically related is a convenience and is often helpful, but for the same reason that optically centering things is better than mathematically centering them, I think you can easily ignore a mathematical relationship between values if it doesn't look as good. There is nothing inherent about humans that makes us prefer magic numbers, it's just that using them gives us an easy way to achieve visual consistency. If it stops doing that, ignore the ratio. If a grid or your font sizes look better nudged by a pixel or two in one direction or the other, do that instead.
With respect to ordering elements by visual weight, my only complaint is that he specifically says "heavier first", rather than "heavier first, or heavier last, both are fine as long as you're consistent". So, it's a nitpick, but it bothered me because it's an easy distinction to make.
For those unfamiliar, the rule is that the main focal point (the bit you want to draw the observer into the picture first - such as the eye of a the person in a portrait) of the picture should be at the intersection of one third from the edges of the picture.
Another "rule" is the "sacred geometry" where elements that have long edges are more appealing when they are in alignment either with other "lines" in the image, or with the edges of the image itself. I've taken many landscape photos with a camera leveled with a gyroscope stabiliser (or just a spirit level when on a tripod) but the resulting images didn't "pop" until they were rotated so the ground aligned with the frame, or the picture skewed so the walls of buildings were truly vertical.
But then I've seen some incredible photographs that break those rules and only work because they deliberately broke the rules - some quickly found examples (and article affirming my diatribe above :)) from natgeo: https://www.nationalgeographic.com/photography/article/break...
It reminds me of shuhari (守破離), an idea from martial arts and other traditional practices. It basically means "Follow the rules, break the rules, transcend the rules", and the characters mean "follow, break, transcend". The article hints at this too: follow the rules until you find a good reason not to. As it is aimed at beginners we should mostly be learning and following the rules until we have enough experience to start breaking them.
I really like how that lines up against one of my favorite maxims, "First do it, then do it right, then do it better."
Think about it: creating software is creating new rules. You gotta start somewhere and refine the system.
But if you learn an existing rule system, you need to follow it first, then break them, then transcend/improve them.
So shuhari is ”first do it, then do it right, then do it better” for professionals.
Designers will futz with kerning or whatever for hours.
守 does mean "follow" in the specific sense of "following rules", though it has no sense related to motion and most "following", including metaphorical following, would be represented by 隨. 守 mostly means "guard" or "protect", and I assume that's the metaphor that was extended to complying with rules and correctly performing rituals.
破 means "break", no problem there.
離 means "leave" as in "go away"; it does not appear to have any sense of "transcend".
Well, sure, in the sense that abandoning necessarily involves leaving, and 離 can refer to the leaving aspect of that. But "abandon" adds a lot of meaning that isn't generally present in "leave"; you might be looking for 棄, which is specifically about abandoning.
離 is a much more basic word having to do with distance and separation. But since separation and abandonment are closely related, it does appear to have been used in something resembling that sense. Consulting a dictionary of Middle Chinese:
> 離
> 1. to part from, separate, leave; e.g. 離緒 emotions at parting; 離居 leave one's home; also, live apart
> b) stray from, astray; estrange(ment); divorce oneself from; be or get free of; e.g. 離落 aimlessly astray, drifting rootlessly; 離書 bill of divorce; 離結 free from bonds
That gloss is the closest one I see to "abandon". (And also looks like a pretty good match to the usage above; you can imagine escaping the binding of the rules as a close analogue of escaping literal bindings.) Compare
> 棄
> 1. throw away, discard; put aside, leave behind; abandon, forsake; renounce, reject, abolish, get rid of; annul
(Why Middle Chinese? It's easier for me to look up, and it seems more likely to be reflected in Japanese than modern Chinese usage is.)
Optically is more center of mass, but ideal more 'center of visual weight'. Larger things are 'heavier', darker/more contrasty things are 'heavier'. Rounded things should extend over an alignment line a bit, flat shapes butt up against it (e.g. in the letters lO the O extends over the baseline slightly compared to the l, to visually connect with the baseline more).
In general the way it works is you align with whatever software says and you look at it and say does it actually look aligned or need minor adjustment? Because the point is to look aligned rather than to be mathematically correctly aligned. Like our letters above, they look more visually on the same baseline when they're not, then when all the rounded base letters sit most 'correctly' on the line.
The author is suggesting you use the mean X value of all the pixels in the shape, instead of the mode x value.
I'm sure fancier image editing software does this, but your eyes are pretty good at it too because it's just dividing the surface area in half, or thinking about it as the "center of mass" as you put it: where could you attach a string to this shape such that it doesn't tip over one way or another?
I think that this might be more true in screen based work than in printed publications. The focus of a printed page tends towards the top, but not necessarily at the top. A webpage is a different entity… not always seen in its entirety. The way that unity manifests would therefore necessarily be different. The order of weight would be better maintained at a local level, not global.
> Make outer padding the same or more than inner padding
This is one that is generally true, but not always. A framed drawing can often safely accommodate more space at the bottom than the sides and top.
Optical weight is nice and all (and a better simple rule than just spacing things by equal distance), but in the end you also have other phenomena (humans perceive horizontal lines different than vertical ones etc.)
Just the seemingly simple task of spacing out letters can get complicated pretty fast if it should look pleasing as in "as if there was no design there".
> I think making measurements mathematically related is a convenience and is often helpful
I think, in the absence of any guiding principles or rules, this is a good one to have. It's easier to say "Ok, this should be 4, 12, 36" then go from there.
I think heavier first is just because so many people make the same mistakes. Clearly, if you have experience, you can break the rules anytime you want and even make up your own.
not because not doing so would result in bad design decisions, but because it makes it much much easier for people unfamiliar with design work to:
- keep things consistent - stay within a balanced set of measurements that are easy to remember and expand - avoid ending up with a set of values that are too close to each other to meaningfully impact the design, but are therefore hard to maintain and identify
Heck, related by Wiener noise/integrated random walk is mathematically related, and if you watch 2D animations of random walks you'll soon develop a visual feeling for that.
However, there is sort of a reason to do it: baseline alignment. If you have columns with different contents, the heights of everything should work out so that the baselines continue to align over the page. You can adjust this manually, but a mathematical relation can be a shortcut there.
I could go over a list like this and apply every tip to each element of what I might be working on but that's annoying. Font-size vs line-height, element alignment, button contrast and padding etc feel like things that could be automated -- even if it just ends in "hey, I drew a bunch of lines over your page, maybe you find something that looks like it could be moved to one of them".
Does that exist?
I use software to build stuff, damn it. I want well-notated and labelled complexity. Stop making my tools look like an elementary school classroom in a dystopian short film.
I've done my fair share of front end dev and I like modern flat designs, however these text-only buttons take it too far.
"Keep body text at 16px or above
16px is the default text size in most browsers. Text below this size gets harder to read, so it’s safest to avoid it for body text. The higher you go beyond 16px, the easier the text is to read."
I'm able to read the content on every site I visit even when it has whitespace and images but to each their own. I'm glad Hacker News serves your needs.
That's the only point on his list that is 100% wrong. The rest is actually spot on.
Says a website using a painfully-large font size that results in a line length of only ~40-characters ;P. That said, despite using a much more reasonable font size, Hacker News goes out of its way to limit line length to ~40 characters even though there is extra margin it could be using to get up to ~50-60.
Now, I'm sure some people are going to balk and say that this website--and Hacker News--in fact have longer line lengths and I must be crazy, but the reason they look the way they do to me is because I am reading this on a phone... as are most people doing most of everything they do these days: using actual computers is now somewhat rare.
However, I honestly have no issue reading with a ~40 character line length! In truth, I am pretty confident that I prefer it to longer 60-80 character lines: I read books on my phone, and I have the font size set to reflow at ~40 characters per line, and if I move to landscape (at the same size) I find that difficult to track as the lines are simply too long.
Now, we might then conclude that this is somehow just obsolete advice caused due to a lot of designers having grown up during a time when people used to have devices (even computers) with larger screens and were maybe more used to seeing long lines of text on large sheets of paper, where obviously everything had longer lines than my narrow phone...
...but no: I'd argue that some of the best typesetters in the field, who had the strongest reason to care about optimizing for legibility and readability, worked for newspapers, and if you pull up a scan of an old paper--whether from the 1980s or the 1860s--you will find that they all prefer ~40 characters per line (and you will find the same with science journals and government registers and most magazines).
I will thereby claim that the only reason we put up with 60-80 character lines is because it feels like a waste on a widescreen monitor to enforce such a narrow column and the technology of scrolling makes it extremely awkward to have multiple columns (as anyone who gets angry at navigating PDF articles--almost all of which are typeset with ~40 characters per line--in a web browser experiences viscerally).
Not so much: https://imgur.com/a/T1hDP8c
I’m doing a ton of web design for documentation and for some reason I’m a little bit obsessed with this kind of thing right now.
Maybe there is an issue on your browser? I get between 70 and 80 characters per line.
Mea Culpa
This means developer built UIs, documents, etc. could look waaay better by following simple design (typography! included) guidelines.
I believe these guidelines exist, but there's no well defined, available, or well-known "grammar" (as in this type of grammmar https://vita.had.co.nz/papers/layered-grammar.html) and there's no set of rules.
With a proper grammar and rules we could go a very long way. Other examples are
"What every engineer should know about..",
https://12factor.net/,
https://semver.org/ etc.
Can you provide an example of a 20% creative decision that has no technical aspects?
These are the things I struggle with when designing generic corporate marking websites. I'm not a designer but I've worn the designer hat many times. I always warn my employer/client that I'm more of a technical designer than a creative one. Nowadays I just stick to application design since it's 100% technical.
Example: as someone who's more technical than creative I could have come up with the overall layout of the Excalidraw+[0] website but I don't think I would have thought about adding circles around keywords or the dashed line that leads users down the page.
[0]: https://plus.excalidraw.com/
For example, once the basic IA is worked out, you could have a phase of the project called "flourishes", where your knowledge of illustrative techniques, eye-tracking, colour theory and UX tricks and so on, guides the design. Along with business needs, communication preferences... Another phase could be "product photography" where knowledge of what makes a good photograph comes into play.
But yeh it's usually easier to get a professional designer who enjoys and does these things all day long!
Pure blacks only exist on OLED, and to a lesser extent with FALD (not relevant for text). What’s worse, IPS panels only have a nominal contrast ratio of 1:1000 or less. #000 already is only dark gray on them. Please, PLEASE, use pure black for text!
> pure white is too bright
I’d argue that the brightness of your display is turned up too high if pure white is too bright. It shouldn’t be brighter than a sheet of white paper held next to it, and normally we don’t claim that those are too bright.
I print a lot of books, and I find that a more "cream" colored paper is much more pleasant to read for an extended period of time. YMMV but if there's more than a paragraph of text involved I'd prefer a lower contrast ratio.
The benefit of white paper is that when you do require high contrast, you don’t need ultra-bright lighting to achieve it.
Standard brightness has a fixed value, adjust contrast in your designs, not in the settings of the screen.
Even if you're just a casual user, you should at least roughly configure colors, color temperature and contrast after changing the brightness.
That comparison makes no sense for emissive light sources such as screens. You could argue it for e-ink displays, but not normal screens where we watch mixed content such as videos and photos - where we want whites to be bright.
The "multiples of 8" for spacing and sizes is one such rule I follow and it is easy to remember. Some of the rules in the original article are harder to remember. Though I will remember the 16px as min font size idea.
Particularly padding and margins - I’ve only recently taken the time to study what makes a design look good vs looking off in terms of spacing, and have come to similar conclusions as the author.
I suspect if the rule against pure black on pure white were buried in the middle (or omitted) then the response would be warmer.
I'm not sure why it's so controversial among digital designers.
The same person taught me that "optical alignment is often better than mathematical alignment" (which is why the bottom of curved letters often falls slightly below the baseline if you look closely).
Assuming you're talking about the "Give me #000000 on #FFFFFF or give me death!" crowd, it's a kneejerk reaction to the cardinal sin of gray-on-gray content that is fucking impossible to read.
I happened to have a few iOS apps where true black is an option (which is desirable on OLED to save battery). A perhaps less common concern is eInk whose dynamic range is quite limited and for which #000000/#FFFFFF greatly enhances readability.
What does that _actually_ mean? Grey looks more 'natural'?
Notice that this also describes pixels on a display.
But remember, every rule is just a starting point. If you have a solid understanding of contrast, color, composition, usability, accessibility, and more, you have the freedom to experiment and try new things.
In my professional opinion, standardization and commoditization in design have their pros when it comes to production and usability. However, this approach is leading us towards a bland and uninteresting user experience.
I'm hoping that the emergence of XR will bring back some of the old-school "skeuomorphic" spirit of exploration, expression, and texture in design. If we keep relying solely on "best practices," we risk being replaced by automation.
And please, don't design UI without having a design background. Use some UI library or Tailwind/Bootstrap instead.:)
In the world of lean development and design sprints, the quality of UI is not the important part.
Maybe in the near future, only the best designer will survive the shift.
Maybe it's time overthrow the W3C and invent HTML6 already, and provide for some proper modern UI widgets instead of needing piles and piles of JavaScript UI-library-of-the-month that create widgets by hacking together a clutter-fest of div hell.
Stuff like <hamburger>, <tabset swipeable="true">, <img pinchzoomable="true" onclick="window.lightbox(this)" lowsrc="..." highsrc="..." ultrahighsrc="...">, <ul pulltorefresh="true" onrefresh="foo()"> should be part of it already, <button> should have more sane margins, font, contrast, and border radius choices by default, <hr> should be low contrast by default as the article says, and the default background and text colors should be #f2f2f2/#222222, and not #ffffff/#000000. Visual centering should be implemented in CSS with a neural net. Let's get standards with the beat.
Actually, I am utterly baffled that this is not the target of current neural net implementation. I expected some form of automation to emerge in this field first.
Instead, someone decided, that investing in generative "A.I." art and removing the human element from the illustration process is more important.:)
I'm a frontender in a two men team and we have a backoffice application that doesn't require nice ui but still would like to see wheter I can improve it with those rules.