5 ms·

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 g

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 4y 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 4y ago
  That example is a nightmare.
- wlonkly 4y 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 4y 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 4y 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/breaking-the-rules https://www.nationalgeographic.com/photography/article/break...
- deafpolygon 4y ago
  IMO, that photo doesn't break the rules. The image is still somewhat segmented into thirds. Maybe transcending the rule.
laurieg 4y 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 4y 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."
  - chrstphrknwtn 4y ago
    Make it work, make it right, make it fast.
    - arkad 4y ago
      Improvise, adapt, overcome.
      - codegladiator 4y ago
        Embrace, extend, and extinguish
        danuker 4y ago
        Veni, vidi, vici
        airstrike 4y ago
        Shit, shower, shave
windows2020 4y ago
Anyone have information on the mathematics behind optical alignment?
- meheleventyone 4y 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.
  - hennell 4y ago
    The ‘mathematical’ alignment is usually just considered "centered however the alignment button works in the software you're using" in design discussion. For most software that'd be bounding box based - the center of the rectangle the software draws around it. Optically is more center of mass, but ideal more 'center of visual weight'. Larger things are 'heavier', darker/more contrasty things are 'heavier'. Rounded things should extend over an alignment line a bit, flat shapes butt up against it (e.g. in the letters lO the O extends over the baseline slightly compared to the l, to visually connect with the baseline more). In general the way it works is you align with whatever software says and you look at it and say does it actually look aligned or need minor adjustment? Because the point is to look aligned rather than to be mathematically correctly aligned. Like our letters above, they look more visually on the same baseline when they're not, then when all the rounded base letters sit most 'correctly' on the line.
  - rrrrrrrrrrrryan 4y ago
    It's just mean instead of mode. The author is suggesting you use the mean X value of all the pixels in the shape, instead of the mode x value. I'm sure fancier image editing software does this, but your eyes are pretty good at it too because it's just dividing the surface area in half, or thinking about it as the "center of mass" as you put it: where could you attach a string to this shape such that it doesn't tip over one way or another?
Daub 4y 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 4y 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."
IIAOPSW 4y 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 4y 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".
  - notahacker 4y ago
    It's also the case that some of the simplest and most intuitive possible mathematical rules are going to look less good than some less mathematically elegant ratio, like picking line spacing for body text which is exactly the font-size or exactly twice the font-size rather than somewhere between 1.2x - 1.5x
deafpolygon 4y 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 4y 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 4y 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 4y 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 4y 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.

IgorPartola 4y 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 4y ago
That example is a nightmare.
wlonkly 4y 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 4y 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 4y 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/breaking-the-rules https://www.nationalgeographic.com/photography/article/break...

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

laurieg 4y 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 4y 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."
- chrstphrknwtn 4y ago
  Make it work, make it right, make it fast.
  - arkad 4y ago
    Improvise, adapt, overcome.
    - codegladiator 4y ago
      Embrace, extend, and extinguish
      - danuker 4y ago
        Veni, vidi, vici
        airstrike 4y ago
        Shit, shower, shave

windows2020 4y ago

Anyone have information on the mathematics behind optical alignment?

meheleventyone 4y 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.
- hennell 4y ago
  The ‘mathematical’ alignment is usually just considered "centered however the alignment button works in the software you're using" in design discussion. For most software that'd be bounding box based - the center of the rectangle the software draws around it. Optically is more center of mass, but ideal more 'center of visual weight'. Larger things are 'heavier', darker/more contrasty things are 'heavier'. Rounded things should extend over an alignment line a bit, flat shapes butt up against it (e.g. in the letters lO the O extends over the baseline slightly compared to the l, to visually connect with the baseline more). In general the way it works is you align with whatever software says and you look at it and say does it actually look aligned or need minor adjustment? Because the point is to look aligned rather than to be mathematically correctly aligned. Like our letters above, they look more visually on the same baseline when they're not, then when all the rounded base letters sit most 'correctly' on the line.
- rrrrrrrrrrrryan 4y ago
  It's just mean instead of mode. The author is suggesting you use the mean X value of all the pixels in the shape, instead of the mode x value. I'm sure fancier image editing software does this, but your eyes are pretty good at it too because it's just dividing the surface area in half, or thinking about it as the "center of mass" as you put it: where could you attach a string to this shape such that it doesn't tip over one way or another?

Daub 4y 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 4y 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."

IIAOPSW 4y 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 4y 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".
- notahacker 4y ago
  It's also the case that some of the simplest and most intuitive possible mathematical rules are going to look less good than some less mathematically elegant ratio, like picking line spacing for body text which is exactly the font-size or exactly twice the font-size rather than somewhere between 1.2x - 1.5x

deafpolygon 4y 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 4y 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 4y 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 4y 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 4y 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.