Visual design

1,445 views
1,369 views

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,445
On SlideShare
0
From Embeds
0
Number of Embeds
775
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>

×