Visual Design English 202c
Design Principles <ul><li>Proximity </li></ul><ul><li>Alignment </li></ul><ul><li>Repetition </li></ul><ul><li>Contrast </...
Proximity <ul><li>Group related items together and unrelated items apart </li></ul><ul><li>Closeness, or proximities, impl...
Proximity (cont.) Bridget Johnson 116 Pennypacker Hall University Park, PA 16802 Education B.S., Biology, Penn State Unive...
Alignment <ul><li>Every element on a page should have a visual connection with something else on the page </li></ul><ul><l...
Left Alignment <ul><li>For resumes, left alignment provides a strong vertical line, for a dramatic, clean look </li></ul>B...
Indenting – part 1 <ul><li>Sometimes, indenting some blocks of text can make a document more readable and visually pleasin...
Indenting – part 2 <ul><li>Too many vertical lines mean less visual impact, so use indentations sparingly </li></ul>B.S., ...
Center Alignment <ul><li>Center alignment sometimes appears traditional or formal, and it lacks a strong visual line </li>...
Repetition <ul><li>Repeat some aspect of the design throughout the page: </li></ul><ul><ul><li>A bold font </li></ul></ul>...
Repetition (Cont.) <ul><li>You’re already probably familiar with repeating a certain type of heading throughout a document...
Contrast <ul><li>If two items are different, make them very different. </li></ul><ul><li>Contrast helps to show the reader...
Contrast - fonts <ul><li>Use different font sizes, weights, and structures to provide contrast </li></ul><ul><li>In genera...
White Space <ul><li>Contrast, repetition, proximity and alignment can help to create  white space </li></ul><ul><li>White ...
Upcoming SlideShare
Loading in...5
×

Visual design

1,311

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,311
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Visual design

  1. 1. Visual Design English 202c
  2. 2. Design Principles <ul><li>Proximity </li></ul><ul><li>Alignment </li></ul><ul><li>Repetition </li></ul><ul><li>Contrast </li></ul><ul><li>White space </li></ul>
  3. 3. Proximity <ul><li>Group related items together and unrelated items apart </li></ul><ul><li>Closeness, or proximities, implies a relationship </li></ul><ul><li>Before designing information, write down the separate pieces of information and then group them together – it’s just like organizing an essay </li></ul>Rupert Buchanan Widget Enterprises 1569 Stone Road Toulouse, PQ (800) 325-2532 Rupert Buchanan Widget Enterprises 1569 Stone Road Toulouse, PQ (800) 325-2352
  4. 4. Proximity (cont.) Bridget Johnson 116 Pennypacker Hall University Park, PA 16802 Education B.S., Biology, Penn State University, 2004 High School Diploma, Bellefonte HS, 2000 Work Experience Cashier, Drugstore Cowboy, 2001-2003 Operated cash register Handled customer complaints File clerk, MGX Systems, 2002 Managed files Organized materials Busboy/Dishwasher, Susie Q’s, 2000 Washed dishes Cleared tables B.S., Biology, Penn State University, 2004 High School Diploma, Bellefonte HS, 2000 Cashier, Drugstore Cowboy, 2001-2003 Operated cash register Handled customer complaints File clerk, MGX Systems, 2002 Managed files Organized materials Busboy/Dishwasher, Susie Q’s, 2000 Washed dishes Cleared tables Education Work Experience Bridget Johnson 116 Pennypacker Hall University Park, PA 16802
  5. 5. Alignment <ul><li>Every element on a page should have a visual connection with something else on the page </li></ul><ul><li>A right or left alignment creates a strong visual line </li></ul>Rupert Buchanan Widget Enterprises 1569 Stone Road Toulouse, PQ (800) 325-2532 Rupert Buchanan Widget Enterprises 1569 Stone Road Toulouse, PQ (800) 325-2532
  6. 6. Left Alignment <ul><li>For resumes, left alignment provides a strong vertical line, for a dramatic, clean look </li></ul>B.S., Biology, Penn State University, 2004 High School Diploma, Bellefonte HS, 2000 <ul><li>Cashier, Drugstore Cowboy, 2001-2003 </li></ul><ul><li>Operated cash register </li></ul><ul><li>Handled customer complaints </li></ul><ul><li>File clerk, MGX Systems, 2002 </li></ul><ul><li>Managed files </li></ul><ul><li>Organized materials </li></ul><ul><li>Busboy/Dishwasher, Susie Q’s, 2000 </li></ul><ul><li>Washed dishes </li></ul><ul><li>Cleared tables </li></ul>Education Work Experience Bridget Johnson
  7. 7. Indenting – part 1 <ul><li>Sometimes, indenting some blocks of text can make a document more readable and visually pleasing </li></ul>B.S., Biology, Penn State University, 2004 High School Diploma, Bellefonte HS, 2000 <ul><li>Cashier, Drugstore Cowboy, 2001-2003 </li></ul><ul><li>Operated cash register </li></ul><ul><li>Handled customer complaints </li></ul><ul><li>File clerk, MGX Systems, 2002 </li></ul><ul><li>Managed files </li></ul><ul><li>Organized materials </li></ul><ul><li>Busboy/Dishwasher, Susie Q’s, 2000 </li></ul><ul><li>Washed dishes </li></ul><ul><li>Cleared tables </li></ul>Education Work Experience Bridget Johnson
  8. 8. Indenting – part 2 <ul><li>Too many vertical lines mean less visual impact, so use indentations sparingly </li></ul>B.S., Biology, Penn State University, 2004 High School Diploma, Bellefonte HS, 2000 <ul><li>Cashier, Drugstore Cowboy, 2001-2003 </li></ul><ul><ul><li>Operated cash register </li></ul></ul><ul><ul><li>Handled customer complaints </li></ul></ul><ul><li>File clerk, MGX Systems, 2002 </li></ul><ul><ul><li>Managed files </li></ul></ul><ul><ul><li>Organized materials </li></ul></ul><ul><li>Busboy/Dishwasher, Susie Q’s, 2000 </li></ul><ul><ul><li>Washed dishes </li></ul></ul><ul><ul><li>Cleared tables </li></ul></ul>Education Work Experience Bridget Johnson
  9. 9. Center Alignment <ul><li>Center alignment sometimes appears traditional or formal, and it lacks a strong visual line </li></ul><ul><li>Because everything is centered, the resume at right looks more like a menu than a resume </li></ul>B.S., Biology, Penn State University, 2004 High School Diploma, Bellefonte HS, 2000 Cashier, Drugstore Cowboy, 2001-2003 Operated cash register Handled customer complaints File clerk, MGX Systems, 2002 Managed files Organized materials Busboy/Dishwasher, Susie Q’s, 2000 Washed dishes Cleared tables Education Work Experience Bridget Johnson 116 Pennypacker Hall University Park, PA 16802
  10. 10. Repetition <ul><li>Repeat some aspect of the design throughout the page: </li></ul><ul><ul><li>A bold font </li></ul></ul><ul><ul><li>A thick rule </li></ul></ul><ul><ul><li>Color </li></ul></ul><ul><ul><li>A graphic or design element…. </li></ul></ul><ul><ul><li>Anything the reader will recognize and remember from page to page </li></ul></ul>Rupert Buchanan Widget Enterprises 1569 Stone Road Toulouse, PQ (800) 325-2532 Rupert Buchanan Widget Enterprises 1569 Stone Road Toulouse, PQ (800) 325-2532
  11. 11. Repetition (Cont.) <ul><li>You’re already probably familiar with repeating a certain type of heading throughout a document </li></ul><ul><li>In this example, the repeated heading, rules fonts, font sizes and bullets create visual interest and provides organizational cues to the reader </li></ul>B.S., Biology, Penn State University, 2004 High School Diploma, Bellefonte HS, 2000 <ul><li>Cashier , Drugstore Cowboy, 2001-2003 </li></ul><ul><li>Operated cash register </li></ul><ul><li>Handled customer complaints </li></ul><ul><li>File clerk , MGX Systems, 2002 </li></ul><ul><li>Managed files </li></ul><ul><li>Organized materials </li></ul><ul><li>Busboy/Dishwashe r, Susie Q’s, 2000 </li></ul><ul><li>Washed dishes </li></ul><ul><li>Cleared tables </li></ul>Education Work Experience Bridget Johnson 116 Pennypacker Hall University Park, PA 16802
  12. 12. Contrast <ul><li>If two items are different, make them very different. </li></ul><ul><li>Contrast helps to show the reader where to focus their attention </li></ul><ul><li>To provide contrast, you can use: </li></ul><ul><ul><li>Different fonts, font sizes, or weights (e.g. bold) </li></ul></ul><ul><ul><li>Color </li></ul></ul><ul><ul><li>Directions (horizontal vs. vertical) </li></ul></ul>
  13. 13. Contrast - fonts <ul><li>Use different font sizes, weights, and structures to provide contrast </li></ul><ul><li>In general, sans serif fonts (like Arial) work best for headings, while serif fonts (like Times) work best for body text </li></ul>
  14. 14. White Space <ul><li>Contrast, repetition, proximity and alignment can help to create white space </li></ul><ul><li>White space helps the reader to recognize chunks of information </li></ul><ul><li>White space also helps make a page of text easier to read, skim, and scan </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×