6.S082 Lecture 4 Graphic Design

Topics for today

What & Why?

“Most people make the mistake of thinking design is what it looks like. People think it’s this veneer – that the designers are handed this box and told, ‘Make it look good!’ That’s not what we think design is. It’s not just what it looks like and feels like. Design is how it works.”

Steve Jobs

Aesthetic Usability Effect

Users are more tolerant of minor usability issues when they find a UI visually appealing

  • Sources: Aesthetic Usability Effect
  • In other words, users have a positive emotional response to your visual design, and that makes them more tolerant of minor usability issues on your site
  • Bear in mind that the aesthetic-usability effect has its limits. A pretty design can make users more forgiving of minor usability problems, but not of larger ones.

Graphic Design can enhance
or hinder communication

Design Principles

Design principles are “rules of thumb”; heuristics that help us make design decisions

Design Principles Appearing more than twice

Lots of overlap

Today, we are going to focus on the following:

Contrast

Make elements that are not the same, clearly different

Why?

“For contrast to be effective, it needs to be strong. Don't be a wimp. You cannot contrast 12-point type with 14-point type. You cannot contrast a half-point rule with a one-point rule. You cannot contrast dark brown with black. Get serious.”

R. Williams

If two elements are sort of different, but not really, you don't have contrast, you have conflict

Sample Heading

Sample body text. Lorem Ipsum dolor sit amet.

Context is integral to contrast

  • We may think that the chosen visual object in a composition says something about itself but it is more often the visual elements around it that give it its meaning.
  • For example: Here is a simple circle. What is it saying about itself? Does it say how big or small it is? or how far away from us it is?
  • To suggest that, we need another visual element. So here is a smaller circle and by placing this new visual object next to the original circle we now create contrast by context.
  • But what if we bring in another circle the same size as the original but this time it’s darker. Well this may suggest that this circle is perhaps closer to us or more important and it certainly grabs our attention more.
  • Contrast creates interesting relationships between the visual elements. It can push elements away, connect them or complement them. Without contrast, visual elements can be meaningless.

Applying contrast: Type and Color

Scale

Lorem Ipsum dolor sit amet

Weight

Lorem Ipsum dolor sit amet

Color

Lorem Ipsum dolor sit amet

Serif vs sans serif

Lorem Ipsum dolor sit amet

Color

Lorem Ipsum dolor sit amet

Background

Lorem Ipsum dolor sit amet

Applying contrast: Line

The Rules of Life

  • Your attitude is your life.
  • Maximize your options.
  • Never take anything too seriously.
  • Don't let the seeds stop you from enjoyin' the watermelon.
  • Be nice.

The Rules of Life

  • Your attitude is your life.
  • Maximize your options.
  • Never take anything too seriously.
  • Don't let the seeds stop you from enjoyin' the watermelon.
  • Be nice.
  • There is a bit of contrast between the typefaces and between the rules. but the contrast is wimpy. Are the rules supposed to be two different thicknesses? Or is it a mistake?
  • Second box: Now the strong contrast between the typefaces makes the piece much more dynamic and eye-catching, with a stronger contrast between the thicknesses of the rules, there is no risk of someone thinking it's a mistake. The entire table is stronger and more sophisticated; you know where it begins and where it ends.
  • Example source: The Non-Designer's Design Book, Robin Williams

Contrasting multiple variables

Bold

Sample body text. Lorem Ipsum dolor sit amet.

Size

Sample body text. Lorem Ipsum dolor sit amet.

Color

Sample body text. Lorem Ipsum dolor sit amet.

Serif

Sample body text. Lorem Ipsum dolor sit amet.

All caps

Sample body text. Lorem Ipsum dolor sit amet.

Italics

Sample body text. Lorem Ipsum dolor sit amet.

  • More often than not, we need to vary multiple variables to create sufficient contrast
  • However, be wary because sometimes this can create a lack of unity.

Repetition

Repeat aspects of the design throughout the entire piece

Why?

Repetition creates unity, consistency, cohesiveness

Repetition in action

A detail from the logo is enlarged and repeated throughout the coroprate identity as a unifying design element.

Notice how the logo silhouette and has been repeated throughout as a design element. The brand colors are also quite bold, and have been repeated in large areas throughout, which creates significant unity.

Notice how the logo is repeated as a background, much larger and with a different angle. This is a common technique for creating subtle repetition. What other types of repetition can you spot?

Be wary of too much repetition

Repeating some design elements unifies, repeating everything creates tiring, uninteresting designs. Think of classic PowerPoint templates where every slide has exactly the same design elements, and exactly the same bulleted lists with the main difference being the text. This is one reason why these are universally regarded as dull (“death by PowerPoint”).

Alignment

Nothing should be placed arbitrarily. Every item should have a visual connection with something else.

Why?

Flush-left: safe and sure. The result has a well organized, conservative feel.
Flush-right: Slightly less conventional and more dynamic.
Visual disagreement. The result feels scattered and unsure.

Source: Design Basics Index, Jim Krause

Centered alignment: A common and conventional approach
Justified alignment: Letterspacing as a creative typographic solution
Subtle violation. The result looks accidental.

Source: Design Basics Index, Jim Krause

Structure through association. The edges of various elements provide alignment cues for the placement of others.
Even a sideways logo and tipping chair feel securely anchored because of the strong, clear alignments.
Subtle discrepancy. Visual indecision weakens structure; avoid it!

Source: Design Basics Index, Jim Krause

A subtle strength. The legs of the chair provide a cue for the logo's width.
Taking advantage. The crux of angles in the chair image provide a strong focal point; an ideal position for the logo baseline.
Following an edge or a contour works too!

Source: Design Basics Index, Jim Krause

Flush left typography is paired with an image containing centred content.
Trapped space. The eye feels uneasy when it finds itself presented with no way out.
Elements with sharp contours that barely touch the edges create tension. Busy images in the corner of a layout tend to pull attention away from content.

Source: Design Basics Index, Jim Krause

Optical Alignment

A
B

Alignment

Visual weight

Design for humans, not computers

Proximity

Elements should be close together iff they are logically connected

Haystack Group
David Karger
(505) 555-1212
32 Vassar Street
Cambridge, MA

Take a look at this typical business card layout, below. How many separate elements do you see in that small space? That is, how many times does your eye stop to look at something?

  • Does your eye stop five times? Of course—there are five separate items on this little card.
  • Where do you begin reading? In the middle, probably, because that phrase is boldest.
  • What do you read next—do your eyes move left to right?
  • What happens when you get to the bottom-right corner, where does your eye go?
  • Do you wander around making sure you didn’t miss any corners?
Haystack Group
David Karger
32 Vassar Street
Cambridge, MA
(505) 555-1212

And what if we confuse the issue even further:

  • Now that there are two bold phrases, where do you begin? Do you start in the upper left? Do you start in the center?
  • After you read those two items, where do you go? Perhaps you bounce back and forth between the words in bold, nervously trying to also catch the words in the corners.
  • Do you know when you’re finished?

Why?

Haystack Group
David Karger
(505) 555-1212
32 Vassar Street
Cambridge, MA

Now is there any question about where you begin to read the card? Where do your eyes go next? Do you know when you’re finished? With that one simple concept, this card is now organized both intellectually and visually. And thus it communicates more clearly.

Correspondences Flowers, herbs, trees Ancient Greeks and Romans Historical characters Quotes on motifs Women Death Morning Snakes Language Iambic pentameter Rhetorical devices Poetic devices First lines Collections Small printings Kitschy Dingbats
Correspondences Flowers, herbs, trees Ancient Greeks and Romans Historical characters Quotes on motifs Women Death Morning Snakes Language Iambic pentameter Rhetorical devices Poetic devices First lines Collections Small printings Kitschy Dingbats
  • In this list, everything is close to everything else, so it is difficult to see the relationships or the organization even with the headings in bold.
  • The same list has been visually separated into groups by adding a little space between each set.
  • I’m sure you already do this automatically—I’m just suggesting that you now do it consciously and thus with more strength.
    • Nine Dots
    1. Nine dots, casually arranged with no obvious association between them.
    2. Nine dots, clearly associated, but what if we want to show that three of the dots do not belong with the others?
    3. Here three dots grouped and separated from the others. It's almost as though there's a story forming in this sample…

    Simplicity

    “Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away”

    Antoine de Saint-Exupéry, Airman's Odyssey

    Not simple enough or too simple? Which one is better?

    Not simple enough or too simple? Which one is better?

    Can we simplify this while preserving the same amount of information?

    Is this a good idea?

    Once you understand design principles, you know when to break them