Type Treatment & Layout Sample Book

Transcription

1 GRC 104 Layout & Typography Fundamentals Semester Project Book: Type Treatment & Layout Sample Book Compiled by Gretchen Manske

2 Layout & Typography Sample Book Concept / Example Title: Emphasis: One Element is the biggest. Explanation (definition or comment how it does/doesn t work): In this example the watch is clearly the emphasized image. It is a simple approach with no confusion about what the product is. The over use of actual size clearly dominates the page.

3

4 Layout & Typography Sample Book Concept / Example Title: Emphasis: One Element is the biggest. Explanation (definition or comment how it does/doesn t work): Another example where the product is the main focal point and emphasized with its size in the overall layout. This type of layout tends to denote a sense of pride and attention to detail from the manufacturer. Sometimes simple is very well.

5

6 Layout & Typography Sample Book Layout & Typography Sample Book Concept / Example Title: Emphasis: One Element is the brightest. Explanation (definition or comment how it does/doesn t work): In this example the background is extremely dark and the foreground products are illuminated by light. This gives the impression that cigarettes are glowing.

7

8 Layout & Typography Sample Book Layout & Typography Sample Book Concept / Example Title: Emphasis: Changing Focus Explanation (definition or comment how it does/doesn t work): Here we have a unique approach to emphasis. The type is set in an out of focus hierarchal pattern, emphasizing the words in focus; clears the fog. With the product also emphasized being that it is the only item on the page in color.

9

10 Layout & Typography Sample Book Concept / Example Title: Emphasis: Background out of Focus Explanation (definition or comment how it does/doesn t work): By having the background out of focus we have emphasis on the foreground that is in focus. The Gucci stands out however the red type rush is lost, because the color is too close to the woman s skin tone. You can barely read that this is a fragrance for men. I also believe the picture of the product is a little too small.

11

12 Layout & Typography Sample Book Concept / Example Title: Emphasis: Increasing Type Size Explanation (definition or comment how it does/doesn t work): Two very large words scream out of this ad and bring your eye right to the center of the page to focus on the product. There is an emphasis not only in type size but in contrast to the dark red background.

13

14 Layout & Typography Sample Book Concept / Example Title: Emphasis: Adding a shadow Explanation (definition or comment how it does/doesn t work): This is an attempt to emphasize the woman from the background of a liquor label. I don t it works very well because there is too much confusion in similar colors and background drop shadows seem to be an easy or cheap way to give emphasis, perhaps the label word be better off in black and white.

15

16 Layout & Typography Sample Book Concept / Example Title: Contrast: Type color on tones of grays Explanation (definition or comment how it does/doesn t work): In this ad we have a tonal gray background with no geometrical shapes. The first set of type is red and located in the lightest gray area because its size is smaller than the latter. The larger type is centered in the visual center of the background image where the nude male and female seem to in the process of Anyway it does work and the type weight doesn t cover too much.

17

18 Layout & Typography Sample Book Concept / Example Title: Contrast: Contrast in color Explanation (definition or comment how it does/doesn t work): This ad uses contrast by using a naturally colorless background to juxtapose a yellow bag in the visual center. The pink scarf around the woman s neck is also contrasting and leads your eyes down to the bag. Although the printing on the bag is not sharp I still say this ad works well, because the type of consumer that would read this magazine will know what the type is.

19

20 Layout & Typography Sample Book Concept / Example Title: Contrast: Tones of Colors Explanation (definition or comment how it does/doesn t work): The entire ad is in a yellow green color except for the type, which is the name of the product and the underwear which is the product. This ad works well and I believe the unorthodox color creates a visual attraction.

21

22 Layout & Typography Sample Book Concept / Example Title: Contrast: Type color shape color Explanation (definition or comment how it does/doesn t work): A black and white background and Kangaroo with a bright yellow tail and the words to match is the contrasting element in this ad. The type style all in lower case works well on the black. The yellow label down below is a where your eye comes to a visual rest which incidentally is the product. Great ad!

23

24 Layout & Typography Sample Book Concept / Example Title: Contrast: Texture and Color Explanation (definition or comment how it does/doesn t work): In the background we have a flowing texture of hearts shapes emanating from the center of the ad. In the center we have a complimentary color scheme on a contrasting texture. The bottle is smooth, large and red. The white type on at the bottom is also a nice contrast to the black table. The ad works well.

25

26 Layout & Typography Sample Book Concept / Example Title: Contrast: Texture Explanation (definition or comment how it does/doesn t work): This is an example of an ad that lacks contrast or emphasis. The word Courvoisier clearly seems to be lost in the background of the gold dress. The lettering at the bottom of the ad is virtually invisible.

27

28 Layout & Typography Sample Book Concept / Example Title: Contrast: Shapes and color Explanation (definition or comment how it does/doesn t work): The background is black and white photos of a school yearbook. The contrasting image is a color animated figure which also is a contrast to the realism of the other student s Pictures.

29

30 Layout & Typography Sample Book Concept / Example Title: Contrast: Type contrast Explanation (definition or comment how it does/doesn t work): The background is a black and white illustration, the type is bold and a hot pink which stands out very nicely from the background.

31

32 Layout & Typography Sample Book Concept / Example Title: Contrast: Shapes Explanation (definition or comment how it does/doesn t work): In this ad we have a contrast between the natural form and color of the human body, and the geometrical shape and dark color of the Gucci watch. This is a very nice ad a unique way to create a visual contrast. The overall flow of the ad is sensual and professional.

33

34 Layout & Typography Sample Book Concept / Example Title: Contrast: Shape Explanation (definition or comment how it does/doesn t work): This is a very nice ad that shows a contrast of shape and color. First of all the background is cold, icy and has a rough texture. The tie however is geometric in shape and has a nice warm color. The texture is also geometric and has a soft sheen. This is a perfect example of texture and shape contrast.

35

36 Layout & Typography Sample Book Concept / Example Title: Balance: Vertical Asymmetrical balance Explanation (definition or comment how it does/doesn t work): This ad has more detail with the hand on the left side, but more importantly the image is cocked in the direction of the left, therefore when placing the weighty slightly colored Dunhill bottle the overall balance is still under control. The logo on the left bottom assures that the ad stays in alignment.

37

38 Layout & Typography Sample Book Concept / Example Title: Balance: Vertical Asymmetrical Balance Explanation (definition or comment how it does/doesn t work): This ad is defiantly lacking balance; the left side is very weighty and has no counter balance on the right. The 2g net carbs type isn t enough to pull the balance back. This ad lacks more than just balance it lacks emphasis and unity.

39

40 Layout & Typography Sample Book Concept / Example Title: Balance: Vertical Asymmetrical Balance Explanation (definition or comment how it does/doesn t work): A good example of asymmetrical balance the figures balance each other out and the background images are also place with proper weight distribution. The ad however lacks any real power, the colors seem to be a little immature and the use of the dot process creates a muddy, camouflage. Even though balance is maintained I don t think the ad works well.

41

42 Layout & Typography Sample Book Concept / Example Title: Balance: Vertical Symmetrical Balance Explanation (definition or comment how it does/doesn t work): This ad has a symmetrical balance, however some of the type size on the right could be enlarged a little or the logo could be moved to the other side on the bottom. All in all a pretty plain and boring centered ad.

43

44 Layout & Typography Sample Book Concept / Example Title: Balance: Vertical symmetrical Balance Explanation (definition or comment how it does/doesn t work): This ad has Symmetrical balance. She has a lot of skin showing on her legs which balances out the skin he has showing on his chest. There are both kissing which implies a unity. Both are wearing white shirts. There is a repetition of the gold color that is also balanced.

45

46 Layout & Typography Sample Book Concept / Example Title: Balance: Horizontal Symmetrical Balance Explanation (definition or comment how it does/doesn t work): The use of watches here gives a horizontal symmetrical balance. They are evenly spaced across and the emphasis is on the watch itself imply that both sides of the watch are created with equal care and detail.

47

48 Layout & Typography Sample Book Concept / Example Title: Balance: Horizontal Asymmetrical Balance Explanation (definition or comment how it does/doesn t work): This ad is very interesting in the fact that it is not balanced yet it seems ok. I think that since the ad visually sends you from the chair to the designer and the dark photo to the right brings you back around again that it actually works. So even without a concrete balance this ad still seems to be interesting and unique.

49

50 Layout & Typography Sample Book Concept / Example Title: Balance: Horizontal Asymmetrical Balance Explanation (definition or comment how it does/doesn t work): Again we have an ad that is horizontally asymmetric; however body and facial directions seem to create an interesting implied balance. The type in the center also helps to unify the two opposing images.

51

52 Layout & Typography Sample Book Concept / Example Title: Alignment: Design elements flush left Explanation (definition or comment how it does/doesn t work): This ad has all the design elements flush left it would seem that it is a counter balance to the white space. It also balances the right side of the magazine itself I don t think it would look as good if it were say on the right page.

53

54 Layout & Typography Sample Book Concept / Example Title: Alignment: Design elements Centered Explanation (definition or comment how it does/doesn t work): Here is an ad where the main design elements are centered. There is some use of runaround text centered beneath the main visual focal point. The ad works as do many centered ads but also lacks a unique appeal.

55

56 Layout & Typography Sample Book Concept / Example Title: Alignment: Text around Free shapes Explanation (definition or comment how it does/doesn t work): This is one of my favorite examples of runaround text. The type is completely original. The elements are centered and the type flows around the body of the snake. This is an excellent piece of typography.

57

58 Layout & Typography Sample Book Concept / Example Title: Readability: Bad Example Contrast between type and background Explanation (definition or comment how it does/doesn t work): Here is a bad example of readability the dot matrix background interferes with the reading of the headline. The page to the right is even worse all done in small white text.

59

60 Layout & Typography Sample Book Concept / Example Title: Alignment: Text alignment flushes right, flush left Explanation (definition or comment how it does/doesn t work): Using right alignment on the left and left alignment on the right, creating symmetry in the layout, use of the alignment of these two lists unifies the layout design.

61

62 Layout & Typography Sample Book Concept / Example Title: Readability: Bad Example Contrast between type and background Explanation (definition or comment how it does/doesn t work): Here is another bad example of readability, the color of the background and the type are so similar that they seem to mix together. The type does not stand out above the background.

63

64 Layout & Typography Sample Book Concept / Example Title: Readability: Bad Example Contrast between type and background Explanation (definition or comment how it does/doesn t work): Here again the type is lost in the background, making this ad hard to read.

65

66 Layout & Typography Sample Book Concept / Example Title: Readability: Font design Explanation (definition or comment how it does/doesn t work): This is a good example of how a fonts design fits in with the illustration. The type is used to create strength and boldness increasing its readability and impact.

67

68 Layout & Typography Sample Book Concept / Example Title: Readability: Good Example Center Alignment, good contrast Explanation (definition or comment how it does/doesn t work): This is a good example of centered easy to read type. The type also has excellent contrast to the background and image, creating a nice vertical flow.

69

70 Layout & Typography Sample Book Concept / Example Title: Layout: Grid design, related elements Explanation (definition or comment how it does/doesn t work): These similar elements are spread out in a grid alignment while maintaining a symmetrical balance, and a center focal point. Type is set into the graphic unifying the design.

71

72 Layout & Typography Sample Book Concept / Example Title: Repetition: Similar elements Explanation (definition or comment how it does/doesn t work): These like elements are repeated at a slight right angle while the text and log are used to counterbalance this. This layout works because the repetition gives flow and unity while maintaining balance.

73

74 Layout & Typography Sample Book Concept / Example Title: Repetition: Using graphics Explanation (definition or comment how it does/doesn t work): Here is a nice example of repeating graphics that flow in a downward motion and off the page. The use of complimentary colors keeps a visual balance and the text is centered nicely between the graphics and is easy to read.

75

76 Layout & Typography Sample Book Concept / Example Title: Repetition: Using Graphics Explanation (definition or comment how it does/doesn t work): Here is an example of repetition of graphics in a descending order. This ad controls eye movement eventually leading you to the logo in the upper right corner. This is also a good example of asymmetrical balance.

77

78 Layout & Typography Sample Book Concept / Example Title: Repetition: Using Graphics Explanation (definition or comment how it does/doesn t work): Here we have another use of repeating graphics reinforcing a symmetrical layout. The alignment is of the graphics is nudged slightly to the left counterbalancing the weight of the vertical type. The background colors are in contrast and unity with each other and the graphics.

79

80 Layout & Typography Sample Book Concept / Example Title: Typographical Hierarchy: Explanation (definition or comment how it does/doesn t work): Here is an example of typographical hierarchy in an asymmetrical layout with text justified left along the graphic. The use of type is simple leaving the graphic to do all the work.

81

82 Layout & Typography Sample Book Concept / Example Title: Visual Flow: Explanation (definition or comment how it does/doesn t work): This is a good example of using illustration to capture and control visual flow. The text and logos aligned right help anchor this piece as it screams off to left.

83

84 Layout & Typography Sample Book Concept / Example Title: Integrated type and graphic Explanation (definition or comment how it does/doesn t work): This ad shows how you can use type in your actual graphic. This simple use displays a lot of what the designer wants to say about the product without having to use standard layout designs

85

86 Layout & Typography Sample Book Concept / Example Title: Integrated type and graphic Explanation (definition or comment how it does/doesn t work): Another example where the type is simply set into the graphic itself. The only problem with this method is that sometimes the message can get lost. However with a name that has been around a long time this method can be used to further cement the brand into the psyche of the consumer.

87

88 Layout & Typography Sample Book Concept / Example Title: Strong use of white space: Explanation (definition or comment how it does/doesn t work): This ad has a strong use of white space with a simple single heading. This kind of ad emphasizes the meaning of the words. The type font is also a very important giving this ad a strong ancient European style.

89

90 Layout & Typography Sample Book Concept / Example Title: Strong use of white space: Explanation (definition or comment how it does/doesn t work): This ad has a strong use of white space with a simple single heading. This kind of ad emphasizes the meaning of the words. The type font is also a very important giving this ad a strong ancient European style.

91

92 Layout & Typography Sample Book Concept / Example Title: Heading with single illustration: Explanation (definition or comment how it does/doesn t work): Another ad that draws your attention yet the brand does not to want to stay with me. I believe you have to be a little careful when you go unorthodox, because the visual could be so interesting that you are unconcerned about the message. I think this picture is an attention grabber but does not fit well with the product.

93

94 Layout & Typography Sample Book Concept / Example Title: Text set into shape: Explanation (definition or comment how it does/doesn t work): This ad uses its text set into the shape of the background graphic. The idea is to strengthen a simple message, in order for you to get in touch with them. Simplicity has its advantages in technical markets.

95

96 Layout & Typography Sample Book Concept / Example Title: Break from perpendicular layout: Explanation (definition or comment how it does/doesn t work): This ad breaks from the traditional layout design by turning itself sideways.

97

98 Layout & Typography Sample Book Concept / Example Title: Break from perpendicular layout: Explanation (definition or comment how it does/doesn t work): This ad breaks from the traditional layout design by turning itself sideways.

99

100 Layout & Typography Sample Book Concept / Example Title: Multiple Photographs: Explanation (definition or comment how it does/doesn t work): Here we have the use of many common design elements; Repetition is used in several ways used to create balance and flow. The only concern I have with this layout is the heading is so faint it s hard to read light on light lacks that necessary contrast to a heading. I understand why it was chosen as a kind of laid back casual heading unifying the attitude of the two gentlemen. However if I don t read then I don t know what it says, lol...

101