Lectures
Back Home Lectures Assignments... Syllabus
Home > Lectures > Message Design

Message Design

  • Message Design
    • Principles of Design
      • Proportion
      • Balance
      • Contrast
      • Harmony
      • Rhythm
      • Unity
    proportion
      • Proportion
        • The relationship among elements in a design, including drawings, paintings, sculptures, architecture and layouts in publications.
        • One of the most effective ratios is known as the golden rectangle, or the golden ratio.
          • Most pleasing to the human eye.

        • Golden rectangle, or golden ratio
          • Proportions about 3 to 5
          • 3 to 8 OK
          • Exactness not essential
          • Basic shape of human beings, hands, faces and feet

        • In nature, the golden ratio is known as the divine proportion.
        • The golden ratio is based on a mathematical relationship of elements of a shape, as related to the whole.
          • This is known as phi.
          • Where pi is 3.1416 rounded, phi is 1.618 rounded.

        • Phi & Fibonacci series
          • Discovered in the 12th century by Leonardo Fibonacci of Pisa
          • Numerical series and foundation for phi
            • Starting with 0 and 1, each new number is the sum of the two before it
            • 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, …
            • 0 + 1 = 1;  1 + 1 = 2;  1 + 2 = 3;  2 + 3 = 5;  3 + 5 = 8…

          • The Fibonacci spiral is found in nature, from atoms to galaxies.

          • The Fibonacci spiral is mimicked in art, architecture and design.

          • https://www.youtube.com/watch?v=fmaVqkR0ZXg#t=179
          • https://www.youtube.com/watch?v=kkGeOWYOFoA

        • First thing the eye notices is the shape of a layout as a whole. 
          • Should be interesting to the eye. 
          • Parts should be related in shape, but not monotonous in size.
        • Consider margins and relationship of type and art with each other.
          • Margins outside border larger than margins within the border. 

        • Proportion can give positive direction
          • Aids comprehension:
          • Optical Center: Spot the eye hits first on page.
            • Slightly above mathematical center, slightly to left.
              • General area for directional reference, rather than a precise point within a format.
              • Natural aid.
                • Use as a focal point, fulcrum, or orientation center for placing elements in the layout.

    Top

      • Balance
        • Elements placed naturally
          • Not top or bottom heavy, or one side to another

        • Formal balance (symmetrical): 
          • Elements in precise relationship to each other.
            • Equal weight above and below optical center; to left and right. 
            • Elements of equal size and weight.
            • Suggests formality, exactness, carefulness, stiffness.
            • Dignified, reserved. 
            • Consider message, target audience.

        • Informal balance (asymmetrical): 
          • Elements of similar weight, not precisely same.
          • Placed in informal relationship, top to bottom; right to left.

      • Harmony
        • All the elements must work together.
          • 1. Harmony of shapes;
          • 2. Harmony of type;
          • 3. Harmony of tones.
        • 1.  Shape
          • General structure of the elements is the same.
            • Shape of type same as shape of page or printed area;
            • Shape of art and copy blocks follow this pattern.
        • 2.  Type
          • Letter designs cooperate and blend together.
            • Types of one family and similar series of that family. 
        • 3.  Tone
          • Weights and designs of elements. 
            • Bold illustrations with bold type.
            • Feminine, masculine, youthful, dignified, fun, etc.

      • Contrast
        • Must also have contrast. 
          • Difference should be apparent. 
          • Two type families from different races can provide harmony and contrast
            • One should clearly dominate.
          • One piece of art should clearly dominate.
      • Rhythm
        • Movement of vision.
          • Dynamic layout:  Visual syntax
            • Readers’  visual progression through the page.
            • Natural flow: As eye scans page: 
              • From optical center, Z through page. 
              • Provides natural placement of elements.

      • Unity
        • Holds page design together
          • Prevents looseness and disorder.
          • Adds professional look. 
          • Simplicity is key.
        • Alignment is basic to order and simplicity.
          • Provides framework.
          • The edges of elements on same horizontal or vertical plane. 

        • White space, or negative space
          • Enclose everything in a border of white space (not lines, frames).

        • Keep elements consistent
          • The same basic shape, tone, color or mood throughout.
          • But emphasize important elements for contrast, rhythm.
        • Keep the distance between related elements equal. 
        • Key is proximity and alignment

    Top

    • Typography
      • Choosing appropriate typeface is important to good design, effective communication.
        • Type breaks the white or background color of the paper or Website into various shapes.
        • Spaces between letters, words and lines of type contribute to design, readability, texture, tone.

      • Serif—finishing stroke at the ends of the stems of letters in some typefaces
        • A, E, T,  l,  i.
      • Sans serif—Sans = without. No finishing stroke at end of stems.
        • A, E, T,  l,  i.

      • Typography Organization
        • Type is organized into groups or styles; families; fonts and series.
          • Groups—based on historical development
            • Text
            • Oldstyle Roman
            • Transitional Roman
            • Modern Roman
            • Sans Serif
            • Square-Serif; Script; Cursive; Novelty
        • Text:  Oldest, like calligraphy.
          • Used by German monks in Gutenberg’s time, 15th century
          • Difficult to read in all caps or in several lines.
          • Used today on newspaper banners, specialty announcements, diplomas.
        • Oldstyle Roman: Lighter, more elegant.
          • Designed in Italy, France and Germany. 
          • Variation in thickness of strokes. 
          • Dates to 1465
        • Transitional Roman
          • Type in transition from Oldstyle to Modern.   
            • Little contrast. 
            • Angle of thin strokes not as pronounced.
            • Mid 18th century 
        • Modern Roman
          • Late 18th century.
          • Straight, thin, unbracketed serif. 
          • High contrast: thick v. thin strokes. 
          • Bodoni
        • Square Serif
          • Also block type, slab serif
          • Heavier, bolder serif, squared serif.
          • Clarendon designed in 1845. 
          • Stymie and Beton Extra Bold.
        • Sans Serif
          • Also gothic or grotesque
          • Uniform strokes, without serif.
          • 1920s.  First used for poster ads.
          • Often preferred for display and headline type.
          • Best for Web
        • Script & Cursive
          • Emulates handwriting.
            • Script letters appear to be joined. 
            • Cursives do not appear to join.
        • Novelty
          • Not precise.
          • Create sense of mood, time or decoration.
          • Broadway, Calypso, Rustic.

      • Type Families
        • Families:  Arial, Times New Roman, etc.
          • Family variations (branches)
            • Basic family design characteristics remain.
            • Variations involve:
              • Width:  condensed  or narrow; extended or wide;
              • Weight: light, semibold or demibold, bold, extrabold
              • Posture: italic,[i] or roman [r] (roman assumed).

      • Fonts
        • Font—the letters, numerals, punctuation marks, and other symbols that constitute a branch of a family in one size. 
          • Some fonts have large [c] and small caps [sc] (used in legal citations).

      • Measurements
        • In graphics, units of measurement are the point, pica, em, en, unit, and agate line.
          • Type size is measured in points.
            • From top  of highest ascender to bottom of lowest descender. 
            • Usually 4-pts. to 72-pts.  Now 144 pts. is common  
            • Type sizes 14 pts and larger are called display type.
            • Body copy is 4 pts. to 13 pts. 
            • Most readable body type is 10 points to 12 points (in print).

      • Leading
        • Interline spacing or line-spacing. 
          • Measured in points.
          • From metal or “hot” typesetting.
        • 1 to 2 points adequate for most text. 
          • Word and InDesign are automatic
          • 20% of type size

      • Type Layout
        • Justified
          • All lines even, flush left and flush right.
          • Achieved by word-spacing and letterspacing. 
          • Used for relatively narrow columns
          • Awkward for letter-size or very narrow columns.
            • Can also cause too many hyphenations
        • Ragged right, or flush left [fl]: used increasingly
          • Common starting point on left.
          • Lines of different lengths: Reduces hyphenations
          • No adverse effect on readability: Uniform word-spacing. 
        • Ragged left [fr]: Less common.
          • Eye is used to returning to common point.
          • Use sparingly

      • Choosing type
        • Most important—Readability
          • Speed and accuracy of recognizing and comprehending printed material.
            • Comprehension is key.
          • Pretest choice
          • Tests show public preference for Roman (serif) over sans serif in print. 
            • Can read faster 75% of time in both 10 & 14 pica measures. 

        • Psychological implications—subjective.
          • Type should match mood and aim of message
            • Strong, bold, light, fanciful, raw, delicate, simple, sophisticated. 
          • Consider audience.

          • Use few type styles, one to three families.
    Top
    • Color

      • Reasons for using color
        • Eye appeal
        • Attract attention!
        • Create mood
        • Accent and contrast
        • Direct reader through message
        • Create identity or association
        • Aid retention

      • Color systems
        • For Print: CMYK
        • For Web: RGB
        • Premixed colors: Pantone, Truematch
    • Graphics & Illustrations
      • Determine the purpose of the graphic
        • It should help readers understand the text
      • Assure the accuracy and validity of the data
      • Make sure the source is reliable

      • Refer to graphics in the text
      • On the graphic, provide:
        • Title, number, explanatory notes, keys or legends if necessary, information source
          • Use Arabic numbers

      • Where to put graphics
        • Place graphics where they won't interfere with the natural flow of text.
          • Same page if simple, as with an informal table
          • Opposite page on two-page spread if complex, large
          • Following page most common (refer to graphic first)
          • As attachment or appendix if:
            • Text contains many references to it
            • Less important, supporting material and would only interrupt flow

      • Functions
        • Illustrate a point
          • Illustrate figures with charts, diagrams, bar graphs, maps, pictographs
          • Informational graphics: Charts/graphs
            • Numbers more effective than size to show differences;
              • single comparisons best. 
            • Keeping graphics simple allows quicker, more comprehensive understanding.

      • Types of illustrations reproductions

        • Halftones (print: BHT; 4CPHT: CMYK)
          • The illusion of continuous tones is created by breaking the printing image into dots
          • The dots vary in size and proximity
        • (Electronic display): Grayscales, TiFF, GIF, JPG. Pixels instead of dots.

        • Improving photos
          • Cropping
            • Eliminates nonessentials
            • Concentrates on the central theme
            • Adds to impact by dramatic presentation.
          • Scale to fit hole on page.
            • Must scale correctly, without distortion.
          • Retouching
            • To eliminate undesirable background.
            • Consider ethics of retouching photos.
            • To improve color, intensity, highlights, shadows, etc.
    Top