Web vs. Print
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Web vs. Print

on

  • 4,032 views

Enumerates some of the differences between designing for print and designing for the Web.

Enumerates some of the differences between designing for print and designing for the Web.

Statistics

Views

Total Views
4,032
Views on SlideShare
3,754
Embed Views
278

Actions

Likes
5
Downloads
147
Comments
2

9 Embeds 278

http://alex-kahl.digital-dictators.de 203
http://www.slideshare.net 28
http://wwwi.mcpherson.edu 26
http://chrisrutz.de 10
http://posterous.com 4
http://mediaissues-daphne.blogspot.com 3
http://wild.freshout.co.uk 2
https://bb.scps.k12.fl.us 1
http://www.pearltrees.com 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

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…
  • cool...php developer,shopping cart developer easydev10@gmail.com
    Are you sure you want to
    Your message goes here
    Processing…
  • Good title! I think this slides have not been complete,such as less of design at Print and comparision from at Web,:)
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Web vs. Print Presentation Transcript

  • 1. AR340 WEB-BASED DESIGN ● FALL 2010 CRAP on the Web The Good, the Bad, and the Ugly Bruce Clary, McPherson College, McPherson, Kansas
  • 2. AR340 WEB-BASED DESIGN ● FALL 2010 Elements and principles of design As the course proceeds, we’ll spend time reviewing the elements1 of design and the principles of design, but for now we’ll keep it 2 simple… 1 Line, color, value, texture, shape, size, direction 2 Unity, conflict, dominance/emphasis, repetition & pattern, proportion, harmony, balance, gradation
  • 3. AR340 WEB-BASED DESIGN ● FALL 2010 CRAP
  • 4. AR340 WEB-BASED DESIGN ● FALL 2010 CRAP Contrast
  • 5. AR340 WEB-BASED DESIGN ● FALL 2010 CRAP Contrast Repetition
  • 6. AR340 WEB-BASED DESIGN ● FALL 2010 CRAP Contrast Repetition Alignment
  • 7. AR340 WEB-BASED DESIGN ● FALL 2010 CRAP Contrast Repetition Alignment Proximity
  • 8. AR340 WEB-BASED DESIGN ● FALL 2010 CRAP Contrast Repetition Alignment Proximity CRAP is a simplified approach to design introduced by Robin Williams in the first edition of The Non-Designers Design Book, Peachpit Press, 1994.
  • 9. AR340 WEB-BASED DESIGN ● FALL 2010
  • 10. AR340 WEB-BASED DESIGN ● FALL 2010
  • 11. AR340 WEB-BASED DESIGN ● FALL 2010 Contrast, Repetition, Alignment, Proximity
  • 12. AR340 WEB-BASED DESIGN ● FALL 2010 Contrast, Repetition, Alignment, Proximity • Makes different things different
  • 13. AR340 WEB-BASED DESIGN ● FALL 2010 Contrast, Repetition, Alignment, Proximity • Makes different things different • Brings out dominant elements
  • 14. AR340 WEB-BASED DESIGN ● FALL 2010 Contrast, Repetition, Alignment, Proximity • Makes different things different • Brings out dominant elements • Creates energy
  • 15. AR340 WEB-BASED DESIGN ● FALL 2010 Contrast, Repetition, Alignment, Proximity • Makes different things different • Brings out dominant elements • Creates energy 1
  • 16. AR340 WEB-BASED DESIGN ● FALL 2010 Contrast, Repetition, Alignment, Proximity • Makes different things different • Brings out dominant elements • Creates energy 1 2
  • 17. AR340 WEB-BASED DESIGN ● FALL 2010 Contrast, Repetition, Alignment, Proximity • Makes different things different • Brings out dominant elements • Creates energy 1 2 3
  • 18. AR340 WEB-BASED DESIGN ● FALL 2010 Contrast, Repetition, Alignment, Proximity • Makes different things different • Brings out dominant elements • Creates energy 1 2 3 4
  • 19. AR340 WEB-BASED DESIGN ● FALL 2010 Contrast, Repetition, Alignment, Proximity • Makes different things different • Brings out dominant elements • Creates energy 1 2 3 4 5
  • 20. AR340 WEB-BASED DESIGN ● FALL 2010
  • 21. AR340 WEB-BASED DESIGN ● FALL 2010
  • 22. AR340 WEB-BASED DESIGN ● FALL 2010
  • 23. AR340 WEB-BASED DESIGN ● FALL 2010
  • 24. AR340 WEB-BASED DESIGN ● FALL 2010
  • 25. AR340 WEB-BASED DESIGN ● FALL 2010 Contrast, Repetition, Alignment, Proximity
  • 26. AR340 WEB-BASED DESIGN ● FALL 2010 Contrast, Repetition, Alignment, Proximity • Provides consistency
  • 27. AR340 WEB-BASED DESIGN ● FALL 2010 Contrast, Repetition, Alignment, Proximity • Provides consistency • Creates unity
  • 28. AR340 WEB-BASED DESIGN ● FALL 2010 Contrast, Repetition, Alignment, Proximity • Provides consistency • Creates unity 1
  • 29. AR340 WEB-BASED DESIGN ● FALL 2010 Contrast, Repetition, Alignment, Proximity • Provides consistency • Creates unity 1 2
  • 30. AR340 WEB-BASED DESIGN ● FALL 2010 Contrast, Repetition, Alignment, Proximity • Provides consistency • Creates unity 1 3 2
  • 31. AR340 WEB-BASED DESIGN ● FALL 2010 Contrast, Repetition, Alignment, Proximity • Provides consistency • Creates unity 1 3 2 4
  • 32. AR340 WEB-BASED DESIGN ● FALL 2010
  • 33. AR340 WEB-BASED DESIGN ● FALL 2010
  • 34. AR340 WEB-BASED DESIGN ● FALL 2010
  • 35. AR340 WEB-BASED DESIGN ● FALL 2010
  • 36. AR340 WEB-BASED DESIGN ● FALL 2010
  • 37. AR340 WEB-BASED DESIGN ● FALL 2010 Contrast, Repetition, Alignment, Proximity
  • 38. AR340 WEB-BASED DESIGN ● FALL 2010 Contrast, Repetition, Alignment, Proximity • Creates a visual flow
  • 39. AR340 WEB-BASED DESIGN ● FALL 2010 Contrast, Repetition, Alignment, Proximity • Creates a visual flow • Connects elements
  • 40. AR340 WEB-BASED DESIGN ● FALL 2010 Contrast, Repetition, Alignment, Proximity • Creates a visual flow • Connects elements • Imposes order & control
  • 41. AR340 WEB-BASED DESIGN ● FALL 2010 Contrast, Repetition, Alignment, Proximity • Creates a visual flow • Connects elements 1 • Imposes order & control
  • 42. AR340 WEB-BASED DESIGN ● FALL 2010 Contrast, Repetition, Alignment, Proximity • Creates a visual flow • Connects elements 1 • Imposes order & control 2
  • 43. AR340 WEB-BASED DESIGN ● FALL 2010 Contrast, Repetition, Alignment, Proximity • Creates a visual flow • Connects elements 1 • Imposes order & control 2 3
  • 44. AR340 WEB-BASED DESIGN ● FALL 2010 Contrast, Repetition, Alignment, Proximity • Creates a visual flow • Connects elements 1 • Imposes order & control 2 3 4
  • 45. AR340 WEB-BASED DESIGN ● FALL 2010
  • 46. AR340 WEB-BASED DESIGN ● FALL 2010
  • 47. AR340 WEB-BASED DESIGN ● FALL 2010
  • 48. AR340 WEB-BASED DESIGN ● FALL 2010
  • 49. AR340 WEB-BASED DESIGN ● FALL 2010
  • 50. AR340 WEB-BASED DESIGN ● FALL 2010
  • 51. AR340 WEB-BASED DESIGN ● FALL 2010 Contrast, Repetition, Alignment, Proximity
  • 52. AR340 WEB-BASED DESIGN ● FALL 2010 Contrast, Repetition, Alignment, Proximity • Connects elements
  • 53. AR340 WEB-BASED DESIGN ● FALL 2010 Contrast, Repetition, Alignment, Proximity • Connects elements • Creates visual order and logic
  • 54. AR340 WEB-BASED DESIGN ● FALL 2010 Contrast, Repetition, Alignment, Proximity • Connects elements • Creates visual order and logic 1
  • 55. AR340 WEB-BASED DESIGN ● FALL 2010 Contrast, Repetition, Alignment, Proximity • Connects elements • Creates visual order and logic 1 2
  • 56. AR340 WEB-BASED DESIGN ● FALL 2010 Contrast, Repetition, Alignment, Proximity • Connects elements • Creates visual order and logic 1 2 3
  • 57. AR340 WEB-BASED DESIGN ● FALL 2010
  • 58. AR340 WEB-BASED DESIGN ● FALL 2010
  • 59. AR340 WEB-BASED DESIGN ● FALL 2010
  • 60. AR340 WEB-BASED DESIGN ● FALL 2010
  • 61. AR340 WEB-BASED DESIGN ● FALL 2010