Fundamental design principles for non-designers
medium.freecodecamp.org
medium.freecodecamp.org
The primary rule is incredibly simple, as mentioned in the article: there should be more space around an element than inside of it―then the eye will perceive the element as cohesive.
This, then, is applied on all levels of a layout: letter shapes and kerning, line spacing, headers and paragraphs spacing, blocks layout, page margins. Even architecture uses this principle―not too surprisingly, since it just describes the workings of visual perception.
Beginner designers sometimes try to remember a bunch of rules for optimal line spacing, header and paragraph spacing, page margins, etc. They can go for years not knowing why particular proportions work, and if elements change they begin to calculate this stuff anew in pixels, or just get lost as to what to do now. Meanwhile, if you go to the principles, you learn to see the proximity, and all spacing becomes obvious to you.
P.S. A bit ironic that the article uses line spacing too close to double. By the way, on Macs and phones, Matthew Butterick's ‘Practical Typography’ website is absolutely perfect in both spacing and contrast, at least with the default Valkyrie font. I'm immeasurably envious of this feat, as I have no idea how to achieve such mastery. Link: https://practicaltypography.com
(Of course, the section "Reduce Visual Noise" still applies.)
Scrolling is sometimes necessary to avoid a screen that has too much going on.
Yes, it does look overwhelming on first impression. But that's just a first impression. Look at it more closely.
What this software implements is a multi-step pipe, where each step is configurable. Every UI element you see represents a useful feature in minimal way. They're all, arguably, essential complexity of the task. The steps are both ordered spatially and explicitly numbered. They can be configured both by mouse and by keyboard. You have an interactive live preview at the top, telling you what the current configuration will change and how. Most important here, however, is that you always see the entire configuration. There are no hidden dialogs, no steps or tabs - what you see on the screen is what's going to be done to the data.
Is it pretty? Not really, though I'd say they've done a good job given the constraints of native Windows UI. Is it useful? You bet. Is it hard to learn? Not really (as long as you speak English). I assume there's a manual attached to the program that will at least guide less tech-savvy people towards basics of regular expressions, but beyond that, the software seems to support both manual-based and interactive "trial&error" learning.
In all honesty, this is an extreme case of what I call UI optimized for utility. Good POS software looks like that. Good inventory management software looks like that. This kind of design is appreciated by people who have to work with an application frequently - e.g. as a part of their dayjob - because it saves time while playing into strengths of human perception.
I want more software to look like that.
> Putting too many elements into a limited amount of space is like trying to listen to three different songs at once. It’s hard to understand what is being said.
In some situations, putting more information on the screen, parseable without scrolling, helps tell the right kind of story (for example, when comparing a bunch of options). So I think this advice is only halfway there:
> give your designs as much negative space as you possibly can, to declutter them and make their meaning more obvious.
Should also include "Don't add so much negative space that cohesiveness is lost."
Another thing: I suspect that information-dense visuals are sort of like highly-performant software: hard to design, harder to implement, and much harder to change once you've gone to all the trouble of squeezing out every possible optimization. As advice for beginners, it seems fine to say "add more negative space", just like we tell junior engineers to "avoid premature optimization", because the ability to recognize when those optimizations are needed goes hand-in-hand with the ability to actually do them right.
I think it's a spectrum. On one end there are Windows 10 UWP applications which have absurd amounts of negative space, while on the other end there's e.g. Plasma with its claustrophobic, crowded UI. Both result in terrible UX (although, to be fair, UWP is much worse), so the sweet point in somewhere in the middle of that spectrum.
Even the designs meant to be used can support or hinder their intended use. Abuse of negative space is one example of hindering the use - by requiring users to scroll more than they should, or precluding them from visual comparison because compared elements can never fit on the screen together.
Information density goes down quicker than my screens grow in size. Now on a typical chat platform I can see less of a discussion than in a typical 1990 IRC client.
If the point of your site is to transmit text information, negative space is something you should avoid. One pixel can be enough there.
In general, being aware and correctly using negative/white space is a good thing. The problem is that the article doesn't actually explain this part correctly. To make things worse, the example chosen has an extremely narrow focus.
The key point to learn is that white space can produce layout as much as elements do. This is, in fact, already explained then talking about proximity. You can't really establish proximity if you don't establish separation, so you can't produce a clear layout if you don't keep some spaces "empty". And so, yes, it shouldn't be about maximizing white space, but about using it correctly and making it part of your layout.
Generally, the rule with white space is not about maximizing but this one: Give an element as much white space as the difference in importance of the element over its surroundings. That is, if an element is differentially more important, it should have more white space around it.
So if you only have one very important element and some others much less so, then sure, that element will take over a large amount of its surrounding space and that should be kept empty. This is the example shown in the article, where there is only one important element. In the case you mention, in an information dense layout, you tend to have numbers of elements of similar importance, and so they will have to share white space and produce a more compact -dense- layout.
> The key point to learn is that white space can produce layout as much as elements do.
Trick is, you can invert that too. While this won't win you a design advice this decade, it's equally possible to use backgrounds or borders to group and separate elements. It's how we did this back before negative space became fashionable, and it supports greater information density.
Other than that, I never suggested any precise relation such as 2x important -> 2x space.
Also, even a lot of experts should take the first point to heart more...
It would be great if someone could make hover work on touch UIs.
The great 1980's Mac OS UI was really something. You could explore the menus and see what options was available, and those that didn't apply was still there, giving a hint that you should selecting something to make then selectable.
I am not such an expert.