Pubs chap 1 5
Upcoming SlideShare
Loading in...5
×
 

Pubs chap 1 5

on

  • 1,142 views

 

Statistics

Views

Total Views
1,142
Views on SlideShare
1,142
Embed Views
0

Actions

Likes
0
Downloads
26
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • NOTE: The original slide deck by Saul Greenberg. Permission was granted to use this for non-commercial purposes as long as general credit to Saul Greenberg is clearly maintained. Warning: some material in this deck is used from other sources without permission. Credit to the original source is given if it is known.
  • Image Credit: http://www.flickr.com/photos/40871351@N00/407364383/The Joshua Tree Epiphanyby Robin WilliamsFound at http://pushingposes.blogspot.com/2008/03/perception-is-reality.html Once upon a time, Robin received a tree identifying book where you could match a tree up with its name by looking at its picture. Robin decided to go out and identify the trees in the neighborhood. Before she went out, she read through part of the book. The first tree in the book was the Joshua tree because it only took two clues to identify it.Now the Joshua tree is a really weird-looking tree and she looked at that picture and said to herself, "Oh, we don’t have that kind of tree in Northern California. That is a weird-looking tree. I would know if I saw that tree, and I’ve never seen one before."So she took the book and went outside. Her parents lived in a cul-de-sac of six homes. Four of those homes had Joshua trees in the front yard. She had lived in that house for thirteen years, and she had never seen a Joshua tree.She took a walk around the block - at least 80 percent of the homes had Joshua trees in the front yards. And she had sworn she had never seen one before!The moral of the story? Once Robin was conscious of the tree, once she could name it, she saw could see it everywhere. Which is exactly my point. Once you can name something, you’re conscious of it. You have power over it. You own it. You’re in control.-- end quote ---
  • Page looks more organizedWhite space is good space
  • Images from “The Non-Designer’s Design Book”Pg 29,26
  • Images from “The Non-Designer’s Design Book”No more than 2 fonts but be sure to utilize them
  • Count visual elements
  • Clip art from http://www.speedysigns.com/images/decals/400c/Speedy/SHAPES/NOSYMBL.gif
  • Images from “The Non-Designer’s Design Book”
  • Images from “The Non-Designer’s Design Book”
  • Images from “The Non-Designer’s Design Book”
  • Base line: invisible line underneath your words
  • Image from http://servicenarc.com/avoid_service_narc.jpg
  • Images from “The Non-Designer’s Design Book”
  • Images from “The Non-Designer’s Design Book”
  • Clip art from http://www.cartoonstock.com/lowres/wda0149l.jpg
  • Images from “The Non-Designer’s Design Book”
  • Image from http://3.bp.blogspot.com/_xZJENponhAc/SYyDL591mDI/AAAAAAAAAyE/SVWHbHQcrR8/s400/sign.gif

Pubs chap 1 5 Pubs chap 1 5 Presentation Transcript

  • Principles of Effective Design:Joshua Tree Epiphany & CRAP
    Edited & adapted by Barbara B. Nixon
    Georgia Southern University
  • The Joshua Tree Epiphany
  • CRAPcontrast, repetition, alignment, proximity
    Major sources: Designing Visual Interfaces, Mullet & Sano, Prentice Hall / Robin Williams Non-Designers Design Book, Peachpit Press
    Slide deck by Saul Greenberg. Permission is granted to use this for non-commercial purposes as long as general credit to Saul Greenberg is clearly maintained. Warning: some material in this deck is used from other sources without permission. Credit to the original source is given if it is known.
  • CRAP
    Contrast
    Repetition
    Alignment
    Proximity
    Robin Williams Non-Designers Design Book, Peachpit Press
  • CRAP
    Contrast
    make different things different
    brings out dominant elements
    mutes lesser elements
    creates dynamism
    Repetition
    Alignment
    Proximity
    1
    2
    3
    4
    5
    Robin Williams Non-Designers Design Book, Peachpit Press
  • CRAP
    Contrast
    Repetition
    repeat design throughout the interface
    consistency
    creates unity
    Alignment
    Proximity
    1
    3
    2
    4
    Robin Williams Non-Designers Design Book, Peachpit Press
  • CRAP
    Contrast
    Repetition
    Alignment
    creates a visual flow
    visually connects elements
    Proximity
    1
    3
    2
    4
    Robin Williams Non-Designers Design Book, Peachpit Press
  • CRAP
    Contrast
    Repetition
    Alignment
    Proximity
    groups related elements
    separates unrelated ones
    1
    2
    3
    Robin Williams Non-Designers Design Book, Peachpit Press
  • Wheredoesyoureye go?
    CRAP combines to give you cues of how to read the graphic
    title
    subtext
    three points
    main point
    sub point
    Robin Williams Non-Designers Design Book, Peachpit Press
  • Proximity
    Chapter 2
  • Principle of Proximity
    Group related items together
    Physical closeness implies a relationship
    What happens when similar elements are grouped into one unit?
    Relationships are important
  • Too many elements for
    the eye to look at
    With two bold phrases, the
    reader doesn’t know which
    to look at first. Which is
    more important?
  • Here the elements are grouped
    together, into closer proximity.
    The card is now organized
    intellectually & visually – making it
    communicate more clearly.
  • First masthead has no elements in proximity
    Second masthead chose better typeface &
    placed elements in proximity
  • What to Remember about Proximity
    When several things are in close proximity, they become one visual unit
    Items relating to each other should be grouped together
    Be conscious of where you eye is going
    Basic purpose is to organize
    Count the number of visual elements
  • What to Avoid
    Don’t stick something in every corner or the middle just ‘cause
    Avoid too many separate elements on the page
    Avoid leaving equal amounts of white space between elements unless group is part of a subset
    Avoid confusion over whether something belongs to its related material
    Don’t create relationships that don’t belong together
  • No one will be able to understand this mess
    With this the reader can
    easily figure out what’s going on
  • Alignment
    Chapter 3
  • Principle of Alignment
    Nothing should be placed on the page randomly
    Every item should have a visual connection with something else on the page
    Aligned items result in stronger cohesive unit
  • Elements on the card look like
    they were randomly placed to fill
    the corners & middle. There are no
    connections.
    Moving elements to the right gives
    it one alignment. The information
    is more organized.
  • Centered alignment. The edges
    are “soft,” and you can’t see the
    strength of the line.
    By aligning text flush-right, it
    creates a hard edge – an invisible
    line connecting the information.
  • Aligning Text
    On a business card, centered text appears weak.
    When aligned left or right, the invisible line connects the text & gives a hard vertical edge.
    Centered alignments creates a more formal look.
    Lack of alignment is likely a big cause of pieces that don’t communicate well.
    Lining up the elements can make a difference.
  • Aligning Text
    When you find a strong alignment, stick with it.
    See Newsletters pg. 44-45
    What about indenting?
    Strong alignment=Professional look
  • What to Remember About Alignment
    Nothing should be placed on the page at random.
    Every element should have some visual connection with another element on the page.
    Unity is an important concept.
    Basic purpose of alignment is to unify & organize the page.
    Be conscious of where you place elements.
  • What to Avoid
    Avoid using more than one alignment.
    Try to break away from always using a centered alignment.
  • Repetition
    Chapter 4
  • Principle of Repetition
    Repeat some aspect of the design throughout the entire piece
    This element may be a bold font, a color, a design element, etc.
    It must be something the reader will visually recognize.
    Repetition=Consistency
  • When you get to the end of the information, does your eye wander off the card?
    Now, with the bold type at
    the top & bottom, do you find
    that your eye “bounces”
    between the bold type
    elements?
  • The letterhead, business card &
    envelope retain the repetitive
    elements.
    • Strong left alignment
    • Spacing
    Want each piece to belong
    together.
  • Repetition
    Helps organize information
    Helps guide the reader through the pages
    Helps unify unrelated parts of the design
    Repetitive elements establish a sophisticated continuity
  • What can a repetitive element be?
    Clip art
    Picture font
    Simple element using different sizes, colors, angles
    Sometimes not exactly the same object, but closely related
    Look at the examples on pg. 59
  • What to Remember about Repetition
    Repetition of visual elements unifies & strengthens a piece
    It’s critical in multi-page documents
    Basic purpose is to unify & add visual interest
    Repetition is about being consistent
  • What to Avoid
    Avoid repeating the element so much that it becomes annoying or overwhelming
  • Contrast
    Chapter 5
  • Principle of Contrast
    If two items are not exactly the same, then make them different
    Contrast is an effective way to add visual interest
    Contrast is created when two elements are different
    There is no contrast between a 12 pt. font & a 14 pt. font
  • Contrast
    The piece can be nice & neat, but with no contrast no one will read it!
    It’s important to the organization of information.
    Look at the differences between pg. 68 & 69
    Easiest way to add contrast is with typefaces
    Create headlines that catch the eye
    Then create contrast with text
    Enhance with strong alignments
  • Contrast
    Don’t be afraid to make some items small to create a contrast with larger items
    Don’t be afraid of blank space
    Elements of contrast can sometimes be used as elements of repetition
    Let’s take a look at the ads on pgs. 76 & 77
  • The first example shows some contrast
    between the typefaces & the rules, but
    they’re wimpy.
    The second example has a strong
    contrast between typefaces making it
    more eye-catching.
    Stronger contrast between thickness
    of the rules.
    The third example also has a strong
    contrast.
    The reverse type draws your eye.
  • What to Remember about Contrast
    Contrast draws our eyes to it
    If placing two elements on the page that aren’t the same, they can’t be similar. They must be VERY different.
    Contrast has two purposes
    Create an interest in the page
    Aid in the organization of the information
  • Add Contrast Through…
    Typeface choices
    Line thicknesses
    Colors
    Shapes
    Sizes
    Space
  • What to Avoid
    Avoid contrasting a sort-of heavy line with a sort of heavier line
    Avoid contrasting brown text with black headlines
    Avoid using two or more typefacesthat are similar