Web vs. Print

  • 2,744 views
Uploaded on

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.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • cool...php developer,shopping cart developer easydev10@gmail.com
    Are you sure you want to
    Your message goes here
  • 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
No Downloads

Views

Total Views
2,744
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
148
Comments
2
Likes
5

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

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