
Fundamental design principles for non-designers - andyjohnson0
https://medium.freecodecamp.org/fundamental-design-principles-for-non-designers-ad34c30caa7
======
aasasd
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](https://practicaltypography.com)

~~~
p1necone
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
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
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
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
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
Is conflating them the wrong thing to do? Surely you're never working on just
one in isolation?

------
headbiznatch
"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
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
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:

[https://refactoringui.com/](https://refactoringui.com/)

[https://twitter.com/adamwathan](https://twitter.com/adamwathan)

~~~
pugworthy
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
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
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
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
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
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
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
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
As with every list of guidelines, the true expert knows when to break the
rules.

I am not such an expert.

------
TickleSteve
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
Just follow the CRAP rule: Contrast Repetition Alignment Proximity

------
lone_haxx0r
Principle 1: Don't use medium.

