Symmetry vs Asymmetry in web/app design

If you want to read some of my thoughts with better formatting (and lots of visuals) you can see it here: http://ift.tt/2cqU5o6

Otherwise, I've pasted some things to think about below. I'd love to hear your thoughts on the topic.

Symmetry has proven to be very appealing to the human eye. In nature, we enjoy the beautiful symmetrical colors on butterflies and the radial symmetry of flowers. Studies show, in general, the more symmetrical a person’s face, the more attractive we find them. In web and app design, symmetry has visually pleasing benefits, but can be very difficult to achieve and not appropriate in all contexts. Let’s explore when to strive for symmetry and when asymmetry is superior. 

You can see information about the AirPods and Accessories are in two boxes of equal dimensions. I’ve added red lines to emphasize the perfect alignment of text from each box. Using the same colors on each side further balances the design.For more traditional designs and those that want to portray an aura of trust, symmetrical layouts work well. Symmetrical designs feel balanced and unthreatening. Apple’s website uses many symmetrical elements. Look at a current shot from Apple’s website on the left.

However, while Apple is known for creating beauty through simplicity, asymmetry is more appropriate for other brands. You can use asymmetrical layouts to draw eyes where you want them, such as a call to action. These designs also make it easy to convey movement. Both Gatorade and Nike use asymmetry for their logos.

Whether you want the harmonious look of symmetry or the excitement of asymmetrical designs, in addition to the layout, you need to pay attention to colors used. Different colors feel “heavy” or “light” in comparison to each other, so we want to arrange them in a way that makes people feel comfortable. 

Psychologist Edward Bullough conducted an experiment on visual weight using buckets of paint. Subjects were given one bucket of red paint and another of pink. Standing in front of a ten foot wall that was divided horizontally, they were told to paint each half of the wall a different color. Practically all the experimentees painted pink on top and red at the bottom. Pink is visually lighter and painting it below the heavy red looks unnatural. Keep in mind red is the heaviest color, then blue, next green, and finally yellow (the lightest).

When we design, it’s important to consider not only function, but the feelings our designs portray. Symmetry will makes users feel balanced, while asymmetry gives us control over where eyes focus and shows movement. No matter what the layout, if “heavy” colors are on top of “light” colors, the user will feel unease. When in doubt, test it out.

Great design resource

100 Things Every Designer Needs to Know About People (Voices That Matter) Submitted September 15, 2016 at 06:08PM by HannahKH http://ift.tt/2cuaDby