Designing for the Mind

Advertisement

Editor’s Note: Please note that this article is one of the previously published articles on our new subsite, Smashing Design Informer1. Our aim is to bring professional discussions on Web design and development forward, and also encourage the community to engage in meaningful conversations on design processes. Design Informer was originally created by Jad Limcaco and is now part of Smashing Magazine. Feel free to take a look at the previous articles on DI as well as our subsites Coding2, UX Design3 and WordPress4.

Do you know what makes a design good?

Is it merely an opinion, or is there something more to it? Breaking design down seems like such an abstract thing. Even the designers who are able to create thought-provoking work seem purely talented and have natural abilities that can’t really be nailed down to a process. But what if there were principles that captured why design and art worked the way that they do?

There are many beautiful designs that have been created on both a conscious and unconscious level. The downside of a designer continuing to create on an unconscious level is that the decisions they make appear somewhat random. For example, think if you were to ask a pilot why they clicked a few switches and they answered, “It just feels like the right switches to me,” rather than, “I need to adjust the wings to reduce wind drag.” As a passenger, the second would make us feel safer and confident in the pilot’s abilities.

There is a real power that comes from being able to identify and speak to what makes your design meaningful. In the story of the Joshua Tree (Sidebar) we learn that once you recognize and understand something, it unlocks a new level of perception. In this article we’ll take a look at some principles that make the aesthetics of design attractive to people, and explanations on why they do. The more you become conscious of how design works the better you are able to communicate and judge design decisions.

Joshua Tree

“Many years ago I received a tree identification book for Christmas. The first tree in the book was the Joshua tree because it took only two clues to identify it. Now the Joshua tree is a really weird-looking tree and I looked at that picture and said to myself, ”Oh, we don’t have that kind of tree in Northern California. That is a weird-looking tree. I would know if I saw that tree, and I’ve never seen one before.”

So I took my book and went outside. I had lived in that house for thirteen years, and I had never seen a Joshua tree. I took a walk around the block, and there must have been a sale at the nursery when everyone was landscaping their new homes — at least 80 percent of the homes had Joshua trees in the front yards. And I had never seen one before. Once I was conscious of the tree, once I could name it, I saw it everywhere. Which is exactly my point. Once you can name something, you’re conscious of it. You have power over it. You own it. You’re in control.”

Hello, I’m Your Brain

Design is powerful because of the way our brain processes visuals. We might think of vision working by our eyes pulling in images and projecting them in the back of our mind. If this were the case then there would no be design or art. There are in fact 30 areas in the back of your brain that process different aspects of the image. The various vision processing areas of the brain are individually recreating the design. So, in a way, the viewer is also an artist. In reality, design and art stimulate the mind more than a realistic image would do. Which is why it affects us differently. Randomly placing objects on a screen do not create the same reaction. There must be purpose to the visual distortion/arrangement for the mind to pick up.

Child

It would be nearly impossible to lock down all the various styles of design that are out there. Sure, we can categorize them into bigger buckets and generalize with words like “clean,” or “grunge,” and designers certainly understand what kind of design to expect from those words. Although at the surface there is a difference between them, at their very core the brain is being stimulated by them in the same way.

The principles below are based on studies of the brain and neurological research that have been presented a variety of ways online. In this article I have attempted to present them in a way that best relates them to design.

The Principles of Aesthetic Experience

Grouping

When you look at a design layout and notice subtle touches — like the links of a specific color — this is not just a nice design touch, or good usability. It is tapping into the way your mind groups together things like shapes or colors. This technique is used heavily in design and plays off the mind’s natural tendency to try and find connections in elements. For example, in logos like FedEx, the arrow is created in the mind by grouping the negative space between the “E” and the “X.”

The neural mechanisms that we are tapping into are the same as those that evolved as a survival trait in the brain to protect us from predators and defeat their camouflage. Consider an early human seeing a golden color behind some foliage. The mind grouped those together as one whole so we can tell that there is a lion waiting behind the leaves. There are a set of design principles known as Gestalt Theory which breakdown the various types of grouping into specific categories. These can be explored for further understanding of grouping.

Symmetry and Balance

A symmetrical object taps into the same neural machinery made to help the mind detect other people or predators. The more symmetrical and balanced something like a human face is, the more perceived beauty that is interpreted by the mind. No human face is perfectly symmetrical, however when the two sides are nearly equal, they are seen at a metacognitive level as more beautiful. Some scientists have argued this is because asymmetrical organisms are suffering from disease and the mind has evolved to recognize that.

So, when we create symmetry and balance in a design through the use of guides like the grid and specific sizing of elements, we are creating something that is more perfect (almost hyperreal) compared to what is found in naturally created objects or organisms. It can be argued that most design is asymmetrical, however there must be a balance in the design. If that balance is not there, the mind will see the layout as asymmetrical and potentially awkward or wrong.

Peak Shift

Peak shift is how the mind reacts to differences between elements. The more you exaggerate those differences the more you are drawn to them. For example, If you were to present a lab rat with a square and a rectangle and teach it that the rectangle will get them food, and the square will not, it will obviously go for the rectangle. If you add a third element, a longer, skinny rectangle, the rat will be drawn to that more than the other one because the form has been exaggerated.

This same principle is applied to viewing a realistic drawing and a caricature of a person. To the mind the caricature looks almost closer to the person than the realistic drawing. The mind picks up on the differences that have been accentuated.

We notice this done in many designs with lighting for example. The shadows and reflections, or soft spotlights behind elements is an exaggerated version of what occurs with natural lighting. By pumping up these effects we are creating a more aesthetically appealing lighting in our compositions.

Isolation

As designers we learn to create focus on the essential elements of a layout and simplify the message that we are trying to communicate. In art, a drawing that is merely a minimal outline of the subject can be much more powerful than a 3D rendition of the same thing. This is why a sketch is more effective as art than a full color photo.

The principle of isolation is removing the gratuitous visual information that might clutter the design and concentrating on the essentials. It directs attention to what matters. By extracting what is critical and only showing that, the mind reacts strongly to this.

Perceptual Problem Solving

When watching a horror movie the directors have setup the scenes to play off of this principle. The longer the monster or killer in the film remain in the shadows or only revealed in small pieces, the more frightening the film is. The fear is created in your mind and imagination. If during the entire film you saw the killer or creature in daylight, there would be nothing that scary about it.

Perceptual Problem Solving is forcing the mind to try and figure out, or imagine, what the object looks like. The struggle almost introduces pleasure and forces the mind to figure out the image. This stimulates the mind more than just being literal with something, but rather teasing the mind with pieces of it and building up to a big reveal.

Contrast

We know contrast well as a graphic design principle in relation to light versus dark, curves versus angles, and dynamic versus static. This contrast is in how the human retina and brain respond more to the edges and sharp stepped changes in color or gradation. The visual information mainly is in the area of change like the outline/edge of a person and the color wash background. Therefore, this becomes a more interesting and attention grabbing area for the eye and brain to focus.

So, by adding other dimensions of contrast to the design, like texture or color, the design attracts the cells and holds their attention. Contrast can also exist as repetitive elements like black and white lines that create a sort of visual rhythm for the eye to follow. Creating areas of that contrast each other is vital to a dynamic and well-composed design.

Generic Viewpoint

When given an object to view the mind prefers a less complex vantage point. Take for example the cubes in the image to the right. The one on the left looks to us like what a cube should look like, because it is from a generic viewpoint. The cube on the right appears to be a flat hexagon to most people because it is from a very specific viewpoint. With the sides filled in with color we can finally see the cube. So although there are exceptions to this rule, this more generic viewpoint is usually more aesthetically pleasing.

Metaphor

Designers understand the use of metaphor very well. It is used in creating a familiar user experience by tapping into real objects that people already understand. In this case the understanding of metaphor is a bit different. The metaphor is a sort of mental tunnel between two objects that at first seem unrelated. On an unconscious level though, the mind has already made the association.

Some examples of this are Shakespeare saying, “Juliet is the sun.” In this case he is relating Juliet to being warm and nurturing, not that she is an object in our solar system. Good metaphors are easy to grasp and universal. Some design or imagery is compelling — because of the use of metaphor — the moment we see it. That is because before we even understand why, our mind has already deciphered it.

FedEx

Gestault5

Leonardo Da Vinci6

Symmetry and Balance7

Richard Nixon8

Dove9

Scream10

Gradient

Cube

Juliet11

Knowledge Is Power

Great artists, like Monet, were experts at employing principles like peak shift into their work. Although, I’m not sure he ever had to present designs to a client like we do today. Sometimes it seems like a lack of (design) understanding gives the client an upper hand. The difference between you and your client’s neighbor’s friend’s 13-yr-old kid with a copy of Photoshop is that they have to pay you more. Which really means that unfortunately to many clients you are both the same.

Experience and your portfolio of work certainly matter. But each client is completely different with how they judge design. Paul Rand described business clients as this:

“It is their uninformed, unfocused preferences or prejudices, their likes or dislikes that too often determine the look of things. Yet, much of the time, they are not even discriminating enough to distinguish between good and bad, between trendy and original, nor can they always recognize talent or specialized skills.”

In the end it is up to the designer to communicate the decisions they made in creating their solution. Understanding some of these principles won’t help you decide what style of design to use, or what colors are best. There are differences on cultural levels or project goals that affect things like that. However, knowing what these principles are and why they work will help you create effective designs and hopefully help to give you (the designer) some of that power back.

Credits

The information and references in this post can be credited to Vilayanur Ramachandran12 and his talks and studies regarding the mind. He has spoken at TED several times and published many papers13 on the complexity of the brain and how we process information like art and aesthetics.

The Joshua Tree story is from the Non-Designers Type Book14 by Robin Williams15.

Images are linked to sources.

Footnotes

  1. 1 http://www.smashingmagazine.com/
  2. 2 http://www.smashingmagazine.com/category/coding/
  3. 3 http://www.smashingmagazine.com/category/uxdesign/
  4. 4 http://www.smashingmagazine.com/category/wordpress/
  5. 5 http://gestalttheory.egress9.tail.philipsproducts.co.cc/theoryofgestalt/
  6. 6 http://rjosephhoffmann.files.wordpress.com/2010/06/davinci.jpg
  7. 7 http://3.bp.blogspot.com/_HIEQ59QresM/SA-v2rGrwNI/AAAAAAAAAX8/beELhslYLF0/s320/rat_sitting_up_with_hands_outstretched.gif
  8. 8 http://www.casafree.com/modules/xcgal/albums/userpics/21493/nixon[1].jpg
  9. 9 http://www.thousandsketches.com/images/blog/xmas-picasso-dove-large.gif
  10. 10 http://www.lonelyreviewer.com/wp-content/uploads/2010/03/scream.jpg
  11. 11 http://farm3.static.flickr.com/2728/4444562210_bf54b8bc12.jpg
  12. 12 http://www.youtube.com/watch?v=Rl2LwnaUA-k
  13. 13 http://www.google.com/url?sa=t&source=web&cd=1&ved=0CBcQFjAA&url=http%3A%2F%2Fwww.imprint.co.uk%2Frama%2Fart.pdf&ei=JkVaTIzvDqepnAeByPDKAg&usg=AFQjCNHSScOYG_u6rfa7LA-ft-P6CQnP8Q&sig2=qMWiG1yp5qtPZWy_8WwKBA
  14. 14 http://www.amazon.com/Non-Designers-Type-Book-Robin-Williams/dp/0201353679
  15. 15 http://www.amazon.com/Non-Designers-Type-Book-Robin-Williams/dp/0201353679

↑ Back to topShare on Twitter

Francisco Inchauste is an interaction designer at Universal Mind, helping clients create great Web experiences. He regularly contributes to Web design blogs, magazines, and books. He recently served as Editor of Smashing Magazine’s UX Design section. You can connect with him on Twitter, or read more on his blog.

Advertising
  1. 1

    I love that last quote.. …soo true. Awesome article.

  2. 3

    Very useful article for someone thats new to all this, thanks again Jad and Francisco for a job well done. Keep up the great work. :)

  3. 5

    How tragic that the link that the Gestalt Theory image links to goes to a GoDaddy page saying the site expired :S

    This is a brilliant post. I’ve bookmarked for reading later once I’m not at work – thanks so much for educating me in an engaging and brilliant way on a topic that could be quite tedious to learn otherwise!

  4. 7

    Excellent article, great read and very well implemented through design & layout!

  5. 9
  6. 10

    Very nice article. I just did a quick read of it as I’m on my way out the door, but I’ve marked it so I can come back and give it a proper read when I have more time.

  7. 12

    Nice Post! But after a long wait….!!!

  8. 14

    Great article. I found it very interesting and informative. I especially liked the “Knowledge Is Power’ segment. The layout is beautiful as well.

  9. 15

    Good work guys. keep it up. I hope next time I come around here, it is gonna be to show appreciation on how your article has enhanced my design skill!

  10. 16

    I love the cube comparison. That is a perfect example of generic viewpoint!

  11. 18

    This is mind blowing, like sitting in a dark theater and then someone enters and the lights are focused only on him then he begins to speak profoundly of design and you go… “wow! dude that’s mind blowing.”

  12. 20

    I really liked this article, very useful!!

  13. 21

    Beautiful post! Loved the Joshua Tree. I think design is a very complex skill that is meant to communicate rather than decorate. “Knowledge is Power” couldn’t agree with you any more.

    Thanks for sharing

  14. 23

    Great article, and i love the header!

  15. 24

    The Joshua Tree is much like Heidegger’s strangeness of being. One does not notice something until it is pointed out to them. Very insightful post!

    • 25

      Yes, that was a great example. It’s like when you buy a new car. Then all of a sudden, you start noticing all the cars around that is the same make as your car. :)

  16. 26

    Great article. Important points. A new way to look for design principles.

  17. 27

    Knowledge is Power! Thanks for the additional knowledge shared.

  18. 28

    Loved that last quote, nice post.

  19. 29

    Francisco, thanks again for this excellent post. I really learned a lot from it and I hope we can collaborate again in the future. I really believe that our design community needs to think more often and that starts with reading posts such as this one.

    I personally have never thought about what makes a design look good. This article just goes really in-depth and explains just that. Great job! :D

    • 30

      Thanks Jad. It was good to finally collaborate with you. I appreciate the opportunity and your patience while I took my time writing this and working on the design :)

      You’ve done a nice job with the content and variety of posts on this site and I look forward to working with you again.

  20. 31

    Awesome job curating this Jad. The article is great and it feels like a real editorial piece. This kind of care really makes your blog stand apart from the “same ol’ same ol'” sites all around the web.

    Keep up the great work.

  21. 32

    Very interesting to read.

    Also, congratulations on these unique blog designs you’ve been doing lately. Really love them!

  22. 33

    Would love to see a blog on web-design, how to improve the transition from pen and paper to photoshop. As I always find it diffiicult when opening a photoshop document…staring at a black document

  23. 34

    Awesome article Francisco! The Joshua Tree thing happens all the time when you really think about it. I’ve noticed that only after I bought my Mazda 3, do I now REALLY realize how many of those cars are on the road; I find myself picking them out all the time (but never did before).

    Keep up the great original post designs Jad!!

  24. 35

    A treat to the eyes, food to the brain. Great article.

  25. 36

    Nice article here, freshes up some knowledge :)

  26. 37

    Very, very interesting article, it is so amazing how much our brain computes in so little time, when looking at the natural world and art. This article let me realize how much I have to think about when doing any design and with enough practice, these principles can easily become second nature to the designer….Nice! :)

  27. 38

    That was a great article. Thanks!

  28. 39

    Great blog article. So informative and interesting! Will definietly take away some of these tips and put them into action.

  29. 40

    An excellent portrayal of how your mind works with pictures.

  30. 41

    Henrik Kjelsberg

    August 27, 2010 1:32 pm

    Well written article & nicely designed page.

  31. 42

    Hey Francisco,

    Great article and it looks like we’re totally on the same page. That’s the tag line of my blog, Understanding Graphics!

  32. 44

    A good article and well presented. All it needs now is a go-out-and-try-it-yourself exercise so people can go “Aah! I get it.” and you’ll be the best website around. Thanks. x

  33. 45

    I like your post on ‘Do you know what makes your Design good’. So abstract and meaningful..

    • 46

      I liked the article too. Unfortunately, it was lifted word-for-word from the first chapter of Robin Williams’ book “Non-Designer’s Design Book”. Chapter 1: The Joshua Tree Epiphany. I did not see any citation or attribution at the end of this article other than “written by Francisco Inchauste” on top. There is a serious credibility issue here, Mr. Inchauste. Please make it right.

  34. 47

    Nice article about knowing what good design is all about. Too bad you ripped it off of Robin Williams’ book “The Non-Designer’s Design Book. Word-for-word, I might add. Correct me if I’m wrong but I did not see any citations, other than “written by Francisco Inchauste” on top of it.

    Did you really think you could get away with something this blatant? This happens to be one of my favorite books. Please explain.

  35. 48

    Okay, I finally caught the miniscule citation on the bottom. You really should put Robin Williams’ name right under her piece for clarity. I think a lot of your fans think you wrote it, judging from the tenor of exchanges.

  36. 49

    Fantastic and very informative article. Lovely illustrated

  37. 50

    Great read packed in a beautiful design!

  38. 51

    Very interesting article, keep it up!

  39. 52

    Oh just another redundant-you’ll-find-many-more-of-these-everywhere-else UX stuff.
    Because when you come to the real world, It’s all about color, shape and making stuff work together. Nothing new to see here.
    As someone pointed up in the comments, it seems ripping content is a modus operandi of the author and THIS also smells like repeat to me.
    Go to any basic drawing class and you’ll get everything you got here plus more.

  40. 53

    This is an awesome article Francisco, thank you for taking the time to share it with us. My tactic is to ask the client what they want to achieve… this is a profound question, their answer always leads back to revenue.

    I then tell the client to get on with their job while I go about solving the problem for them. I am blunt, just as Paul Rand appeared to be to some people. If a client wants to lead the design, they should also be prepared to take responsibility for it’s failure.

    Too many inexperienced designers (I can see that some have arrived here and commented), will ask the client if they are happy with the result. A good designer will know that their work will get good results. Generally a design for a business has nothing to do with what the client likes. The design simply needs to solve a problem, not satisfy a client’s taste. The client needs to like the results, that’s all.

    Recently a client asked me, “Can we have a green gradient background and a spinning logo?”. My reply was “No! Unless you can prove to me hands down, that they will increase your revenue, no”. Blunt? Yes, very blunt, but I am always prepared to walk away from a project if the client wants to run it.

    When was the last time you hailed a Taxi and then jumped in the driver’s seat? The same goes with design. Be clear in your first meeting that you will solve their problem and in the end they will enjoy the results…

    “Design is the method of putting form and content together. Design, just as art, has multiple definitions; there is no single definition. Design can be art. Design can be aesthetics. Design is so simple, that’s why it is so complicated.” – Paul Rand

    I was going to bookmark this page but I decided to print it out and place it in my portfolio. Some prospects may need to read it before I work for them! :o)

    Oh, by the way, if you are wondering about the green gradient background design? I didn’t do it, or the spinning gizmo … I didn’t use any of their ideas at all. A week into the site launch and their ideas are a mere speck in the distance … they are getting a heap of leads already.

    Cheers,
    Paul

  41. 55

    A perfect article that all designers should know. Great work!

  42. 56

    Great article. Just curious why there is a bunch of white body copy on black textured background. Seems to miss a very important principle.

↑ Back to top