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.
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.
> 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".
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 (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...
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".
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.
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.
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 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.
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.
> 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.
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.
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 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.
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.
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.
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.
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.
>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.
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.
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.
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.
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.
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...
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.
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.
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.
>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.
> 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.
> 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.
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.
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.
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.
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.
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.
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.)
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.
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
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.
> 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!).
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 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.
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.
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).
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.
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.
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 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.
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.
Readit News
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.
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."
守 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".
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...
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 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.
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
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 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.
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.
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.
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.
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.
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.
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.
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.
Once developers know this system exists, coding front ends becomes a lot easier.
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.
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
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.
Once you realize that "appeal to nature" is a fallacy, you will be free.
https://anthonyhobday.com/sideprojects/
https://anthonyhobday.com/sideprojects/visualtechniques/
https://twitter.com/hobdaydesign
Dead Comment
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.
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.
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.
This is not difficult.
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.
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.
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.
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.
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
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.)
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.
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
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
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.“
Even though it looks “unnatural“ at least I can read it.
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.
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
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.
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_...
What's the "next level" from these handy rules of thumb? I'm looking for a UI 201
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)
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
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.
It also doesn't occur on monitors. White and black on a screen is not pure, screens aren't that good.
- 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