3 ms·

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

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.

jasmer 4y 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.
- noduerme 4y 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.
  - jasmer 4y ago
    Guides are not a 'crutch' they are the invisible framework of the page. Guides might be a problem or inhibiting in classical design, but not web design where breaking the rules set by the guides will usually cause problems.
Cthulhu_ 4y 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.
- tempestn 4y 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.
  - adminu 4y ago
    Or not, that way GP learned something for life, so saves them time in the long run
  - janeerie 4y ago
    I'm curious about this. If everything in a design file is aligned left, do you need an annotation on each object telling you that it is aligned left?
    - tempestn 4y ago
      No, but I might include a general note on alignment. And rarely is literally everything going to be aligned down the left side of the page, so you could also include some annotation to show what's aligned to what (and maybe why). I'm no designer, but I know I appreciate when designs include that kind of info.
bambax 4y 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 4y 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-188bcbae0d62 https://medium.com/eightshapes-llc/space-in-design-systems-1... Once developers know this system exists, coding front ends becomes a lot easier.
vitaflo 4y 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 4y 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.
- noduerme 4y 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.

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

noduerme 4y 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.
- jasmer 4y ago
  Guides are not a 'crutch' they are the invisible framework of the page. Guides might be a problem or inhibiting in classical design, but not web design where breaking the rules set by the guides will usually cause problems.

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

tempestn 4y 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.
- adminu 4y ago
  Or not, that way GP learned something for life, so saves them time in the long run
- janeerie 4y ago
  I'm curious about this. If everything in a design file is aligned left, do you need an annotation on each object telling you that it is aligned left?
  - tempestn 4y ago
    No, but I might include a general note on alignment. And rarely is literally everything going to be aligned down the left side of the page, so you could also include some annotation to show what's aligned to what (and maybe why). I'm no designer, but I know I appreciate when designs include that kind of info.

bambax 4y 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 4y 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-188bcbae0d62 https://medium.com/eightshapes-llc/space-in-design-systems-1... Once developers know this system exists, coding front ends becomes a lot easier.

vitaflo 4y 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 4y 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.
noduerme 4y 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.