Non-designer’s design principles Dr. Shuyan Wang

2  One… Learn the Principles.  Two… Recognize when you are not using them.  Three… Apply the principles.

3  C – CONTRAST  Avoid using elements that are similar.  R – REPETITION  Repeat elements to establish continuity and organization.  A – ALIGNMENT  Every element has a place, and should be connected with other elements on the page.  P – PROXIMITY  Related items should be grouped together.  When in close proximity, seen as one unit rather than several.

4 Grouping related items together. Physical closeness implies a relationship. When several items are in close proximity to each other, they become one visual unit rather than several separate units. Helps organize information, reduces clutter, and gives the reader a clear structure.

5 Last four flowers are separated. The reader understand this instantly without even being conscious of it. You know the last four flowers are somehow different because they are physically separated from the rest of the list. In this list, all the flowers are listed together. None are separated.

6 Squint your eyes slightly and count the number of visual elements on the page by counting the number of times your eye stops. If there are more than three to five items on the page, of course it depends on the piece, determine which can be grouped together into closer proximity to become one visual unit.

7 Avoid putting things in the corners or in middle just because the space is empty. Avoid too many separate elements on a page. Avoid confusion over whether a headline, subhead, caption, graphic, etc., belongs with its related material. Avoid creating relationships with elements that don't belong together.  If they are not related, move them apart from each other.

Should phone number be top right? Should name be top left? Should the address be separated? GOOD? BETTER?

With correct proximity, this card is now organized both intellectually and visually. And thus it communicates more clearly.

By using the principle of proximity: Organize the types of dances. Communicate immediately who, what, when, and where. Customers do not have to search through the crazy slanted text..

Move the headlines closer to related paragraphs of text: Clearer organization. More room on the page. Group phone and address so they stand out as important information. Changed centered alignment to flush left. This created more room so the graphic could be larger.

After: Related items grouped together. Creates visual cues. Become an organized group. Organize information, easier to read and to remember. *May be better to group address and phone.

14

15  Alignment text is either flush left, flush right, centered, or justified.

16 Alignment forces the page to have more unity through invisible lines connecting what your eyes and mind see. Tells the audience that items belong together even when the items are not close in proximity.

17 Be conscious of where you place elements. Always find something else on the page to align with, even if the two objects are physically far away from each other. Align photos or illustrations with edges and/or baseline.

18 Avoid using more than one text alignment on the page Avoid a centered alignment unless you have to Choose a centered alignment consciously, not by default

19 Find a strong alignment and stick to it. Ragged edges should be made as smooth as possible. The strong line on the right side of the text and the strong line on the left side of the image are next to each other, making each other stronger. The white space now is floating free off the left edge. The caption has also been set against the same strong line of the edge of the image.

Should everything be smashed together? Should all of it be centered? Is it an inspiring ad?

Apply rules of Proximity *text is close together Apply rules of Alignment *text is left aligned

23

24 Repeating the visual elements throughout the design. Repetition unifies and strengthens a design by tying together otherwise separate parts.

25 Unify. Add visual interest. The purpose of repetition is to unify and to add visual interest. Don't underestimate the power of the visual interest of a page - if a piece looks interesting, it is more likely to be read.

26 Repetition is like accenting your clothes. Woman wearing a black dress with a black hat, might accent her dress with red. She uses repetition of the red color in her red heels, red lipstick, and red purse.

27 Avoid repeating the element so much that it becomes annoying or overwhelming. Be conscious of the value of contrast.

28 Repetition is useful on one- page pieces, and critical in multi-page documents, where we often just call it being consistent. Repetition doesn't mean you have to repeat exactly the some thing. Headlines are same typeface, but different colors. Illustrations are all different styles, but funky and fifties. Make sure you have enough repetitive elements so the differences are clear, not a jumbled mess.

30

31 It is easy to find ways to add contrast, and it’s possible the most fun and satisfying way to add visual interest. The important thing is to be strong. Line Thickness Colors Shapes Size Space

32 Avoid contrasting a sort-of heavy line with a sort-of heavier line. Avoid contrasting brown text and black headlines. Avoid using two or more typefaces that are similar. If the items are not exactly the same, make them very different!

Before: Lines are too long. Too much text. No visual contrasts attract the eye. After: Created headline to catch someone's eye. Created contrast in the text, eyes will be attracted to certain parts of it as they skim through it. Enhanced the layout with strong alignments and use of proximity.

What is good? Contrast – headline, use of bold text Repetition – not sure there is any Alignment – left alignment Proximity – grouped text using borders and shading What could be better? More white space around text Allow more space between Header and text Possibly not indent first paragraph

38 Robin, W. (2008). The non-designer’s design book. Peachpit press. Images are from: ics.html