What Is Design?

Slide 1

• If we want to understand the technical aspects of document production, we need to know something about the way documents are made.
• Before we can start thinking about design, need:
  • History
  • Common Vocabulary
  • Definitions
• Mention major figure as transition

Slide 2

• One of the major figures in design in America, is this guy: Paul Rand
• The Swiss style of graphic design, very smooth, clean, modern.
• Helped raise awareness of design in America. One of the first celebrities of American design.

Slides 3,4,5

• ABC
• IBM
• UPS
  • Paul Rand had lots of success
  • Many of these logos are from the 50s and 60s, yet we still see them.

Slide 6

• A definition written by Rand.
• Just been talking about the fact that logos don’t have to relate to what the business does:
  • Mercedes
  • Bacardi
• Rand’s logo shows that design enhances the perception of the business
• Form vs. Content
  • Beyond just the content, how we show the content.
• Could talk about the slide itself: you don’t need the font face or the color to appreciate this slide, but it helps.
• So, next question: why?

Slide 7

• Daniel H. Pink’s A Whole New Mind.
  • Account of how business is changing to focus more on ideas and less on products.
• The “Peanut Butter Problem”
  • No longer have to grow or buy peanuts
  • Moreover, 25 kinds of peanut.
    • Jiff, Skippy
  • Smooth, Chunky, Natural
  • What kind of peanut butter is most meaningful
  • Design of peanut butter (packaging, story):
    • Peanuts always contain salt, peanuts, sugar, oil
    • What other things?
      • Organic: let you show that you care about the environment. Changes nothing about the peanut butter
• Design is something that can add meaning

Slide 8

• Information Overload
• Even more than meaning, we process so much information.
• How do we distinguish?

Slide 9

• Why Design, once again.
• Things that aren’t attractive are not going to have attention paid to them.
• Two news stories: one with exciting headline gets read:
  • Fox News
• Regardless of what you do, you need to get people to pay attention to you.
• Poor design detracts from design. People pay less attention to your content because your form is broken.
• Attention Management: the directing of attention by a document producer.
• In this way, design is a lot like grammar:
  • you don’t notice it unless it’s worng.
  • It’s outside of content, but integral to its success
  • Email with misspelled words, that people can still read.
• Outside of what you say that help you say your piece better.

Slide 10

• Common vocabulary to think through this stuff
• Introducing vocabulary: from Document Design by Miles Kimball and Anne Hawkins
• Define design as “managing design object using design principles”
• WHat the heck does that mean?

Slide 11

• Design Object: “Any mark or group of marks that can be seen and manipulated on the page”
  • Bullets
  • Letters
  • Numbers
  • Lines
  • Larger Combinations of Objects: words, pictures, and bigger
    • D-E-S-I-G-N combines to design which further combines to first block of text. All are design objects
    • Pictures made up of blobs of colors
• Design objects have meaning

Slide 12

• Positive Space / Negative Space:
  • Reduces design to a geometry problem
  • Positive: Space of the design objects (black text in this case)
  • Negative: Space without meaning (hole in the ‘O’ in “Some”, background):
    • Both matter
  • Negative space between “negative space” and “Important to manage both in a document” greater than between “negative space” and “positive space”. By doing so, I’ve suggested a relationship between “positive space” and “negative space” that is different than the other relationship. In this way we can see how negative space is also important.

Slide 13

7 Characteristics of Design Objects, From Kimball and Hawkins

Slide 14

• Shape:
  • All periods, different font, same size:
    • Georgia
    • Verdana
    • Lucida Blackletter
    • Savoye LET
    • Blackoak Std
  • All have the same meaning, but look completely different.

Slide 15

• Orientation:
  • Direction something points
  • Two examples:
    • First, left to right, top to bottom, flipped 180 degrees, bottom to top
      • LTR most readable
      • Other have more design qualities, less content driven (think of them as graphical)
    • Second, illustrates implicit orientation
      • Which way do these point?
      • How do we know?
      • Hand, Plane, Bike all point to the right, because of culture.
  • Can be oriented, but may also have their own directionality

Slide 16

• Texture
  • Physical characteristics of an object
  • NOT Color
    • Marble, Woven, Granite, Wood, Sand
    • What about the last two?
    • Same texture: smooth
  • Not as important, thanks to Internet and cheap color printing: color can differentiate.
    • Things like crosshatching, polka dots count as texture. Useful in black and white scenarios.

Slide 17

• Color
  • Same example
    • Green, Tan, Grey, Brown, Pink, Light Blue, Dark Blue

Slide 18

• Value
• Especially important for things like Powerpoint
• Degree of difference from negative space.
• First has high value, last two have low value
• Black on white and white on black both have high value
• Can add emphasis

Slide 19

• Size
• Large, small
• Often smaller sized objects are less important

Slide 20

• Position
• Where is something on a page?

Slide 21

• Recap

Slide 22

• 6 Principles of Design
• Way 7 Characteristics of Design Objects can be manipulated to create specific meaning.

Slide 23

• Similarity
• 2 Similar, 1 Not
  • Background color
  • Shape
  • Size
  • Positive Color
  • Negative Color
  • Font face, weight, size (Verdana, bold)
  • positioned in the same place
• Similar design objects are interpreted as having similar functions
  • Safety warnings

Slide 24

• Contrast
• Highlights difference
• 2 are the same, 1 is different, 1 is very different
• 2 same are probably the same thing, as we saw
• “Different” is probably the same kind of thing with different importance:
  • Title vs. Section Header
• “Really Different” is clearly a completely different kind of object within the context of the document.

Slide 25

• Proximity
• Things that are close together are related
• Top object is two sets of related objects that we know are related because of being close together.
• Second example, “Junk Text”:
  • Two body paragraphs and a section header
  • Want section header to be closer to new section, rather than old section. Edit document.

Slide 26

• Alignment
• Two lists:
  • First has no way to easily differentiate between points.
  • Second, because each feature is indented by a half inch or so, we know when each point begins.
• Alignment often works to establish relationship by putting things into columns by manipulating shape, size, and position.

Slide 27

• Order
• Generally, because of how we read, things at the top of pages or documents are usually viewed as being important.
• Establishes hierarchy

Slide 28

• Enclosure
• Drawing borders around things (or creating implied borders), creates a relationship between things inside of the enclosing objects.
• Think about websites laid out in columns