Principles of Graphic Design - dphu.org · Principles Graphic Design • Basic graphic design...
Transcript of Principles of Graphic Design - dphu.org · Principles Graphic Design • Basic graphic design...
Principles of Graphic Design
Pat Morin
COMP 2405
2
Principles Graphic Design• Basic graphic design principles can be
summarized in one word:
• CRAP:– Contrast– Repetition– Alignment– Proximity
• Focus (here) is on text
3
Contrast• Contrast: When two elements are not exactly the
same, they should be very different – Otherwise it just looks like a mistake
• With text, contrast can be achieved through– Font size: small, medium, large– Font family: serif, sans-serif, cursive, monospace,
– Font weight: light, normal, bold– Font style: oblique, normal, italic– Font decoration: none, underline, shadowshadow,
• We can also use text and/or background color
4
Contrast (Cont'd)• Contrast can be used to separate different parts of
a document (e.g., navigation vs. content)
• Contrast can be used to aid the user in navigation (e.g., section headings)
• In the best case, weak contrast is not noticeable
• In the worst case, it just looks bad– User's Name: Patrick Morin
– User's Location: 5177 Herzberg Building
5
Repetition• Styles and visual elements should be repeated
across a page and across a web site
• Leads to a cohesive and consistent web site
• Repetition can be achieved with– Text (font) properties: Use these the same way throughout– Color: Consistent use of color throughout the site/document– Background: Background images/colors– Page and section layout: Similar elements should should be
layed out the same way– Images: Graphics can be repeated and/or styled similarly – Alignment: Consistent use of alignment
6
Repetition (Cont'd)• Repetition lets a user know that they are still on the
same web site
• Repetition allows a visitor to learn the page (or section) layout only once
• Another form of repetition: Web design patterns
7
Alignment• Our minds like to imagine straight line grids when
look at things
• We like to see things line up
• We can't stand to see things that almost – but don't quite – line up
• We also like to see equal distances– This is a technique called symmetric spacing
• Things that are not aligned get treated differently– Navigation bar text vs. body text
8
Alignment - Example
9
Proximity• Proximity (closeness of objects) can be used to
group related items together– Section heading close to section text– Figure caption close to figure
• Distance can be used to visually separate unrelated items– Extra space before section heading separates it from previous
section– Extra space before and after figures separate them from text
and other figures
10
CRAP Summary• Contrast
– When things are different make them very different– Can be used to guide the reader's focus
• Repetition– Repetition creates a sense of cohesion and consistency
• Alignment– Alignment is critical for good looking web pages– Small alignment problems can make a whole page look bad
• Proximity– Closeness and distance can be used to group related items
and separate unrelated items, respectively