
Basic Principles of Visual Design - RPeres
https://blog.prototypr.io/10-basic-principles-of-visual-design-55b86b9f7241
======
darknoon
This article touches on _what_ knobs you have to control in a visual design,
but a beginning designer often struggles to put these to service in a bigger
context.

I really enjoyed this talk from Apple's conference this year—it gives a great
overview of the sort of conceptual framework a designer has when making
specific choices:

[https://developer.apple.com/videos/play/wwdc2017/802/](https://developer.apple.com/videos/play/wwdc2017/802/)

~~~
edsheeran
Can someone please explain to me what the _underline_ at the beginning and end
of a word is supposed to mean? I'm sure it's not proper writing or rule of
grammar but I see it frequently in sites where there's a high concentration of
techies. Is it some carryover from coding? If so it's bad practice outside of
code. Don't stain the standards.

~~~
TeMPOraL
> _Is it some carryover from coding? If so it 's bad practice outside of code.
> Don't stain the standards._

Nah, it's sort of carryover from old days of plaintext e-mails, except we
still communicate with plaintext a lot, so it's still relevant. It originates
from the same space that gave you ALL CAPS = SHOUTING and emoticons.

Typical emphasis characters are underscore and asterisks. Many software will
recognize them. Like Markdown parsers. Or like HN, wich _italicizes_ text
between asterisks. Or Skype, which responds both to asterisks, underscores,
and then probably some more.

Complaining about this is kind of like complaining about using punctuation in
an English sentence. It's not the users who are the problem - it's the other
crowd, that doesn't know the rules and traditions of the medium.

~~~
kpil
And it's most likely a carry over from when typewriters where in use, where
you go back and add underscores under the characters by typing over them.
Underscores where of course the _italics_ of a typewriter font, unless you had
a _really_ fancy typewriter.

On a _terminal_ you can't - or couldn't compose characters, so you add a hint
in the front and the end of the word.

Just deal with it.

It's like the characters added for simulated deletion, that jokingly tell
other suckers^H^H^H^H^H^H^H people what you really think. On a suitably
incompatible terminal (or vastly overrated editor), this was actually what it
looked like when trying to delete text by pressing backspace or some obscure
control-character.

Ahh, and simulated hangup noise that you get when you are criticising Hacker
New, although that have never happ485734095-.sdf834-...####+3+323803040830

------
pasta
I think for beginners (in webdesign) there are some very simple rules to start
with:

    
    
      * Only use one font to start with
      * Only choose 3 colors max
      * Only choose 3 font sizes max
      * Only choose 3 margin sizes max
      * Align everything
      * Make sure text has contrast with the background
    

Those limits help you to create a connected design.

After that you can start changing colors, changing margins and sizes, until
you think it looks very nice. But don't start adding colors and margins and
font and sizes because as a beginner that is very hard to handle.

~~~
pasta
By the way: to know when your design is finished you can use this simple rule:

    
    
      * If you don't know what to change it's finished.
    

This, of course, will change over time and might be different for every
design.

------
JusticeJuice
The issue with most 'basic principles', is for somebody who's looking for the
basics (a beginner), they're super hard to apply to their actual work. I think
basic principles are much better learnt through analysing, and imitating other
works.

~~~
naasking
> I think basic principles are much better learnt through analysing, and
> imitating other works.

Well then you aren't understanding principles so much as developing
heuristics.

If you actually learned principles this way, you could describe them at least
semi-formally such that a beginner could actually study them and then
understand how to apply them.

~~~
jacobolus
The original article here doesn’t really have “principles” to explain. It is
just a list of 10 topics related to graphic design. Each of those topics could
be expanded into a book filled with many principles, criteria, heuristics,
etc., formal or otherwise.

To be honest I’m not sure who is upvoting the article or why. It doesn’t
really have much concrete content.

It’s sort of like if you had an article “Principles of software engineering:
logic, programming languages, compilers, networking, operating systems, data
structures, computational complexity, hardware, system architecture”, and then
wrote a paragraph of oversimplified fluff about how each one was related to
software. First, those aren’t principles, but more to the point, that wouldn’t
be particularly useful for someone trying to learn the discipline of software
engineering.

------
galfarragem
As a designer I would say that design is somehow like chess. The openings in
design are the main style used. These styles are exaustively studied and
connected with trends. Nowadays is minimalism. Every designer can put out
something within the style. When they need to differenciate (middle game)
problems appear, as moves are not so clearly studied.

------
mtgentry
If anyone is interested in visual design as it applies to the web, I have a
free email course on the subject here: designbynumbers.io

------
crimsonalucard
This article talked about obvious concepts such as points, lines and colors,
then proceeded to use those concepts to create a minimal design. I'm not
impressed.

Minimal design looks great... but lets be honest here, while it may take a
long time to plan out a minimal design... modern design due to minimalism also
requires minimal talent. I respect the person who can paint a mona lisa and
not the hack who can adjust font size and spacing then put a square background
behind it because anybody can do that.

Some may argue that it's not about the simplicity of the elements but the
elements put together as a whole... To this I say to you.. even the
composition of these simplistic elements into a final design requires almost
no talent or skill.

~~~
TuringTest
> even the composition of these simplistic elements into a final design
> requires almost no talent or skill.

I don't want to watch your minimal designs if you think that way.

The principles required to make a beautiful composition with minimal elements
are exactly the same as those to create beautiful composition in a baroque
setting. Conversely, a minimal design may also look like shit if done
carelessly.

~~~
crimsonalucard
Then don't. Not to be insulting but I believe you and many people who think
Modern Design is hard are deluded. It's really similar to the douche baggery
present in Modern Art.

Composition is easy as pie, humans are already masters of composition.

Let me give you an example.

Try to concoct in your imagination a very beautiful girl, don't do it from
memory just picture for you what would be the most ideal woman in the world...
easy right? That is composition. You composed body parts and facial features
and composed something.

Now draw that beautiful girl naked with perfect anatomical correctness as if
you were looking at her through a fish eye lens from an extreme angle... That
is hard or near impossible from a person without years of practice. This is
true art and talent that I respect....

What is a website but a composition of geometric shapes, premade pictures and
text? My beautiful woman example is an exaggeration compared to web design,
but it illustrates a principle that is true. A minimal design takes time and
effort to construct but we have the instinctual knowledge of what looks good
and what grabs attention and what improves UX. Thus almost _anybody_ has what
it takes to "Design" stuff. _Especially_ if it's minimal.

Rendering a design is significantly easier than fine art. Artistically, the
units of a web page already exist, cover pictures, stock photos, fonts,
geometric tools in illustration programs all allow us to render a website
design with little talent.

It will not take years for someone to learn photoshop and HTML and it
certainly takes very little time to recognize the elements of modern flat
design. The latest overused trend I've been seeing is the layering of a quote
over a big ass full page cover photo,... props to the leonardo da vinci who
can do that:

[http://mkshft.org/](http://mkshft.org/)

~~~
TuringTest
I'm a gay man, imagining a "most ideal woman" would give me the creeps 8-P

I had a long reply addresssing each of your points, but I'll keep it to the
essentials:

\- A beautiful woman composed from parts may be anatomically perfect, or can
be a Frankenstein monster made of stitches of out-of-proportion body parts,
even if every part is individually perfect. Knowing _how_ to put together the
parts into a harmonious whole is an art on itself - the art of composition.
You can't dismiss this skill with "but it looks good in my mind". The
difficult part is taking the nebulous, incomplete visual image in your mind
and building a physical object that matches how you feel it should look. You
speak as if this "execution phase" is trivial, but it's not; it's what
distinguishes an artist from a wannabe.

> we have the instinctual knowledge of what looks good and what grabs
> attention and what improves UX. Thus almost anybody has what it takes to
> "Design" stuff.

\- This is a fallacy. Being able to instinctively recognize whether a design
is beautiful doesn't mean that you'd be able to build a beautiful one yourself
from scratch. The first is easy as your brain is hardwired to do it; but the
second is incredibly hard.

It's not the same to see that a Greek sculpture is beautiful, than to model a
beautiful clay figurine with your hands. You'll know that your current wreck
is not correct, but won't know of to change it to make it better. It's exactly
the same when you try compositing individual elements into a proportional
design. No matter how simple or complex are those elements, the skills
required to make a good composition are the same, and they are not easy; it
takes years to learn them and apply them properly. It's the reason why a
professional designer can make better designs than a developer who learns all
the photoshop commands.

Seriously, I think you're falling to the Dunning–Kruger effect; it seems that
you don't even _know_ what you're missing in terms of the quality of a design,
if you think that any amount of basic elements can simply be thrown together
without regards of the Gestalt laws of grouping[1] that govern your brain and
are the basis of composition, even for very minimalist designs. The hardest
part of art is not learning those mechanical techniques for making it photo-
realistic, that you seem to value more than it's worth; it's learning these
intangible rules and mastering them to make the result graceful.[2]

[1]
[https://en.wikipedia.org/wiki/Gestalt_psychology#Pr.C3.A4gna...](https://en.wikipedia.org/wiki/Gestalt_psychology#Pr.C3.A4gnanz)

[2]
[https://en.wikipedia.org/wiki/Composition_(visual_arts)](https://en.wikipedia.org/wiki/Composition_\(visual_arts\))

P.S. Learning to draw a photo-realistic image from life (i.e. looking at the
object while you draw it) doesn't take years, it can be done in a few days
with a good teacher; (metaphorically) half your brain is literally built for
doing just that. You just need to learn how to shut down the symbolic other
half of the brain which messes with the results. Betty Edwards _Drawing on the
Right Side of the Brain_ method[3] is a good way to do it on your own.

[3]
[https://en.wikipedia.org/wiki/Betty_Edwards](https://en.wikipedia.org/wiki/Betty_Edwards)

~~~
crimsonalucard
>Learning to draw a photo-realistic image from life

Did i say from life? I meant draw it from an imagined women in your mind
through an imagined fish eye lens from an imagined extreme angle with perfect
detail. Learning programming is easier than this...

> A beautiful woman composed from parts may be anatomically perfect, or can be
> a Frankenstein monster made of stitches of out-of-proportion body parts,
> even if every part is individually perfect. Knowing how to put together the
> parts into a harmonious whole is an art on itself - the art of composition.
> You can't dismiss this skill with "but it looks good in my mind".

I didn't dismiss this skill. Read my post again. I clearly separated design
from implementation, the actual rendering of the woman (or man in your case).
The design happens in your mind and is trivial almost instinctual, the
engineering or rendering happens in reality. Design is easy because it happens
in your imagination.

Implementing a modern design is even easier because of the minimal nature of
the style and the canned graphics that are available for you to move around
and resize.

>Seriously, I think you're falling to the Dunning–Kruger effect; it seems that
you don't even know what you're missing in terms of the quality of a design,
if you think that any amount of basic elements can simply be thrown together
without regards of the Gestalt laws of grouping[1] that govern your brain and
are the basis of composition, even for very minimalist designs. The hardest
part of art is not learning those mechanical techniques for making it photo-
realistic, that you seem to value more than it's worth; it's learning these
intangible rules and mastering them to make the result graceful.[2]

These rules can be mastered in a week man. Also these principles are just
formalizations of things that humans already instinctively know. No design can
be thrown together willy nilly but any human can do it with effort not talent
or skill.

~~~
TuringTest
> Design is easy because it happens in your imagination.

Your argument is contradictory. If having an intuitive sense of composition is
enough to build a proportional design, having an intuitive sense of the human
body proportions should be enough to draw one. Yet you recognize that drawing
a body requires more skills than simply imagining it in your mind, so why
don't you also recognize this need for building a design with a proper
composition?

> Implementing a modern design is even easier because of the minimal nature of
> the style and the canned graphics that are available for you to move around
> and resize.

This is like saying that drawing the contour of a human body in a complex pose
is easy because you have pen and paper, you don't need to extract the pigments
from rocks nor prepare the parchment from calf's skin. Building a
proportionate desing requires more than having access to the basic elements.

These would be the equivalences in the components for a design, and for a
human body drawing:

* web components == lines and points

* building a web page == scribbling a sketch on paper

* building an ugly minimalistic design == drawing a stick figure

* building a proportional minimalistic design with a beautiful composition == drawing a realistic human body in any posture and perspective

What is a drawing of a body, but a composition of lines and shapes on a paper?
Yet having an instinct on how a proper body looks like (and this instinct is a
strong sense; any distortion triggers the "uncanny valley") is not enough for
knowing how to put it in paper. In the same way, having an instinct for
recognizing a beautiful composition is not enough to build a good design.
Building a page by laying down _" cover pictures, stock photos, fonts,
geometric tools"_ is equivalent to drawing a stick figure. Yes, anyone can do
it, but that's not the same as creating a succesful minimalistic design, any
more than laying down some lines on paper to form a stick figure is making
art. It _could_ be art, but it requires some skill beyond merely dropping the
basic shapes anywhere on the canvas. The proper implementation _is_ difficult
for the design as well, even if your imaginary mental image is perfect in your
brain.

>> Gestalt laws

> These rules can be mastered in a week man.

Sure, the Gestalt laws can be learned in a week. In the same way, you can
learn how to draw a basic canonic human figure with circles in an afternoon;
and the laws of perspective are as simple as a vanishing point and some
converging straight lines. But recognize than being a _master_ in either takes
much more than learning the theory. If all it takes to be a master is learning
a few rules by rote memory, why aren't there any courses to "become a
professional designer and start your design company in 7 days"? And why
rendering a human body requires more skill than just knowing the basic shapes
for each body part?

------
skybrian
Looks interesting, but it misses a basic principle: don't animate things that
don't need to be animated; it distracts from the text. A mini-slideshow that
you step through would be better.

(Sadly, this is all too common these days. It makes me almost nostalgic for
the blink tag.)

~~~
meandmycode
It's interesting actually that the article doesn't cover animation. Personally
I think it's actually one of the most overlooked parts of 'visual design'
these days.. animation I think is looked at quite harshly and as an
unnecessary flashy aspect, and I think there's a lot of guilt of exceptional
misguided use of animation, but I would say today that animation isn't used
enough in the right cases, good animation can improve visual confidence with
hierarchy and relationship of data and influence users perception of how
responsive and well a product appears to react to them. Google have some good
guidelines with material design and I think they are only really scratching
the surface with what is and isn't good use of animation.

~~~
majewsky
I think the main issue is that animation should be restricted to 1. where the
user is currently looking and 2. where they _should_ be looking [1]. When
you're reading a text, you're looking at the text and ingesting it, so
animated images will be irritating. If you really need to do an animation to
illustrate your point, it should be click-to-play, so that it only moves when
the user is actually purposefully looking at it.

[1] An example for this is how an app's symbol jumps on the macOS dock when
there's activity in that app. (Although I would say that this particular
instance is just a bit too annoying. When it jumps repeatedly, I frequently
reply in my head "I KNOW that you have something to show me, but I need to
finish this other thing first!".)

------
Mendenhall
#1 Nothing more than what is needed. I agreed with many of his points, but I
always place this as number one.

------
unabst
A good test for visual design is the word test. What are all the possible
words that can be derived from your design? You don't have to agree with them.
They just need to be possible. Then decide on three words you want people to
think of the most when they see your design, and try to eliminate all
inferences to the rest. Three is enough. And your goal is to make your design
more explicit than the words themselves. This leads to concise and potent
designs.

Visual design is visual expression, where expression is communicating a
feeling. But I had it backwards for the longest time. I thought expression was
to radiate something. Expressing happiness would be me being as happy as
possible. I would radiate happiness. I would express myself.

Except, with visual design, our attention should be on communication. It
should be on how the recipient feels. This makes expression an induction.
Instead of me being as happy as possible, the right question to ask is
instead, what would it take to make you feel as happy as possible?

When we are focused on ourselves, people could still be indifferent about you
being happy. But when we focus on them, they get excited. It's about them
being happy. The art is for them.

So a good graphics designer would need to have a thorough color vocabulary, as
well as an understanding of what abstract shapes and lines convey what. Some
shapes are friendlier, some are sexier, etc. Same with fonts. And at the end
of the day, if you need to scream "car" just throw a car in there. But most
importantly, you would need to understand your audience, and understand their
visual vocabulary. If you make them feel something they've never felt before,
you win. This is never easy.

I guess my point is, the original article is more about the elements than
principles.

