Hacker News new | past | comments | ask | show | jobs | submit login
Basic Principles of Visual Design (prototypr.io)
200 points by RPeres on June 13, 2017 | hide | past | web | favorite | 34 comments



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/


Anyone know of a way to watch this video without Safari or the WWDC app?


You could go to ClipConverter [1], download the format/size you want and then watch it offline. Sometimes it may take a while to retrieve the video (preferable not to choose any conversion options there). As an aside, ClipConverter works for YouTube, Vimeo and many other sites with embedded video. No Java runtime/applet installation required (unlike many other video download sites).

[1]: http://www.clipconverter.cc/


I did not try it, but it looks like you can download it under the Resources tab.


Ideally should work in Microsoft Edge in Win 10. Anyone tried?


You can stream it via VLC player


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.


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


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


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

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.


It's to emphasize a word since not all sites allow basic text formatting like italic and bold. As a result, people will use asterisks or underlines to indicate that a particular word is important.


It adds italics in Markdown. Try it out here if you want: https://stackedit.io/editor

It works in Slack and other chat apps, too.


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.


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.


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.


When I was learning how to layout a print magazine, I read as many of these beginner level tutorials as I could stomach. But, no matter how much I read, I would always be left thinking, "what the hell do I actually do?"

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.


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


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.


John McWade's site and magazine "Before and After"[0] does a wonderful job of combining principles and imitation by way of taking a problematic design and deconstructing why it's not as good as it could be and then showing how it can be made better. In the process he touches on many foundational principles of design but in a practical, applied setting. I learned more about good design from watching/reading him than anyone else.

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.

[0]http://www.bamagazine.com/


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.


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


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.


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


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/


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

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

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


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


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


BTW, compare your linked site to the following one (I'm not affiliated):

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 ;-)


Both sites are slightly different in style and quality. The glaring issue with the site you gave me is quality control and a little less attention to UX and detail. Additionally, the site you gave me uses almost 100% canned design cliches while my site gets more creative with the interface.

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.


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


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.


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


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


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.




Applications are open for YC Summer 2019

Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact

Search: