Basic Principles of Visual Design
blog.prototypr.io
blog.prototypr.io
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:
It works in Slack and other chat apps, too.
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.
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
No, it's not but it's funny that you were so sure it was that you put it as a rhetorical question with a nonsense rant about standards.
* 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
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.
* If you don't know what to change it's finished.
So, I went out and bought a dozen magazines that I liked the looks of, then grabbed a ruler and starting taking measurements and drawing grids. Sure enough, just as you said, within a couple of hours, I had a very solid sense of how these principles worked in the real world.
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.
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.
His examples often focus on print materials but the concepts are universal and medium-agnostic.
He's since joined Lynda.com/LinkedIn and is still teaching.
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.
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.
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:
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...
[2] 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.
http://preview.themeforest.net/item/minimus-minimal-portfoli...
If you think both sites have a similar design quality and are equally easy to create, you have a problem ;-)
These kinds of differences can easily be remedied by greater effort, not greater talent. Additionally most users won't even care or contemplate the difference as both interfaces are well past the "good enough" point.
At the fundamental level, the artistic concepts from both designs still relatively simple and literally almost identical: The composition of typography, stock photos and simple geometry.
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.
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?
(Sadly, this is all too common these days. It makes me almost nostalgic for the blink tag.)
[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!".)
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.