6 ms·

Basic Principles of Visual Design

200 points by RPeres 9y ago

skybrian 9y ago
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 9y ago
  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 9y ago
    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!".)
JusticeJuice 9y ago
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.
- hluska 9y ago
  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.
- naasking 9y ago
  > 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 9y ago
    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.
- 9y ago
darknoon 9y ago
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/
- tdeck 9y ago
  Anyone know of a way to watch this video without Safari or the WWDC app?
  - rbritton 9y ago
    I did not try it, but it looks like you can download it under the Resources tab.
  - amrrs 9y ago
    Ideally should work in Microsoft Edge in Win 10. Anyone tried?
  - ajscanlan 9y ago
    You can stream it via VLC player
  - newscracker 9y ago
    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/ http://www.clipconverter.cc/
- edsheeran 9y ago
  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.
Mendenhall 9y ago
#1 Nothing more than what is needed. I agreed with many of his points, but I always place this as number one.
crimsonalucard 9y ago
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 9y ago
  > 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 9y ago
    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/
mtgentry 9y ago
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
pasta 9y ago
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 9y ago
  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.
galfarragem 9y ago
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.
unabst 9y ago
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.

200 points by RPeres 9y ago

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

JusticeJuice 9y ago

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.

hluska 9y ago
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.
naasking 9y ago
> 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 9y ago
  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.
9y ago

darknoon 9y ago

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/

tdeck 9y ago
Anyone know of a way to watch this video without Safari or the WWDC app?
- rbritton 9y ago
  I did not try it, but it looks like you can download it under the Resources tab.
- amrrs 9y ago
  Ideally should work in Microsoft Edge in Win 10. Anyone tried?
- ajscanlan 9y ago
  You can stream it via VLC player
- newscracker 9y ago
  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/ http://www.clipconverter.cc/
edsheeran 9y ago
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.

Mendenhall 9y ago

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

crimsonalucard 9y ago

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 9y ago
> 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 9y ago
  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/

mtgentry 9y ago

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

pasta 9y ago

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 9y ago
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.

galfarragem 9y ago

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.

unabst 9y ago

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.