Visual design rules you can safely follow

https://anthonyhobday.com/sideprojects/saferules/

by tontonius • 3 years ago

1978 317 3 years ago

rayrag3• 3 years ago

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.

https://anthonyhobday.com/sideprojects/

https://anthonyhobday.com/sideprojects/visualtechniques/

https://twitter.com/hobdaydesign

leephillips• 3 years ago

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.

pessimizer4• 3 years ago

Does he want you to guess it from the URL?

This is not difficult.

rayrag3• 3 years ago

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.

chrisweekly• 3 years ago

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.

itsoktocry• 3 years ago

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.

milliams• 3 years ago

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.

eikenberry2• 3 years ago

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.

pessimizer4• 3 years ago

That neither occurs in nature and they seem fake/artificial to the viewer.

It also doesn't occur on monitors. White and black on a screen is not pure, screens aren't that good.

navane• 3 years ago

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.

Dalewyn2• 3 years ago

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.

kuschku14• 3 years ago

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.

account423• 3 years ago

If your monitor is connected via HDMI than it might actually be your GPU assuming the monitor is a TV and sending limited range colors only (16-235).

MrOwnPut• 3 years ago

Normally yes, but keep in mind if you use pure black/white on a scrollview it will lag the screen and look choppy.

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.

alpaca128• 3 years ago

I've used OLED friendly dark modes in phone apps and they're visually extremely boring. Not bad but I wouldn't use it without the battery bonus.

charrondev• 3 years ago

I actually find pure black to a problem on most oled displays if you have a mix of black and gray in something scrolls.

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

jamesrom2• 3 years ago

Agreed, there are many reasons to choose pure black and pure white.

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)

kentonv3• 3 years ago

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.

pphysch• 3 years ago

Yes. Users can adjust their screen brightness to their personal taste.

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.

5424582• 3 years ago

I think that the idea that most users will adjust their monitor to make my website look good is unrealistic.

ericmcer• 3 years ago

I like the softness, just #000000 on #ffffff is kinda harsh. Look at HN the off-white background makes it less assaulting on your eyes.

CodeWriter23• 3 years ago

I’m sure it’s fine for whippersnappers with newer eyes. As people’s eyes age, contrast is key. And by that I mean as my eyes have aged.

rayrag3• 3 years ago

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.

runsonrum• 3 years ago

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.

yoyohello13• 3 years ago

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.

jeltz• 3 years ago

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.

strken• 3 years ago

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.

klabb32• 3 years ago

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.

intrasight• 3 years ago

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.

richardjam73• 3 years ago

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.

spion2• 3 years ago

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.

gond7• 3 years ago

Designer here.

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

chrstphrknwtn4• 3 years ago

For black text to be an issue, surely this is a sign that your screen is too bright?

mattkrause• 3 years ago

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.

kentonv3• 3 years ago

This sounds like pseudoscience to me. I regularly spend all day reading full-black-on-full-white and I don't experience this problem.

eirikbakke4• 3 years ago

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.)

avereveard4• 3 years ago

that depends on lighting conditions

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

mhandley• 3 years ago

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.

exodust6• 3 years ago

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.

FullyFunctional3• 3 years ago

Also, both my OLED and eInk prefer true black, unnaturalness be damned (the former for energy, the latter for contrast).

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

btheshoe• 3 years ago

notice how hackernews uses an off white for its background? do you find it hard to read?

mogoh2• 3 years ago

Not GP, but “Yes.” and “Yes.”

buttscicles• 3 years ago

I agree with the off-white/black reducing eye strain but HN is not a good example of readability in any way!

mogoh2• 3 years ago

I agree. The given reasoning is also bad:

“Pure black looks unnatural on a screen, and pure white is too bright.“

Even though it looks “unnatural“ at least I can read it.

rkangel• 3 years ago

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!).

alanbernstein• 3 years ago

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.

whywhywouldyou2• 3 years ago

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.

nequo• 3 years ago

"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.

jasmer3• 3 years ago

? 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.

The documentary 'Helvetica' is pretty fun.

travisjungroth2• 3 years ago

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.

whywhywouldyou2• 3 years ago

I love when a series of opinions is presented as rules. It really lets you know how important the author believes they are!

s1mon• 3 years ago

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.

sbuk2• 3 years ago

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.

Am4TIfIsER0ppos• 3 years ago

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?

adamrezich• 3 years ago

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.

allenu• 3 years ago

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.

helmholtz2• 3 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 loved this list.

giraffe_lady• 3 years ago

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.

dylan6043• 3 years ago

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.

jamesrom2• 3 years ago

I'm sorry, but stop it with the "thou shalt not use black on white". _That's_ the predictable evergreen amateur design bro take.

Once you realize that "appeal to nature" is a fallacy, you will be free.

dylan6043• 3 years ago

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.

Daub4• 3 years ago

The rule of thirds (ROT) is one of the most pernicious lies ever foisted upon pictorial aesthetics.

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

karaterobot• 3 years ago

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.

IgorPartola• 3 years ago

I would also say the ordering rule is just plain wrong. In a modal or a wizard I can easily see doing something like this as a good option:

    [Back]     nevermind      [NEXT]

motoxpro• 3 years ago

That example is a nightmare.

wlonkly• 3 years ago

That specific example is spatial, though. Assuming left to right writing, "next" is on the "forward" side, and "back" on the "back" side.

blululu• 3 years ago

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.

Jenk• 3 years ago

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...

deafpolygon2• 3 years ago

IMO, that photo doesn't break the rules. The image is still somewhat segmented into thirds. Maybe transcending the rule.

laurieg• 3 years ago

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.

mock-possum• 3 years ago

shuhari ... basically means "Follow the rules, break the rules, transcend the rules"

I really like how that lines up against one of my favorite maxims, "First do it, then do it right, then do it better."

thaumasiotes2• 3 years ago

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".

Throw10987• 3 years ago

I have to add “If you know the way broadly you will see it in all things” from Musashi which conveys a similar sentiment.

hnbad2• 3 years ago

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.

windows2020• 3 years ago

Anyone have information on the mathematics behind optical alignment?

meheleventyone• 3 years ago

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.

thiht• 3 years ago

Feels like the vertical line goes through the barycenter of the shape

Daub4• 3 years ago

Elements should go in order of visual weight

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.

somat• 3 years ago

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."

IIAOPSW3• 3 years ago

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.

atoav• 3 years ago

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".

deafpolygon2• 3 years ago

> Measurements should be mathematically related
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.

krsdcbl• 3 years ago

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

neovive• 3 years ago

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.

thanatropism• 3 years ago

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.

kqr• 3 years ago

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.

luckylion• 3 years ago

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".

Does that exist?

marssaxman• 3 years ago

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.

quacked2• 3 years ago

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.

enlyth• 3 years ago

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.

quacked2• 3 years ago

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.

alspaca• 3 years ago

I liked the piece overall but this felt like granting an imprimatur to dark pattern design.

xkcd19634• 3 years ago

I recently watched Cowboy Bepop and was astonished how pleasantly the complex and alien UX/UI looked

eric4smith• 3 years ago

Cough, cough... HN?

"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."

krapp2• 3 years ago

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.

xigoi7• 3 years ago

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”.

Angelore• 3 years ago

One "feature" of an aggressively simplistic design is that it's relatively easy to customize. Here is my personal take (I use stylus extension for firefox to inject the css) https://gist.github.com/Angelore/77999cc2152dfbcd38f18ba6a7a...

AdrianB12• 3 years ago

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.

account423• 3 years ago

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.

kuschku14• 3 years ago

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.

huhtenberg• 3 years ago

Well spotted.

That's the only point on his list that is 100% wrong. The rest is actually spot on.

saurik3• 3 years ago

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).

tomcam2• 3 years ago

Hacker News goes out of its way to limit line length to ~40 characters

Not so much: https://imgur.com/a/T1hDP8c

saurik3• 3 years ago

I mean in the same place: in portrait mode on a phone (hence the second paragraph of my comment where I anticipate people saying I am wrong).

lelanthran2• 3 years ago

Says a website using a painfully-large font size that results in a line length of only ~40-characters ;P.

Maybe there is an issue on your browser? I get between 70 and 80 characters per line.

xigoi7• 3 years ago

Did you read the whole comment you're replying to?

saurik3• 3 years ago

It sounds like you didn't read the second paragraph of my comment ;P.

random3• 3 years ago

(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

"What every engineer should know about..",

https://12factor.net/,

https://semver.org/ etc.

exodust6• 3 years ago

"80% of design is technical and 20% is creative."

Can you provide an example of a 20% creative decision that has no technical aspects?

sibit• 3 years ago

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.

[0] https://plus.excalidraw.com/

layer84• 3 years ago

Pure black looks unnatural on a screen

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.

humanizersequel• 3 years ago

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.

layer84• 3 years ago

I usually adjust the lighting so that reading is comfortable. The same can be done with screen brightness.

The benefit of white paper is that when you do require high contrast, you don’t need ultra-bright lighting to achieve it.

exodust6• 3 years ago

"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.

balaji1• 3 years ago

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.

kiawe_fire• 3 years ago

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.

TAKEMYMONEY• 3 years ago

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).

Dalewyn2• 3 years ago

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.

spiderice2• 3 years ago

I don't think it is controversial among designers. It seems controversial among a tiny subset of developers who definitely aren't designers.

chrstphrknwtn4• 3 years ago

Pure black looks unnatural on a screen

What does that _actually_ mean? Grey looks more 'natural'?

manchmalscott• 3 years ago

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.

chrstphrknwtn4• 3 years ago

Things that are 100% black and 100% white don't actually exist in the real world.

Notice that this also describes pixels on a display.

stayux3• 3 years ago

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.:)

JohnFen• 3 years ago

But I have to say -- there are a lot of people with a design background, working for major software companies, that produce crap user interfaces too.

stayux3• 3 years ago

The craftsmanship requires dedication, critical thinking and hard work.

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.

dheera• 3 years ago

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.

stayux3• 3 years ago

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.:)

epolanski• 3 years ago

I'm gonna give those rules a go tomorrow.

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.

GloriousKoji• 3 years ago

Lower letter spacing and line height with larger text. Raise them with smaller text

Am I the only person who enjoys dense text?

travisjungroth2• 3 years ago

For whatever density you like, it’ll probably look better that density scales sublinearly with font size.

aimor• 3 years ago

I was hoping someone posted this, you're not alone. I hate when lines are spaced so far apart, I think it's actually harder to read but maybe that's just because of all the scrolling. Decreasing the line height for headings is good advice (I think most of the article is pretty good), but when I compare the leading between books and websites it's as if the internet is formatted like learning-to-read children's books.

squokko• 3 years ago

These are excellent tips for a programmer who's never thought about design to make something that looks workable. Will you get better results for a few hundred dollars from Upwork? Yes. But before you get to that stage, these rules are good.

User23• 3 years ago

My favorite thing about this is how it recapitulates why there are twelve inches in a foot.

kristopolous• 3 years ago

I do almost all of these. I'm not a designer but I follow a similar maxim - everyone can be trained to do serviceable design that's good enough.

teki_one• 3 years ago

First step should be: get a cheap TN display and make sure that the page is readable.

(The buttons are horrible, but I gave up the hope that modern design will care about usability.)

keithalewis• 3 years ago

I have an idea for a TV show. Have people preaching their "knowledge" actually use what they create. Every time they can't figure out how to use it have an audience member whack them with a nerf bat.

SergeAx• 3 years ago

Use near-black

I am not buying OLED only smartphones since first Samsung Galaxy to follow this controversy. Black should be black.

zozbot234• 3 years ago

Yes, the author also says that visually closer elements should be brighter, even in dark mode. If you use pure black for the overall background and dark gray as the fill-in color for frames/highlights, this agrees with the author's recommendation and still leaves you with plenty of contrast to play with.

I also agree that pure white should almost never be used in dark mode - it's usually reserved there as a highlight color, for critical warnings that should immediately alert the user.

chriddyp• 3 years ago

Curious to see Apple using real black as background on their home page but rgb(29, 29, 31) for their black text.

FullyFunctional3• 3 years ago

O L E D

kuschku14• 3 years ago

That's how it should be – for images, #000000 is fine, but for text, you'll want slightly lower contrast (between #101010 and #222222)

eirikbakke4• 3 years ago

I think the designers are coming from the CMYK world of newspaper printing and such, where, due to alignment issues, text must be printed using a separate black ink ("K" black) even though it could theoretically be produced by mixing Cyan/Magenta/Yellow. This is due to the difficulty of perfectly aligning three different color plates, as well as imperfections in the ink.

In printed photographs, on the other hand, all four inks can be mixed to produce a darker black than is seen in the surrounding text ("rich" black). Thus, in newspapers, the contrast ends up being higher in photos than in text.

But this is due to limitations of paper printing technology--none of this applies to computer displays, where R/G/B components are always perfectly aligned.

rbanffy2• 3 years ago

I would expect Apple tuning their website to their displays.

XorNot• 3 years ago

Urgh, I wish people would just pure black. The number one CSS style hack I end up applying to websites is to shift "grey" text to just solid black, and the difference in legibility is dramatic.

eek2121• 3 years ago

FYI I recommend following U.S. gov't standards: https://designsystem.digital.gov/documentation/developers/

Dark/light mode is fine and all, however be wary of accessibility. Note that the US actually even publishes it's own CSS/JS framework similar to bootstrap. I believe (but I am not positive) it is here: https://designsystem.digital.gov/

I don't claim it to be perfect, but the last time I had the opportunity to use it, it put other UI/UX frameworks to shame.

at_a_remove• 3 years ago

Back when I still did web stuff, at one point I had made a special accessibility stylesheet one could set for the university. Nothing crazy, just bigger fonts, higher contrast, and some of the guidelines at the time were going for "light text on dark backgrounds," so I implemented that as well. Got rid of a lot of the little crufty visual design elements the designers (who were not me but set thhe rules) that look pretty but end up being kind of irritating. Couldn't get anyone to go for it. Just a nice click for "accessibility mode," you know?

I've talked about this on HN ad nauseum but it was so frustrating to have this issue ignored. I am in a different field now and try not to let my employers know that I can do web stuff because, but if I ever got back into it, I think I would have to have some kind of employment contract section covering YES WE ARE GOING TO DO THIS I DON'T CARE IF IT TAKES MORE TIME with some kind of slideshow presentation everyone would have to endure each year titled "Your Audience Isn't Just Teens with Gigabit Connections Who Have the Visual Capacity to Discern Dust Particles Drifting By."

EricE2• 3 years ago

I'm a huge fan of it too - their section on color should be required reading by any designer: https://designsystem.digital.gov/design-tokens/color/overvie...

Whats really nice is it's not just theory, but a ready to deploy system. You don't have to adopt it 100%, but you can drop it into your environment and then tweak it to meet your needs, rather than having to start from scratch.

8note• 3 years ago

If you saturate your neutrals you should use warm or cool colours, not both

This one seems weird. The left option is much clearer than the right one

nomilk• 3 years ago

For any complete design noobs, like myself, I asked HN for a crash courses in design, and the top recommendation was Refactoring UI by Adam Wathan and Steve Schoger.

I studied that ebook over 5 days (it would be possible to read in 1 day), took notes, and found it a delight to read and incredibly unpretentious (sophisticated ideas are conveyed in simple side-by-side comparisons of right vs wrong ways to do things).

[1] https://news.ycombinator.com/item?id=31889958

stakhanov• 3 years ago

I recently paid for Refactoring UI, after the rave "reviews" it's getting on HN, but was quite disappointed to find that it's mostly about design in general and doesn't have a lot to say about design problems that are specific to UI and nothing at all that takes into account the time axis of interaction design. I pretty much knew all of this stuff already from having read a much cheaper introductory book on visual design that was written with print in mind.

I'm also a bit displeased that "UI" seems to mean "webpage" these days (not even SPAs, but just laying out hypertext and graphics on a screen), whereas I always considered that to be a special case of UI that's so trivial that it almost needs to be thought of as a "degenerate" special case. It used to be called "web design" but that's probably too 90s and wouldn't sell books nowadays. I actually wanted to learn about desktop GUIs, making this wholly the wrong book for me.

TuringTest2• 3 years ago

I self-taught those principles decades ago with "About Face 2.0", "The Design of Everyday Things" and "Don't Make Me Think". Though old, I know they provide solid principles because I still find them relevant today.

These come from an era before HCI was a professional discipline taught in schools. I suspect newer books don't teach these general principles because they take for granted that a professional will have learned them already through their formal training, so they can focus on specifics.

https://www.amazon.com/About-Face-2-0-Essentials-Interaction...

https://www.amazon.com/-/es/Don-Norman/dp/0465050654/ref=pd_...

https://www.amazon.com/-/es/Steve-Krug/dp/0321965515/ref=pd_...

archydeb• 3 years ago

I thought the OP was great, and am also a fan of Refactoring UI.

What's the "next level" from these handy rules of thumb? I'm looking for a UI 201

ornel• 3 years ago

I don't understand why there isn't a "home" link somewhere in most pages of his website, the only way to see more of his stuff is to manually edit the URL. I really like his content and respect his skill, so there should be a good reason right?

creata• 3 years ago

Has anyone formally defined (something close to) the idea of the "visual center", as described in the article?

I'm guessing that the centroid of the shape isn't the answer.

quickthrower2• 3 years ago

Makes me think of a guest complaining our (spirit-level levelled) pictures aren't level and adjusting them by hand/eye.

SamBam• 3 years ago

Are all the horizontal and vertical elements near your picture level? i.e. the ceiling (often not level) the floor (ditto), the door frames, etc. If those aren't then your "level" picture will look uneven.

onos• 3 years ago

Did some googling and just found a bunch of assertions for where the visual center is in an image. Sounds like it’s “where people perceive” the center to be and that’s about as good a def as is possible.

Izkata4• 3 years ago

My reflex was "center of mass", but with some searches people mostly say in a flat 2d figure it's the same thing as centroid.

davnn• 3 years ago

Not really formal, but there are a ton of books and articles that describe such things from a psychological standpoint. I can recommend „Dondis, Donis A. A primer of visual literacy. Mit Press, 1974.“ to anyone interested in concepts such as those in the linked article.

IIAOPSW3• 3 years ago

My first guess is it is the centroid. My second guess is because the example isn't a simple convex shape, the brain sees it as two shapes glued together and you want the barrycenter of those.

SCAQTony• 3 years ago

As a designer and no a fine artist, pure black type can be used and looks great on this hexadecimal: #E0E0E0

xkcd19634• 3 years ago

"Hard divides catch the eye" marks the hard divides red

zacharachnia• 3 years ago

I agree, and another thing too! I think that lorum ipsum dolor.

Existenceblinks• 3 years ago

The brightness difference between background and container should be within 12% for dark interfaces, and 7% for light interfaces

I only find this useful to me.

Some others are ok. Some are I already do. Some are just natural (easy to feel that it's off)

moron4hire• 3 years ago

Pure black looks unnatural on a screen, and pure white is too bright.

Your screen does not reproduce pure black or white. Contrast ratios on LCD displays are already bad enough. No need to make it worse. People have contrast and brightness controls on their displays. Stop making comfort decisions for them. Let the user choose for themselves.

kuschku14• 3 years ago

Your screen does not reproduce pure black or white

The black on my screen is darker than the darkest dark in my environment, and the white is brighter than looking right into my ceiling lamp.

For all intents and purposes, it does reproduce pure black and white.

For readability, the contrast range should be clamped to that of paper – pure black ink on white paper looks the same as using #444444 on #eeeeee on my (calibrated) monitor.

To compensate for people with misconfigured monitors, extending the range to the colors mentioned in the article makes sense, but not any further, as that's going to be painful to look at.

Please properly configure your monitor instead. To be able to accurately represent images, the contrast of #000000 to #ffffff needs to be much larger than the contrast of any text in any reasonable situation.

kuschku14• 3 years ago

And before I get the suggestion "just change your screens configuration to only reproduce colors visible on paper":

It's useful to be able to reproduce colors far beyond the range of print. Not everything IRL is colored by reflective pigments. From sunsets to iridescent birds, there's lots of colors and contrast ranges available in real life that your screen should accurately produce as well.

e-dant• 3 years ago

Programmers have a lot to learn from designers.

Programming is a form of expression between a human and a system. We should finally start treating it that way.

Write something beautiful.

xkcd19634• 3 years ago

Programmers write, designers design. If you do both you are a mixture of both.

sbuk2• 3 years ago

Both solve problems. The OP is absolutely right, there are more parallels than differences.

ww520• 3 years ago

These are good UI design rules, especially for non-designers.

Daub4• 3 years ago

An effective collection. Around half of these principles can be generalized as one form or another of background/ foreground contrast.

auspex• 3 years ago

Is there a “who wants to be hired” for UI/UX designers? We have been looking for a good contract designer.

noduerme4• 3 years ago

I started reading this and hoped, but never expected, to see something like "everything should line up with something else".

This rule actually can be used to generate all the other rules about spacing, kerning, leading, font size, padding, etc. It was the first true piece of "secret" design knowledge I was handed down when I went to work at an ad agency at 15, having already been proficient in Quark and PS/AI but without any formal design training. The rule about alignment based on eye / weight versus mathematical alignment also flows naturally from this.

Interestingly, it was the agency director who was not a true designer who told me this; I believe it was her one and only rule for judging design, and it worked quite well.

In the years I spent studying design and typography in art college later on, I never once heard anyone mention this rule. But it is the very first thing I bring up with designers I hire.

One thing that happens when you follow this rule is that you get an automatic grid of sorts, that isn't necessarily constrained to a standard way of breaking up grids. Using the same measurement increments (e.g. 10 pixels padding, or 1/2" gutters) as the multiple by which things that are lined up take their space from each other, you can get regularity and readability without boredom even in pretty wild designs.

Excellent job by this author putting these ... essentially rarely spoken, infrequently taught, but fundamental and quotidian design rules into a clear, digestible format. These are all things that are sort of assumed in design agencies but are rarely elaborated on so clearly.

jasmer3• 3 years ago

"I never once heard anyone mention this rule. "

That's because designers use guides. Things that line up with guides, line up with other things.

So putting it as the later, aka 'lining up with other things' becomes rather the indirect way of putting it.

noduerme4• 3 years ago

Guides are a bit of a crutch, and smart guides are often a hazard (precisely because of mathematical versus visual centering being different in many cases). They're useful to check later if things line up to the pixel, but they don't help with e.g. creating rhythms between leading and images to find the perfect line height to match the perfect image width/height so that the top and bottom of an image aligns with the ascenders and baseline of the text that flows around it. Guides will not decide for you which element something else should line up with, nor which side of an element to align. Sometimes aligning the left edge of something with the center of something else is appropriate, for example.

It's true that small imprecisions in lining things up create subconscious disruption - but most people who've done years of design can spot a 1px misalignment like that without guides. The rule that everything should line up with something else doesn't refer to technical precision. It refers to how you construct and think of where to place each element in your overall design, well before you get to the stage of pixel-level adjustments.

Cthulhu_• 3 years ago

One of my first real learning experiences with implementing a design was when I was building an app. We got a design from the designer, I implemented it and thought, this looks pretty good.

I showed it to the designer and he basically said it looked like shit. I was like, what, why? He took a screenshot, dragged it into Sketch and used some of those little red rulers to point out that in his design, everything was aligned to the left with a fixed padding to the side, whereas in my implementation it was all over the place.

Basically, I didn't have the eye for design or alignment yet. I mean I still don't and I'd rather not anyone ask me to do visual design, but I got better at it by being taught what to look for.

"Teaching how to see" is an important lesson that a lot of developers haven't had yet, I think, which is why there's tropes about UIs designed by developers.

tempestn3• 3 years ago

Good learning experience, though one might argue that the original design should have noted those sorts of important aspects, rather than expecting them to be obvious. Probably would have saved you both some effort.

noduerme4• 3 years ago

Yeah, you have to learn to see those things... but don't be hard on yourself. HTML was never meant for doing anything resembling print layouts, and yet we're expected to do it for a dozen different screen sizes, using one hack on top of another - tables, floats, flexbox, grid, absolute positioning...

When I got moved from doing print design to the early web, we'd literally design an entire website at one size in Photoshop and use slices to cut all the interactive/hover bits out and put it all in a table. Nothing about web/app design has gotten simpler since then. Compare with the absolute ease and freedom of working with a layout program like InDesign or Illustrator, targeting a known print size. It's easy for a nontechnical designer to look at a mockup and say what's wrong with it, but it's infinitely harder to know what levers to pull in the giant puzzle of CSS and HTML to attain all the details of the static design. And sometimes the static design is just a launch point. In a case like that, if I were in the graphic design / art direction role, I would provide a logical style sheet, basically a list of rules about alignment and sizing, because I wouldn't expect the coders to be able to visually extract my intent or what I considered important just from looking at a comp.

bambax• 3 years ago

Very true! When some elements aren't aligned with something else, they seem to be falling apart; it makes viewers ever so slightly sick; they don't recognize it, but it's real.

dmalik• 3 years ago

Agree with everything lining up. All good products/sites should follow a spacing system. This article does a great job if you want a good starting point - https://medium.com/eightshapes-llc/space-in-design-systems-1...

Once developers know this system exists, coding front ends becomes a lot easier.

vitaflo2• 3 years ago

In the years I spent studying design and typography in art college later on, I never once heard anyone mention this rule. But it is the very first thing I bring up with designers I hire.

This is interesting because when I was in design school we had entire courses on Swiss grid systems. "Grid Systems in Graphic Design" by Josef Müller was like the holy bible.

That said there are a lot of design peers that I've worked with that were either never taught or simply ignore this. I wonder if it's a generational thing and simply not taught anymore (I went to design school in the mid-90's).

Of course one downfall of having worked with various grid systems for so long is I can tell when something is off by one pixel and then cannot unsee it.

munificent• 3 years ago

Grid systems are one way of generating alignment, but not the only way. They're a means to the end, but it's helpful to focus on the end itself, which is that elements are aligned with each other.

noduerme4• 3 years ago

We also studied Swiss grids in design school. But much of the class was about how to use and break them; and they were presented as sort of one dish on a buffet of design philosophies. Practical alignment of everything with something else - for commercial work, especially - wasn't presented as a holistic rule. It would more just be an unstated byproduct of using a grid.

WA2• 3 years ago

Isn’t the rule "Closer elements should be lighter" a contradiction with "Keep container colours within brightness limits"?

Should a background be darker than the containers it holds? Or should containers be designed as if they are behind a background, basically a hole in the page?

makach• 3 years ago

If you want to be boring, follow the rules.

Some of the best design, art, music, code breaks all the rules.

Don't misunderstand me, boring is good, predictable and comes with less noise. However, there will be fever prices and innovation will suffer.

avereveard4• 3 years ago

well this is "safe design rules for developers" so I guess that's where being formulaic it comes from, to which "just pay a designer" is a fair answer.

tpmx• 3 years ago

The designers of the Amazon Prime Video app logo should read the article:

https://apps.apple.com/us/app/amazon-prime-video/id545519333

HellDunkel• 3 years ago

Like many of you i was at first sceptical but this is indeed a good list.

avereveard4• 3 years ago

Use near-black and near-white instead of pure black and white

sure, I bought a hdr monitor specifically to have graysh blacks and washed out whites.

swyx• 3 years ago

- Use near-black and near-white instead of pure black and white

- Saturate your neutrals

- Use high contrast for important elements

- Everything in your design should be deliberate

- Optical alignment is often better than mathematical alignment

- Lower letter spacing and line height with larger text. Raise them with smaller text

- Container borders should contrast with both the container and the background

- Everything should be aligned with something else

- Colours in a palette should have distinct brightness values

- If you saturate your neutrals you should use warm or cool colours, not both

- Measurements should be mathematically related

- Elements should go in order of visual weight

- If you use a horizontal grid, use 12 columns

- Spacing should go between points of high contrast

- Closer elements should be lighter

- Make drop shadow blur values double their distance values

- Put simple on complex or complex on simple

- Keep container colours within brightness limits

- Make outer padding the same or more than inner padding

- Keep body text at 16px or above

- Use a line length around 70 characters

- Make horizontal padding twice the vertical padding in buttons

- Use two typefaces at most

- Nest corners properly

- Don’t put two hard divides next to each other

mrtechniques• 3 years ago

This is absolute dogshit advice LOL

Aachen• 3 years ago

I've noticed that font size is contemporary. It used to be a lot smaller when people had smaller resolution monitors, which seems counterintuitive because it ought to be harder to read with fewer pixels to render those tiny characters. In twenty years, it might be different again. The trend is to larger font sizes, and I've noticed things are already adjusting to that and if you've got a traditional small font size, it'll simply be hard to read. We're basically scaling up interfaces as a whole, slowly, while all the advice is is to increase font size to some arbitrary minimum for readability.

prennert• 3 years ago

I bet if the font size was given in pt instead of px it would be mostly constant. Because you need a minimum physical size of the letters to be able to read them (like the test at the optometrist).

As you get bigger resolution on standard sized (computer) screens, increasing px gives you the same physical size of the letters with more and more detail around the edges etc.

account423• 3 years ago

For CSS, both px and pt are (supposed to be) physical sizes: 1 px = 0.75 pt

1 px = 1 pixel was the original intention but has not been true for a long time now.

The problem is that some people use HDPI screens without (adequate) display scaling - likely to recover screen space from existing bloated desings - and then base their own designs on that. So neither px nor pt end up referring to physical sizes in practice.

roelschroeven• 3 years ago

I have the impression that it's more than that. Many websites these days allow me to see less text at a time on a 27 inch monitor then I had 35 years ago on a 14 inch monitor. More and more websites look like those books for very young children, with text and line spacing so large that only a few paragraphs (or sometimes not even that) fit on the screen.

mitchdoogle2• 3 years ago

Wouldn't smaller fonts render bigger on old monitors? Higher resolution means you have to use a bigger font. And now you run into a 15 year old website now and then and text looks tiny

vitaflo2• 3 years ago

This is correct. I had a 15" CRT that was 800x600 in the late 90's that I did designs on, so I used a 10px font. Now I have a 15" laptop screen that is 1920x1080 so of course I'm not going to use 10px fonts anymore.

caporaltito• 3 years ago

Excellent. This is really the ABC of UI design.

TuringTest2• 3 years ago

This is the ABC of UI style. Design, meanwhile, is the process of establishing goals for a user interface and making sure that the artifact you build serves those goals. Readers please be aware of the difference, as there's a traditional confusion among both terms going on.

A UX professional should learn about both perspectives and know how to apply both.

ecmascript• 3 years ago

I love these kind of cheat tips that I can bring up whenever I design, thanks for this!

tudorw• 3 years ago

It's good advice, though I'd set the inner radius a little higher, that is the only element that doesn't quite sit right with me.

lenkite• 3 years ago

Interestingly the mathematical alignment feels less jarring to me. Also tested with a few other people. Maybe this is cultural.

boxed3• 3 years ago

As elements on the screen get closer to the user, they should get lighter. This applies to both light and dark mode UIs, because it matches how the real world works.

I am looking around and this seems to me to be a straight up lie. In fact, I can clearly see the opposite if I look out the window. Objects further away get LIGHTER, not darker.

Very strange to write something so trivially false with such confidence. Like he would have written "objects fall up"!

choult• 3 years ago

Try looking at the examples thinking they have depth, oriented so their depth is directly heading away from your eyes.

The one with dark on top looks like a tunnel to me; the one with light on top looks like items layered on each other.

boxed3• 3 years ago

The examples cheat. They start with a dark background and then the next layer becomes lighter, then darker again.

zero_iq• 3 years ago

That's true for very large spaces/distances (except at night) where atmospheric scattering comes into play, but consider looking at a flat surface with stacks of objects on it. Lower elements are typically more occluded from lighting due to shadows from higher and neighbouring objects (ambient occlusion), with objects closer to you getting more illumination.

The brain is known to make use of such cues to gauge depth, and it's used in several optical illusions. (You can even make use of this principle with flash photography techniques to create approximate depth maps for surfaces. It's quite effective.)

I would argue that a model based on close distances of stacked items (e.g. stack bits of card or paper) is generally a better model than one based on large outdoor spaces, as it is a closer analogy in most situations. (Reading on-screen being reading off a relatively-close surface.)

But both can work. Look at screenshots of a game such as Spelunky: dark backgrounds, light foreground objects. The eye is drawn to the lighter surfaces and can ignore the darker background. But if the background was a distant landscape (e.g. Rastan -- don't know why that was my first thought... showing my age!), rather than a relatively close cave wall, your approach of desaturated lighter backgrounds might work just as well, as it would be more realistic. And at night, the opposite would be true.

boxed3• 3 years ago

Shadows are a very different thing though. The shadow of a playing card lying on top of another playing card does not make the entire lower card darker.

bromuk• 3 years ago

Agree with them, however I think true black #000000 is useful in this day and age on OLED devices. Having something fade in to the bezel of the device is a nice design statement.

mitchdoogle2• 3 years ago

Much of this is current design trends, or even trends from 10 years ago in some cases. I see a lot of Google's material design here.

bearmode• 3 years ago

Speaking as an (ex) graphic designer myself, most of these are very good rules of thumb.

camillovisini• 3 years ago

Last year I've read a book by architect and design theorist Christopher Alexander. He introduces a collection of fundamental properties of wholeness - the Fifteen Fundamental Properties from which life in objects and buildings emerges. I tried to capture the essence of each property, mostly for my own reference I put them here https://camillovisini.com/article/fifteen-fundamental-proper...

ceeam• 3 years ago

Starts with > use low contrast Didn't read further.

hrnnnnnn• 3 years ago

It actually starts with "use near-black and near-white instead of pure black and white".

Near black against near white is high contrast.

josefrichter• 3 years ago

Nah. Use black and white freely. They are colors too.

SomeHacker442• 3 years ago

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.

batushka3• 3 years ago

Author should be used for making soap for the first advice of using near black. These near black texts are KILLING eyes when reading them.

mahoro• 3 years ago

As a software engineer who occasionally creates interfaces, I appreciate these kinds of rules a lot.

The most valuable thing is that it gives me the instruments to think and reason about my designs.

Many thanks to the author!

wink• 3 years ago

I'm close to 40 now and I'm not using 8pt pixel fonts anymore.

But the advice to use 16px normal text fonts was probably written by someone on a mac or other hi-dpi display. On Windows and Linux without 4k I find it horrible. So you're shifting from "not large enough for 50% of your users" to "too large for 50% of your users" - unless you know your user's hardware...

The rest is nice but this grinds my gears.

pxoe• 3 years ago

it seems to be bit too opinionated and kinda overly exact in values, in some places. it's eager to go for some kind of look it prefers, instead of being more general (for it to be more flexible to fit within people's own tastes, preferences, and design systems), mostly going for more 'spacier values/look'. even in the first rule, with the 'near-black' just being...gray. picking #222 and trying to pass that off as 'near-black' when #111 is just right there, is a choice. #f2f2f2 as a "near-white" as well, that is not near-, that's off-, and again, there's #fafafa or #f7f7f7. rather than being general, giving proportional suggestions, it's not so much "rule of thumb" but "make the values this", which seems like the opposite of the kind of 'advice' it claims to give. (and even if those are just 'examples' - for this to be a page of reference, one'd want to steer from giving exacts as much as possible. so, maybe give examples in like, drop downs? and make the visuals into actual visual guides?)

also, not sure why this kinda random assortment of 'rules' was picked out to be comprised of these ones, and for them to be listed in this way. it doesn't come together into a more systematic approach, it's just kinda all over the place. (unlike if it was ordered more like, 'this is about space; this is about shapes; elements; colors; text; alignment; containers; clarity; complexity; etc.)

awinter-py• 3 years ago

this is 1) highly useful and 2) says things that can't be encoded into any style tool I've ever used

it seems like standard-of-care tools like tailwind converge to transliterated css in real-world frontends

take something like 'saturate your neutrals' -- to use this automatically, a tool would have to label an element as neutral + figure out the color of the foreground element

'math relationships between spaces' as well -- computers should be great at this (it's math!) but css is doing everything in its power to not run code ever, making it hard

css isn't a tool for theming

FrameworkFred• 3 years ago

I love guides like this and I bookmarked this one.

It reminds me of a book by Robin Williams (that I remember because of Mork) called "The Non-designers Design and Type Book." I got a lot out of that book because it gave me some visibility into guidelines I wasn't aware of before I read it. It definitely improved the quality and effectiveness of a ton of my work on and off the web.

The idea of alignment in this post reminds me of similar ideas in Williams' book, but there are definitely ideas in the post that aren't in the book.

I definitely will take the advice of another comment in this thread and try to follow more of the author's content.

I think I'll

spion2• 3 years ago

Use near-black and near-white instead of pure black and white

This is not safe. During the past few years this became a trend, legibility has suffered greatly and eyestrain has increased significantly for me. It gets even worse when combined with `font-weight: 300` - completely unusable.

This is on high quality 4K laptop screen / expensive EIZO FlexScan 32" monitor / Macbook screen - its even worse with other less expensive equipment.

"Near" is also open to interpretation.

EricE2• 3 years ago

Some really good rules of thumb!

If you are interested in diving deeper, there is also a lot of good thinking in the US Web Design System - freely available here: https://designsystem.digital.gov

sourcecodeplz• 3 years ago

This was such a great article. No fluff, just great compacted design tips (rules).

Teamteam16• 3 years ago

Hey ไอ้สสัส

Visual design rules you can safely follow

Related Stories