Hacker News

Fundamental design principles for non-designers(medium.freecodecamp.org)

286 pointsandyjohnson0 posted a year ago37 Comments
aasasd said a year ago:

I fully believe that the principle of proximity is the main design tool (though contrast in size helps, of course). You could forget about color and still lay out things clearly and beautifully.

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

p1necone said a year ago:

I'd disagree with your P.S. - I find the content on that page to be too big and too widely spaced to be easily readable.

omegabravo said a year ago:

did you open any of the links? I disliked the table of contents, but when I opened one of the pages it was much nicer

TeMPOraL said a year ago:

I like those and generally agree, though I'd change one thing: if you're designing something that's meant to be used - as opposed to just looking pretty - ignore advice about maximizing negative space. Just fit all the information your users need at a given moment on the screen. Information density is your friend, scrolling isn't.

(Of course, the section "Reduce Visual Noise" still applies.)

cle said a year ago:

I strongly agree with this. From TFA:

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

mhink said a year ago:

Although I'm an engineer and not a designer, I think it's fair to point out that this is article is primarily about visual design, which is only one aspect of the design of the overall user experience. There's a phrase I've heard, "information architecture", which roughly seems to mean "how the layout and presentation help the user process the information being presented". With this in mind, I think a lot of folks (both designers and engineers) conflate the two sometimes.

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.

p1necone said a year ago:

Is conflating them the wrong thing to do? Surely you're never working on just one in isolation?

seanmcdirmid said a year ago:

Negative space is a usability, not just aesthetic, concern. Judicious use can reduce confusion and stress, while promoting focus.

Scrolling is sometimes necessary to avoid a screen that has too much going on.

TeMPOraL said a year ago:

True, but I believe current design trends are biased way too much towards negative space. Assuming you follow the "Reduce Visual Noise" advice, and proximity principle, and stick to displaying information relevant to the task at hand (as opposed to displaying everything), it's really hard to overload a screen with data. Haven't seen that done in software.

digaozao said a year ago:

Counter example. I worked with software looking like this more than one time: https://images.app.goo.gl/Pvpo1xhv2HqKJCuW8

TeMPOraL said a year ago:

Interesting example. That's what I would call quite good design. Bear with me.

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.

genezeta said a year ago:

I think, as others have already mentioned, it's not all one way or the other. Different situations require different approaches.

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.

TeMPOraL said a year ago:

The problem with this advice is that whitespace separation is relative (e.g. this element is 2x important, so it's separated by 2x whitespace). People end up picking too big base whitespace value.

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

genezeta said a year ago:

Yes, I did not mean my comment as anything more than "it is a tool; sometimes it's a good tool; learn to use it". Or as saying that while "maximize white space" is not a good advice, saying one should completely ignore it is also not such a good idea.

Other than that, I never suggested any precise relation such as 2x important -> 2x space.

news_to_me said a year ago:

There's a balance. Usability and "looking pretty" aren't opposites. Of course, there's often trade-offs involved. Maybe "maximizing" is the wrong idea though.

TeMPOraL said a year ago:

They aren't opposites, but they aren't orthogonal either. Past some point, you have to choose one over the other. I think most designs are far from that point, though - they could easily improve information density by an order of magnitude while still remaining pretty.

itronitron said a year ago:

It becomes a lot harder to get it right as more visual information is added. Tufte is an excellent source for design guidelines on information density. It is important to keep in mind however that Tufte focuses primarily on static visual representations that people can spend time on, and that do not update.

xeeeeeeeeeeenu said a year ago:

>ignore advice about maximizing negative space.

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.

Iv said a year ago:

So much this.

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.

anthonyshort said a year ago:

Every design is meant to be used. The amount of space needed is relative to the problem.

TeMPOraL said a year ago:

No, some designs are meant to use you - think advertising, or applications that look "clean" and "ordered" to drive sales.

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.

said a year ago:
headbiznatch said a year ago:

"The Non-Designer's Design Book" by Robin Williams was a big help to me when I needed to take a leap in my ability to pretty things up. The tenets in there seem to be rediscovered and reworded often (not sure if this book is the first, honestly) but I think the main idea is to have some kind of strategy for how to be purposeful with your design choices. From the book: Proximity, Alignment, Repetition, Contrast. I think that ordering is less funny as an acronym but more useful as a guide with respect to what you focus on first (Proximity - grouping ideas is a natural place to start, Contrast - which comes last because it's the trickiest).

hashzeros said a year ago:

My first though was this book as well. Everything in the article has been taught and talked about for well over 20 years (probably longer). I'm surprised that there is so much less backlash on HN when it comes to "rediscovering" design principles compared to engineering principles. Probably just has to do with where expertises lie. With that being said, I'm all for spreading good design principles to the masses.

tvphan said a year ago:

I recently read Refactoring UI by Adam Wathan, which goes more into detail about basic design principles in a manner that noobs can understand. There are also a whole bunch of examples and stuff. Highly recommended:



pugworthy said a year ago:

We bought a copy for work - well worth it. I really like the materials presented, as well as the walk through videos showing transformations of UI.

cjfd said a year ago:

Yes, regarding the color thing, I would add that when you put a light color on a light color there also is the problem that the amount of contrast that you get varies quite a bit depending on the monitor. What looks like enough contrast on your monitor might not be on the one that your user has.

aasasd said a year ago:

Light text also tends to disappear into the background when an ‘evening light’ red filter is enabled―which are becoming more popular these days.

craftinator said a year ago:

I very much dislike how the word "design" is now used in place of "visual design". Design very much used to be a science of creating cohesion and intuitiveness in any system; it's now commonly used to mean "making things look nice and attractive". There is nothing wrong with visual design, but it is a small (and arguably, less important) subset of design as a whole. Look at Apple for an example of why this is a regression; they have always touted themselves as a design-centric company. This used to mean that design principles were used to make their products incredibly intuitive, attractive, and user friendly. Now, they make very, very pretty devices and software, but they are not intuitive nor user friendly.

tabtab said a year ago:

I was told my designs had too much contrast, being the fad a couple of years ago was low contrast, which followed the "tiny font" fad. Fads often violate practicality and logic. Consider torn jeans.

jbotz said a year ago:

Nice list. Like someone said, the true expert knows when to break the rules, but for someone who doesn't really know anything about design but needs to put together a site, just following these simple rules is likely to make a big difference.

Also, even a lot of experts should take the first point to heart more...

snlacks said a year ago:

The anti-visual noise bias has gone too far. You remove boxes, underlines, and understandable cues like arrows, then they remove words and replace them with nonsense icons. Most UIs make no sense.

Flow said a year ago:

I agree. I think even touch UIs should have some hints if you can click on something, and if you can click, force press, or long-press.

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.

timw4mail said a year ago:

As with every list of guidelines, the true expert knows when to break the rules.

I am not such an expert.

TickleSteve said a year ago:

Pretty much all those points are different techniques for grouping, negative space to push away from non-associated elements, common elements such as fonts so the eye associates things together, etc...

root670 said a year ago:

Just follow the CRAP rule: Contrast Repetition Alignment Proximity

lone_haxx0r said a year ago:

Principle 1: Don't use medium.