2The Four Basic Principles of Design The following is a brief overview of the principles of design. Although they are discussed separately, they are really interconnected. Rarely will you use only one principle at a time.ContrastRepetitionAlignmentProximity
3Design Considers These Elements letter caseheaders and footersline lengthhighlightingjustificationpage numberscolortype size and typefaces (fonts)marginsgraphics, images, icons, symbolsblank spacetype features (bold, italics, etc.)paragraph spacingtables, charts, diagramscolumnsparagraph lengthheadingsline spacing
4ContrastThe idea behind contrast is to avoid elements that are merely similar. If the elements (type, color, size, line thickness, space, shape) are not the same, then make them very different. Contrast is often the most important visual attraction on the page.
5Contrast makes different things different brings out dominant elements & mutes lesser elementscreates dynamismaids in the organization of information and creates organizational hierarchycan add clarityif two items are different, make them really different; avoid doing wimpy contrastOkay now that you have the information on the design principle of Contrast let’s take a look at an image.
6Contrast So look at these three images. How has the designer increased the contrast in the text elements from version to version?In the colors?In the size of elements?The graphics?In the spatial relationships?Contrast on the page draws our eye to it; our eyes like contrast. If you are putting two elements on the page that are not the same, such as two typefaces or two line widths or two colors, they cannot be similar. For contrast to be effective, make them very different.
7Contrast So take a look at these to images. To which design elements has the designer added contrast from the first version to the second?Here is a hint:Think about type, line thickness, dark and light areas, shapes, sizes, proportion, etc.
8Contrast SummaryContrast on a page draws our eyes to it; our eyes like contrast.How to get it:Add contrast through your typeface choices, line thicknesses, colors, shapes, sizes, space, etc. It is easy to find ways to add contrast, and it's probably the most fun and satisfying way to add visual interest. The important thing is to be strong.
9Contrast Summary What to avoid: Don't be a wimp. If you're going to contrast, do it with strength. Avoid contrasting a sort-of- heavy line with a sort-of-heavier line. Avoid contrasting brown text with black headlines. Avoid using two or more typefaces that are similar. If the items are not exactly the same, make them different!
10RepetitionRepeat visual elements of the design throughout the piece. You can repeat color, shape, texture, spatial relationships, line thickness, size, and type. This helps develop the organization and strengthens unity visually.
11Repetition repeat design throughout the piece of work consistency creates unityadds visual interestdevelops organization and creates consistencyrepeat some aspect of a design (horizontal rule, a certain type of bullet, a type of font) throughout an piece of workavoid repeating an element so much that it becomes annoying or overwhelmingOkay now that you have the information on the design principle of Repetition let’s take a look at an image.
12Repetition So take a look at this image. Which elements are repeated throughout this design?How does your eye move around the design?Which elements are your eyes drawn to?Repetition of visual elements throughout the design unifies and strengthens it by tying together otherwise separate parts. Repetition is very useful on one-page pieces, and is critical in multi-page documents, where we often just call it being consistent. Don’t underestimate the the value of the visual interest you can achieve through repetition--if a piece looks interesting, it is more likely to be read.
13Repetition Which elements are repeated throughout this design? How has the designer pushed consistency to turn it into part of the conscious graphic design?Avoid repeating an element so much that it becomes overwhelming or annoying. Be conscious of the value of contrast.
14RepetitionWhich elements are repeated throughout this design? How has the designer pushed consistency to turn it into part of the conscious graphic design?
15AlignmentNothing should be placed on the page arbitrarily. Every element should have some consciously designed visual connection with another element on the page. This creates a clean, fresh, and intentional look.
16Alignment creates a visual flow visually connects elements unifies and organizes the pagenothing should be placed on a page arbitrarilyavoid using more than two text alignments on a pagecenter alignment and full alignment are more difficult to read than right
17Alignment The web site’s page is arranged along a curved alignment. How does your eye move through them?How about the centered alignment of the red links below?
18AlignmentThe main pages of the Art Institute’s site are contained in frames with a centered alignment.Is it easy to scan the list?How might the navigability be improved through the use of a stronger alignment?
19Alignment Take a look at this design. Find two (or more) elements that are aligned on the design.How does the alignment of the elements create a sense of organization in the design?Unity is an important concept in design. To make all of the elements on the page appear to be unified, interconnected and interrelated, there needs to be some visual tie between the separate elements. Even if they are far apart on the page, they can appear connected or related simply by their placement on the page.
20AlignmentDescribe the sense of organization achieved through unity in this page.How can you relate the feel of the piece to the alignment scheme?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.Avoid using more then one text alignment on the page. That is, don’t center some text and right align other text, unless you have a good reason for doing so.
21Alignment SummaryNothing should be placed on the page arbitrarily. Every element should have some visual connection with another element on the page. Unity is an important concept in design. To make all the elements on the page appear to be unified and connected their needs to be some visual tie between the separate elements. Take a look at designs you like. No matter how wild and chaotic a well-designed piece may initially appear, you can always find the alignments within.
22Alignment Summary How to get it: 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.
23Alignment Summary What to avoid: Avoid using more than one text alignment on the page (that is, don't center some text and right-align other text). And please try very hard to break away from a centered alignment unless you are consciously trying to create a more formal, sedate presentation. Choose a centered alignment consciously, not by default.
24ProximityItems relating to each other should be grouped close together. When several items are in close proximity to each other, they become one visual unit, rather than several separate units. This helps organize the information and reduces visual clutter.
25Proximity groups related elements separates unrelated ones helps to organize elements, imply relationshipshelps with use of blank spacereduces clutter-creates visual relationships with elements that belong togetherdon’t stick things in the corners and in the middle of the page
26ProximitySquint your eyes slightly and count the number of visual elements by counting the number of times your eye stops.If there are more than 3-5 items, can some be grouped in closer proximity to become one visual unit?When several objects are in close proximity to each other, they became one visual unit rather than several separate units. Items relating to each other should be grouped together. Be conscious of where your eye is going. Where do you start looking? What path do you follow? Where do you end up; after you’ve read it, where does your eye go next? You should be able to follow a logical progression through the piece, from a definite beginning to a definite end.
27Proximity Squint and count again. If there are more than 3-5 items, can some be grouped in closer proximity to become one visual unit?
28ProximityWhat could the designer do to make the navigation bar easier to scan?
29Proximity What elements are grouped together in close proximity? How does the proximity of the elements help organize the information?If information is logically organized, it will be less likely to create confusion, and will be read.Avoid too many separate elements on the page.Don’t stick things in the corners and in the middle.Avoid using equal amounts of white space between elements unless each group is a part of the subset.Don’t create relationships with elements that don’t belong together. If they’re not related, move them very far apart.
30Proximity SummaryWhen several items are in close proximity to each other, they become one visual unit rather than several separate units. Items relating to each other should be grouped together. The basic purpose of proximity is to organize.
31Proximity Summary How to get it: 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), see which of the separate elements can be grouped together into closer proximity to become one visual unit.