Presentation is loading. Please wait.

Presentation is loading. Please wait.

Visual Design: Basic Topics Graphic Form Basics Typography Color Layout.

Similar presentations


Presentation on theme: "Visual Design: Basic Topics Graphic Form Basics Typography Color Layout."— Presentation transcript:

1

2 Visual Design: Basic Topics Graphic Form Basics Typography Color Layout

3 Visual Design: Graphic Form Basics STRUCTURAL ELEMENTS as CONCEPTUAL ELEMENTS: of Point, Line, Plane, Volume as VISUAL ELEMENTS: of Shape, Size, Color, Texture CONTEXTUAL ELEMENTS as RELATIONAL ELEMENTS: of Direction, Position, Space, Gravity as PRACTICAL ELEMENTS: of Representation, Meaning, Function Wong, W. (1972). Principles of two-dimensional design. New York: Van Nostrad Reinhold Company.

4 Visual Design: Graphic Form Basics STRUCTURAL ELEMENTS as CONCEPTUAL ELEMENTS: of Point, Line, Plane, Volume

5 Visual Design: Graphic Form Basics STRUCTURAL ELEMENTS as VISUAL ELEMENTS: of Shape, Size, Color, Texture

6 Visual Design: Graphic Form Basics CONTEXTUAL ELEMENTS as RELATIONAL ELEMENTS: of Direction, Position, Space, Gravity

7 Visual Design: Graphic Form Basics CONTEXTUAL ELEMENTS as PRACTICAL ELEMENTS: of Representation, Meaning, Function

8 Typography Visibility and legibility … the viewer needs to be able to see the letterforms and to distinguish them sufficiently well to make sense out of them. 1.Good contrast and sufficient size help letterforms to be visible. 2.Complete outlines and discriminable shapes make letterforms legible.

9 Low contrast between the text and the background reduces visibility. Depending on the audience, legible text may be too small for good visibility. Low contrast between the text and the background reduces visibility. This text may not even be visible to those who are color blind.

10 Reducing low-resolution images with text in them is a common cause of illegible lettering. Even visible text is difficult to read when the letterforms are not clearly delineated.

11 Animal Science Careers Economic Education Citizenship Communications Expressive Arts Family Sciences Foods, Nutrition and Health Leadership Plants, Soils, and Entomology Science & Technology 4H Online Workbooks and Study Guides Swine Project Workbook 2b: Raising market animals page >> 4-H Home All Animal Science Workbooks Parts of the hog You need to know the parts of your hog. To keep your hog healthy, you need to examine it and talk to a veterinarian about it. When your hog is judged at the 4-H competition or sold at market, the judge or the buyer will look at specific parts of the hog to decide how valuable it is. Some of the parts have names that you will recognize easily. Some of them have special names that farmers use when they talk about pigs. Print this page and study the names with your Project Buddy. Pay special attention to the parts with unfamiliar names. headneckshoulderbackloinrump tail stifle joint ham hock dewclaw belly teats snout jowl elbow knee cannon bone pastern foot (toes)

12 Investigate the legibility problems associated with backgrounds and text: http://www.indiana.edu/~vdim/Text/Bkgnds/Bg.HTM Explore color and contrast treatments applied to text: http://www.indiana.edu/~vdim/Text/Color/Color.HTM

13 Typography Readability … text may be visible and legible, but still difficult to read. An accomplished reader scans lines of text in chunks, picking up familiar words by their shapes - not letter by letter. At the end of each line, the reader’s eye “sweeps” back to the beginning of the next line. 1. Lower case text is easier to read than text which is all upper case. 2. Medium-length lines of text are easier to scan than long lines of text. 3. Letterforms with serifs are easier to read in paragraphs than letterforms without serifs (called sans serif).

14 Each word in upper/lower case text has a more distinctive shape than that same word set in upper case only.

15 “Wall to wall text” is difficult to scan. It can also be dense, giving the impression that it is going to be hard to read and understand.

16 Shorter lines of text are easier to scan. For many displays, text blocks about 2/3 the width of the page are most readable.

17 Although many readers prefer sans serif type over serif, in studies measuring reading speed participants read paragraphs of text in serif type faster than those in sans serif. Early computer screens could not display serif type as well as sans serif, and many people have become accustomed to using sans serif typeface for computer displays.

18 HOG BREEDING ANNUAL – self-training for the professional breeder Basics: Judging hogs: depth and length of the body quiz me page 10 of 42 nextprevious Depth and length of the body Depth and length are two components of capacity, sometimes called “volume.” Capacity determines the ability of the hog to eat and grow, and of the sow to carry a litter. The other components of capacity are: Rib and chest width Balance between width, depth and length Depth should be uniform. Depth is measured from just behind the shoulder to the elbow at the front of the body, and along a line starting between the loin and rump and running to the rear flank. These measures should be equal to each other. Length should be roughly twice the measure of depth. Measure length from the fore flank to the rear flank on a straight line. Context of this lesson segment Capacity is the third among the five most important traits in judging a hog. Review the traits here: Muscling Growth Capacity Leanness Structure/soundness Return to Judging hogs Return to the Table of contents shoulder loinrump rear flank fore flank elbow rear flank fore flank elbow depth length

19 Read more about line length: http://www.indiana.edu/~vdim/Text/Length/LL.HTM Look for guidelines on paragraphs of text: http://www.indiana.edu/~vdim/Text/Parag/Para.HTM Choosing a typeface (font), including serif and sans serif” http://www.indiana.edu/~vdim/Text/Fonts/Fonts10.HTM

20 Typography The emotional (affective) aspects of type are discussed in two main ways: metaphorical … letterforms are “plain and businesslike” or “rounded and playful” or “spiky, quirky and mysterious” cultural … letterforms tend to be used in ways that constitute semiotic patterns – “fancy” typefaces are used for ceremonial or social occasions, while severely simple typefaces are used for public signage

21

22 Playful, informal, colorful, bold, bright. Historical, formal, official, conservative. Clean, precise, no- nonsense, reliable, objective. Traditional, dignified, formal, privileged, credible.

23 Typography Among the simplest aesthetic concerns regarding type are: –“color” of type (how dense and dark or open and light blocks of text are when they are set in a certain typeface) –the fit between multiple typefaces used together –anomalies in text blocks – words stuck off alone, “rivers” of open space inside the text and words or letters that fit awkwardly together

24 Salen (2001) discusses the "visual voice-over" of commercial, standardized typography as a neutral and objective tone -- "utopian, belonging nowhere, regionless, without accent." She is referring in part to the mechanically-perfected typefaces in which we tend to see most of the informational displays presented to us from commercial sources (New York, Times, Helvetica, Verdana, Ariel -- to name a few), and I would extend her observations to the mechanically-perfected layout of that information as well. Although designers speak of the "warm" qualities that a certain typeface may have when the original dies for it are cut by hand, or the algorithmic hints cause tiny variations in a digital face on purpose, the gross impact is still expected to be that of consistency and intentionality in layout. This is true for faux-informal faces as well. Load up a grunge font sometime and compare its overall consistency to that of a truly nonprofessional sample of written material.

25 yes no yes

26 Text is spread evenly across the block, without obvious “holes” or negative shapes that distract the eye.

27 The text block is narrower, but still wide enough that the text spreads evenly on most lines.

28 In several places this text block shows gaps where words have begun to pull away from each other. In addition to causing scanning problems, patchy text like this is simply unattractive.

29

30 Read more about paragraphs of text: http://www.indiana.edu/%7Evdim/Text/Parag/Para.HTM Consider these books with practical advice on text and page design: Editing by Design: For Designers, Art Directors and Editors - The Classic Guide to Winning Readers (2003) Jan V. White & Steven Heller The PC Is Not a Typewriter (1995) Robin Williams, Busch The Non-Designer’s Type Book (1998) Robin Williams, Nancy Davis (editor)

31 Color If you enjoy color, you are not alone – color has been shown to affect mood, to be a powerful stimulus for memory and to be engaging in many contexts. People like color. If you feel intimidated in handling color for design, you are not alone. Every color in a display affects every other one and no two people see color exactly alike. This doesn’t mean that there are no guidelines for using color – only that using color well takes a lot of practice. When you’re just starting to design with color, start simply.

32

33

34

35

36

37

38

39

40 Animal Science Careers Economic Education Citizenship Communications Expressive Arts Family Sciences Foods, Nutrition and Health Leadership Plants, Soils, and Entomology Science & Technology 4H Online Workbooks and Study Guides Swine Project Workbook 2b: Raising market animals page >> 4-H Home All Animal Science Workbooks Parts of the hog You need to know the parts of your hog. To keep your hog healthy, you need to examine it and talk to a veterinarian about it. When your hog is judged at the 4-H competition or sold at market, the judge or the buyer will look at specific parts of the hog to decide how valuable it is. Some of the parts have names that you will recognize easily. Some of them have special names that farmers use when they talk about pigs. Print this page and study the names with your Project Buddy. Pay special attention to the parts with unfamiliar names. headneckshoulderbackloinrump tail stifle joint ham hock dewclaw belly teats snout jowl elbow knee cannon bone pastern foot (toes)

41 HOG BREEDING ANNUAL – self-training for the professional breeder Basics: Judging hogs: depth and length of the body quiz me page 10 of 42 nextprevious Depth and length of the body Depth and length are two components of capacity, sometimes called “volume.” Capacity determines the ability of the hog to eat and grow, and of the sow to carry a litter. The other components of capacity are: Rib and chest width Balance between width, depth and length Depth should be uniform. Depth is measured from just behind the shoulder to the elbow at the front of the body, and along a line starting between the loin and rump and running to the rear flank. These measures should be equal to each other. Length should be roughly twice the measure of depth. Measure length from the fore flank to the rear flank on a straight line. Context of this lesson segment Capacity is the third among the five most important traits in judging a hog. Review the traits here: Muscling Growth Capacity Leanness Structure/soundness Return to Judging hogs Return to the Table of contents shoulder loinrump rear flank fore flank elbow rear flank fore flank elbow depth length

42 Color Full version of the color presentation: http://www.indiana.edu/~istcore/r541/2005/readings/color/color.html Read more about color in multimedia design: http://www.indiana.edu/%7Evdim/Color/Intro/Intro1.HTM Color Harmony: A Guide to Creative Color Combinations (1987) Hideaki Chijiiwa, Geoffrey Mandel (Editor), Kalikow NaKamura (Translator) Principles of Color Design (1997) Wucius Wong

43 Layout People perceive information to be better organized when it is arranged in clear horizontal and vertical patterns than when it is not. People perceive organized information to be more accessible and easier to understand than disorganized information. Instructional materials support learning. They should be perceived as organized, and their visual interest based on novelty should be highest in the presentation of relevant content.

44 Alignment The vertical and horizontal edges of shapes form perceptual lines that extend beyond the shapes themselves. This phenomenon is called “closure” and it allows us to use an underlying grid to organize displays. Most page designs are constructed on a grid system. Readers perceive the organization whether or not they perceive the grid consciously.

45

46

47

48 Most novice designers center objects in relation to each other – which is a reasonable strategy for achieving balance. Other novices simply place objects where they can fit them in, trying to be reasonably orderly about it as they go along.

49 Although these strategies do produce a “reasonably orderly” display, notice that the relationship of each object here to a regular grid is different.

50 Our ability to perceive centered items as organized is poor. Closure works better with the edges of things than it does with the middles of them.

51 We perceive the alignment of the edges on these buttons as orderly. Because we do, our eyes are not usually bothered by the unequal amounts of white space at the edges of individual buttons.

52 Proximity Shapes that appear close together are perceived to be related in some way to each other. Shapes that are farther apart seem less related. The proximity principle allows a designer to group information within the grid.

53

54

55 Composition Composition refers to the relationships of all items in a display, both to each other and to the space of the display itself. Using a grid does not, in itself, guarantee a pleasing composition. Balance and integration of all elements (including the “white space”) have to be considered as well.

56 Animal Science Careers Economic Education Citizenship Communication s Expressive Arts Family Sciences Foods, Nutrition and Health Leadership Plants, Soils, and Entomology Science & Technology 4H Online Workbooks and Study Guides Swine Project Workbook 2b: Raising market animals page >> All Animal Science Workbooks Parts of the hog You need to know the parts of your hog. To keep your hog healthy, you need to examine it and talk to a veterinarian about it. When your hog is judged at the 4-H competition or sold at market, the judge or the buyer will look at specific parts of the hog to decide how valuable it is. Some of the parts have names that you will recognize easily. Some of them have special names that farmers use when they talk about pigs. Print this page and study the names with your Project Buddy. Pay special attention to the parts with unfamiliar names. headneckshoulderbackloinrump tail stifle joint ham hock dewclaw belly teats snout jowl elbow knee cannon bone pastern foot (toes)

57 Animal Science Careers Economic Education Citizenship Communications Expressive Arts Family Sciences Foods, Nutrition and Health Leadership Plants, Soils, and Entomology Science & Technology 4H Online Workbooks and Study Guides Swine Project Workbook 2b: Raising market animals page >> 4-H Home All Animal Science Workbooks Parts of the hog You need to know the parts of your hog. To keep your hog healthy, you need to examine it and talk to a veterinarian about it. When your hog is judged at the 4-H competition or sold at market, the judge or the buyer will look at specific parts of the hog to decide how valuable it is. Some of the parts have names that you will recognize easily. Some of them have special names that farmers use when they talk about pigs. Print this page and study the names with your Project Buddy. Pay special attention to the parts with unfamiliar names. headneckshoulderbackloinrump tail stifle joint ham hock dewclaw belly teats snout jowl elbow knee cannon bone pastern foot (toes)

58

59

60 Layout The Non-Designer's Design Book (2003) Robin Williams Making and Breaking the Grid (2005) Timothy Samara Editing by Design: For Designers, Art Directors and Editors - The Classic Guide to Winning Readers (2003) Jan V. White & Steven Heller Universal Principles of Design Will Lidwell, Kritina Holden, Jill Butler


Download ppt "Visual Design: Basic Topics Graphic Form Basics Typography Color Layout."

Similar presentations


Ads by Google