Design Basics for the Information Designer

1
Design Basics for the Information Designer

• Chapter 3

2
Introduction

• What does the future hold for the computer
  industry?
• What new advances will present themselves in the
  year 2002 and beyond?
• Coming together of the left side (logic) of the
  brain and the right side (creativity)
• Need to be able to
• Develop your imagination,
• process non-linear ideas,
• organize and speculate
• Create unique and interesting solutions to visual
  problems that captures the audiences attention.
• Learn the basic vocabulary and techniques that
  graphic designers utilize
• Know that there are some rules that work

3
Why Do This?

• More and more of the interaction with computers
  is being performed via a browser
• The traditional operating system is relatively
  unchanged since the mid-1970s.
• The current Office metaphor was in the original
  Xerox Palo Alto Research Centers vision for
  human/computer interface design
• To experience individualized interfaces created
  by unique individuals
• This is the future of the point-and-click
  interface.

4
Caveat Emptor

• This freedom is exciting on the one hand but
  disconcerting on the other
• There is NO CONTROL over the look and feel!
• It goes against the strict standards imposed by
  Microsoft and Apple
• Butthe current hodge podge of visual information
  is becoming tedious.
• Hopefully the next generation will bring a visual
  clarity to the Web

5
A Possible Solution

• Acquire traditional fine arts fundamentals.
• Team up with graphic design artists
• Theories and related exercises or problems are
  constructed to allow the student to discover the
  visual vocabulary of visual design.
• Encouraged to explore visual communication
  concepts and the principles of design.
• This approach allows personal expression in the
  solving of complex communication problems of
  interface and Web design.
• Important to develop thoughtful choices based on
  some of the rules learned here and in other
  courses related to human behavior, interface
  design, and communication.
• Suspend judgment and respect the rules enough to
  really examine and understand them

6
Vocabulary and principles

• Design is not just whimsy or arbitrary
• Great artists, visionaries, are very good at
  applying the rules
• Make it seem as if there are no rules.
• Know when to break the rules
• Creativity is in how you break the rules.
  Finnegan
• Must learn and know and apply the rules first
• The rules
• Principles and vocabulary of the visual language
• There are no right or wrong choices

7
Vocabulary

• Point-- A point is just that, a single
  identifiable x,y coordinate in space. It has no
  breadth or length. It is the beginning and end of
  a line or the place where they meet or cross.
• Line -- A line is made up of an infinite number
  of points. It is also the path a point would make
  if a point moved through space. It forms the edge
  of a plane.
• Plane -- A plane is made up of an infinite number
  of lines. It is also the area a line would scribe
  if it traveled through space. If a plane traveled
  through space, it would describe an area of
  volume that we would represent with a
  three-dimensional symbol, though the third
  dimension doesnt truly exist in two- dimensional
  design.
• Path--The direction in which a point, line, or
  plane travels.

8
Vocabulary

• Shape--The organization of points and lines to
  form recognizable named regular or irregular
  images in the field of perception.
• Size--physically measurable (2 inches) or
  relative to other shapes described in terms of
  largeness or smallness
• Texture--referring to the surface attributes of a
  shape. Texture often appeals to the sense of
  touch (based on past associations of the
  observer) as well as to the sense of sight.
• Color--the characteristic of a shape that makes
  it stand out from its surroundings.

9
Vocabulary

• Shapes tend to have an inside, an outside, and an
  outline.
• A shape generally looks as if it is either
  occupying space or is a hole in occupied space.
• positive (occupying) space and negative (a hole)
  space.
• Which part of a composition becomes positive or
  negative depends on how the observer perceives
  the form
• We tend to perceive darkness as occupying space
  and the lighter values as the hole surrounded by
  occupied space.

10
The Stroke and Fill Attributes of a Shape

• Using only black and white
• six possible states the composition can have.
• It can be have a white outline with a white fill
  on a white background, resulting in the form
  disappearing.
• It can have a black outline with a white fill on
  a white background.
• It can be a black outline with a black fill on a
  white background.
• It can be a black outline with a black fill on a
  black background again, resulting in the shape
  disappearing.
• It can be a white outline with a black fill on a
  black background.
• It can have a black outline with a white fill on
  a black background.
• It can have a white outline, with a white fill on
  a black background.

11
The Intersection of Multiple Forms

• Some of the terms are Boolean operations.
• In a given composition with two shapes, the
  shapes can be
• apart, each occupying space separate from the
  other
• touching, where only a single point is shared by
  both shapes
• overlapping, which requires one shape to have a
  stroke of a contrasting color
• transparent overlapping, in which both shapes
  have a stroke of a contrasting color and their
  intersection is filled with a contrasting color
• union, in which the overlapping shapes are filled
  and have a stroke of the same color. A new form
  is generally created and perceived in a union.
• punched, in which one shape is used like a cookie
  cutter to carve away part of the other shape.
• Sometimes referred to as subtraction.
• Intersected, in which only the part shared by
  both remains
• Coincident, in which the two shapes both are the
  same color and size and appear as one or in which
  the larger shape totally covers the smaller
  shape, leaving the perception of only one shape.
• This choice still involves two shapes to start
  with but involves the choice to cover one shape
  with the other by moving them into the same space.

12
The Intersection of Multiple Forms

• With the use of additional colors, the choices
  become infinite.
• It is the conscious making of and manipulation of
  these choices that add zest to a design.
• We as designers can choose which of the above
  behaviors we will use or change our minds part
  way through and follow a different set of rules.
• With additional information, we can create very
  complex rule sets, almost like programs or batch
  files, in which we explore organizing visual
  information.
• There is no right or wrong, only choices -- make
  some and go with them.

13
Gestalt PrinciplesOverview

• The study of information perception, Gestalt
  psychology
• The study of how humans perceive and group
  information
• Assigning value relative to other information
  presented in the same field of view
• Developed grouping principles.
• Help artists and designers understand how humans
  perceive the visual field of view.
• The overriding idea is that the whole is greater
  than the sum of the parts.
• Unity in design
• The patterns that are formed by the parts take
  precedence over the individual parts.

14
Gestalt Principles

• Figure and ground (sometimes called field)
• Refers primarily to the frame that exists around
  everything
• Provides a context for the perception to focus
  on. ? Be careful not to create ambiguous focus.
  (Face/Vase illustration)? Paper, the computer
  screen, browser window are all frames
  ? Shouldnt be ignored when designing for the
  screen. ? Part of the perception field

15
Grouping principles

• proximity, similarity, continuation, and closure
• hierarchy of perception to these grouping
  principles.
• Firstly, importance is assigned to objects that
  are in close proximity to each other
• Similarity is given greater weight than proximity
• Items that form a continuation or the perception
  of a continuation take precedence over items that
  are similar or close to each other
• Closure is the overwhelming principle-it attends
  to the need for humans to complete the visual
  field

Closure
16
Definitions of the Primary Grouping Principles

• Proximity-- Objects/items appear to be associated
  just because they are close to one another.
• Similarity -- In the visual field, our brains
  (through the use of our eyes) can pick out things
  that are similar to one another
• Repetition of similarity can be a strong design
  choice.
• Continuation--Continuation is the principle of
  leading the eye to where you want the viewer to
  focus. Also to make recognizable patterns with
  parts and pieces.
• Closure--The innate need to close gaps and
  complete shapes

17
Definitions of Other Principles

• Upright and horizontal
• Alignment
• Grid systems
• Use the edges of forms on a page or screen to
  align other objects in the composition,
• Allows design to be more cohesive
• Direction
• addresses the horizontal and vertical alignment
  of forms in the frame.
• Breaking the logical directional expectation can
  also be useful in guiding the user to a
  particular point in the visual field.

18
Non-Gestalt Principles

• Balance, symmetry, and asymmetry
• Balance refers to the visual balance of all the
  items in a composition
• Symmetry-equal visual information on either side
  of an axis
• Asymmetry-unequal visual balance

19
Principles

• Repetition, rhythm, and pattern
• Repetition is an example of grouping similar
  forms
• satisfy the users perceptual need for a sense of
  order and wholeness.
• Most powerful when the variables of size, shape,
  texture, and color are equal.
• Variations of those same attributes can be quite
  stunning, as when an oversized letter is used
  both as a background and as a drop capital at the
  beginning of a paragraph.
• Rhythm is sustained repetition
• Pattern is simply the expression of this rhythm
  over a continuous area
• Strongest when color, texture, and contrast are
  equal

20
Principles

• Color, texture and contrast are used to create
• Emphasis
• focus
• hierarchical importance
• pure aesthetic appeal
• Value is the lightness or darkness of a form

21
Using Color/ The Aesthetics of Color

• Color Wheel/Color Schemes
• Primary Colors
• Generally, the three primary colors can go
  together well.
• The primary colors are red, blue, and yellow.
• Secondary Colors
• Achieved by mixing two primaries together.
• The use of those two primaries and their
  secondary color would create a usable palette.
• The secondary colors are green, orange, and
  violet.
• Tertiary Colors
• Orange red, yellow orange, yellow green, blue
  green, blue violet, and red violet
• This group of colors includes the mixture of a
  primary with a secondary color.

22
Color continued

• Complementary Colors
• Complementary colors are the colors that are
  exactly opposite each other on the color wheel.
• Split Complements
• This is the color on the wheel that is directly
  to the left or right of the pure complement.
• Analogous Colors
• Analogous colors are the four colors on the wheel
  that are right next to each other

23
Color continued

• Limit Your Palette/Choose It Before You Begin
• Use the color schemes above.
• Extraneous use of color, like using too many
  typefaces, is the mark of the amateur.
• Contrast
• Make sure your colors are far enough apart in
  terms of lightness and darkness
• If all of your colors share the same value, the
  legibility and readability go way down.
• Warm and Cool Colors
• Organize colors based on their warmness or
  coolness.
• The color wheel can be divided into warm and cool
  colors,
• The reds, oranges, and yellows -warm
• Blues, greens and purples falling -cool
• Within each hue, the colors are warmer or cooler
  in relation to each other.
• Use Tints and Tones to Create Unity
• Adding white or lightness-tinting
• Adding black or decrease the lightness-shading
• Ensures that colors go together.

24
Typography

• Typography is an area of design that should get a
  devoted amount of study
• Readability
• principal job of type
• Learn about it so you can talk articulately and
  specifically about type with graphic designers
• Type Terminology
• Font --all the characters of a typeface,
  including punctuation, accents, fractions, and so
  on. We mistakenly use this term when we mean type
  family or typeface.
• Type family -- range of typeface designs that are
  variations of one basic style of design(Helvetica
  bold, light, light italic, condensed, and so on)
• Stroke -- the main line of a character
• Thick/thin -- the contrast in the thickness of
  the curved strokes
• Condensed type -- typeface with an elongated or
  narrow appearance
• Expanded/extended type --- wider version of a
  typefaces standard design
• Tracking -- adding or decreasing the same amount
  of space between all the letters
• Kerning -- adjusting the space between letters
• Base line -- imaginary line on which the base of
  a line of type (excluding descenders) rests
• x-height -- creates the impression of the fonts
  size

25
Measuring Type

• Point -- standard unit of typographic measurement
  (72 points 1 inch)
• Pica -- typographical measurement equal to 12
  points (1 pica 12 points, 6 picas 1 inch)
• Picas are actually easier to work with than
  inches when converting or calculating.
• 6 points .083 inches, but 11 inches 66 picas.
• The points and picas measurement system has its
  own notation.
• 3 picas, 4 points is written as 3p4
• Linespacing or leading
• the space between lines of type.
• Slugs of lead were used to separate lines of
  type.
• Measured in points
• Leading is equal to your type size plus 2 points.
  
• 12-point type 2 points of leading 14 points
  of total space.
• Warning Web design using HTML 3.2 does not allow
  specification of units. Units even
  when specified in CSS will not necessarily
  display or print in actual size.

26
Using Type

• If the typeface has a large x-height
• increase the leading.
• Small x-height
• decrease the leading.
• Increase or decrease leading dramatically for a
  special effect.
• Negative leading will cause type to overlap.

27
Typeface Classification

• Type is traditionally categorized in the
  following way
• Oldstyle
• Transitional
• Modern
• Sans serif
• Serif
• Script
• Decorative
• Uncial
• Black Letter
• Grunge category

28
Serif Typefaces

• Serifs are the hands and feet of a letter
  form
• Lend stability
• Provide continuity and flow to
• Either oldstyle, transitional, or modern.
• Scientific study has shown that serif faces at
  smaller sizes (body text size as in the text you
  are reading now) are more legible and readable by
  the human eye.
• Serifs lead the eye from letter to letter.
• Body copy should always use serif faces
• The type on this slide is a serif typeface

29
Sans Serif

• Typefaces that dont have hands and feet
• Good for headings
• Contrast with Serif faces

30
Decorative, Script, and Specialty Typefaces

• Reserved for titles, headlines
• To be used at a size greater than that of body
  text,

31
Monospace

• In contrast to proportionally spaced type
• Digital typeface takes care of the kerning
  (spacing)
• Typewriters had letterforms that were a fixed
  width and a fixed space apart
• This is monospaced type.
• There are digital typefaces that mimic this
• There is XHTML code to request monospaced type on
  a Web page

32
Platform and Browser Differences and Type Handling

• Type is different sizes on the Mac PC
• Macintoshes display type at 72ppi
• PCs display it at 96ppi.

33
Type Use Basics

• Use fonts that are available on both platforms
• Arial
• Verdana
• Trebuchet
• Times Roman
• Most Macintoshes now utilize the basic Microsoft
  typefaces
• Best to specify alternatives, and Family

34
Type Use Basics

• If the type is not available on the machine-you
  should make your heading a graphic
• Overuse of typefaces is the mark of the amateur.
• Utilize different weights of the same face.
• Some typefaces come designed with a bold or ultra
  bold version and an italic version.
• Use margins and white space to aid in readability
  of the text on a page.
• Remember not to set text type too large.

35
Type Use Basics

• Smaller sizes with additional leading are
  generally more readable than larger sizes with
  tight leading
• Be careful using a typeface with delicate thin
  strokes. It gets lost on screen, and the type
  becomes difficult to read.
• Be sure to make choices that are high contrast
  such as serif vs. sans serif and light vs.
  heavy.
• The kerning of type most often needs to be
  adjusted in headlines

36
Type Use Basics

• Too much space between characters shows up more
  noticeably.
• Monitor your line length.
• Related to type size.
• Lengthen or shorten lines as needed.
• Shorten your line length if the typeface has a
  very large or small x-height
• If the typeface is a sans serif
• Or reversing type out of a dark background.
• This tends to make type look smaller, so you
  should increase the type size by 1 point so that
  it appears the same.

37
Type Use Basics

• No blinking text!
• Always use the text alternative with graphics.
• The users browser preferences control text font
  choices
• Cascading style sheets help with control
• The other way around the HTML limitations is to
  design your text as a graphic.

38
Chapter Summary

• The history of design/design theory
• Thousands of years old,
• Tradition is still intact today almost in its
  entirety.
• Computers and their use in this field in some
  ways complicate the task but
• Mostly complement the architecture of visual
  information.
• The computer makes things more efficient
• Revisions and multiple iterations of an idea.
• They make output less messy (no glue!)
• Changes on the fly possible.
• To use computers in the field of visual design
  requires learning non-computer techniques in
  order to understand the discipline
• Then applying the computer as a tool
• Even traditional designers do a lot of work
  before they pick up a paintbrush or palette knife
• So, too, should the architect of information in
  the electronic era.