Introduction To Visual Design

2,598 views
2,409 views

Published on

Slide deck of my presentation at SWF Code Camp on Oct 3, 2009

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

No Downloads
Views
Total views
2,598
On SlideShare
0
From Embeds
0
Number of Embeds
18
Actions
Shares
0
Downloads
94
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

Introduction To Visual Design

  1. 1. Introduction to Visual Design<br />
  2. 2. Ever wonder how to think like a Designer?<br />This presentation introduces the fundamentals of visual design with examples from art history to pop culture, then explains how they translate to best practices in designing graphic user interfaces. <br />We polish it off with a demonstration of how to implement some of these concepts using Expression Studio. <br />Whether you have a designer-developer workflow or you ARE the designer-developer workflow, this presentation aims to simplify the mystery of why things “look good.”<br />
  3. 3. This is me:<br />Twitter: dianeleeper<br />www.dianeleeper.com<br />www.42stars.com<br />
  4. 4. This is me:<br />Twitter: dianeleeper<br />www.dianeleeper.com<br />www.42stars.com<br />This is also me.<br />
  5. 5. Lin Bolin <br />Seeing the Invisible<br />
  6. 6. What is Art&Why is it Important?<br />
  7. 7. Don’t worry.<br />We are not(really) going there.<br />
  8. 8. Don’t worry.<br />We are not(really) going there.<br />But we do need to mention two things which art can do really well.<br />
  9. 9.
  10. 10. Some art is <br />“just decorative”<br />Some art is created<br />to match your sofa<br />Some art is created<br />to make people say <br />“oh how pretty!”<br />
  11. 11.
  12. 12. In my opinion, the best “Art”<br />makes you ask a question.<br />
  13. 13. Computers are useless. They can only give you answers. <br />Pablo Picasso<br />
  14. 14.
  15. 15. 1977<br />
  16. 16. 1977 (pong)<br />
  17. 17. Cecin’est pas un pipe.<br />
  18. 18.
  19. 19. But if<br />EVERYTHING IS ART<br />
  20. 20. Then<br />NOTHING IS ART<br />
  21. 21. So what can you <br />talk about?<br />
  22. 22. Intention &Success<br />
  23. 23. Design is Art with objectives.<br />Art does not need set goalsto be Art. It’s ok with experimentation.<br />Design favors set goals and restraints. It resides in the realm of the measurable.<br />
  24. 24.
  25. 25. There is overlap between art and design.<br />It’s not really necessary to define how much.<br />
  26. 26. Thereis overlap between Art and Design.<br />It’s not really necessary to define how much.<br />
  27. 27. Design favors set goals and restraints. It resides in the realm of the measurable.<br />
  28. 28. Design brings order.<br />
  29. 29. Design brings order.<br />
  30. 30.
  31. 31. Design solves problems.<br />
  32. 32. Design solves problems.<br />How do we design an advertisement that makes people read our copy?<br />
  33. 33.
  34. 34.
  35. 35.
  36. 36. Design creates empathy.<br />
  37. 37. Design creates empathy.<br />Better yet, Design is about visually telling your story to someone else.<br />
  38. 38.
  39. 39.
  40. 40.
  41. 41. Design is creative.<br />
  42. 42.
  43. 43. A Design Process<br />
  44. 44. A Design Process<br />Get an Idea<br />Decide on the Form it should take<br />Decide what Methods to use<br />Create the Structure <br />Craft it<br />Polish<br />
  45. 45. A Design Process<br />Observe and Collect<br />Brainstorm and Sketch<br />Edit and Refine<br />Produce<br />
  46. 46. Observe & Collect<br />Be a Pirate.<br />
  47. 47. Brainstorm &Sketch<br />
  48. 48. Edit &Refine<br />
  49. 49. Produce<br />
  50. 50. DEBORAH ADLER<br />
  51. 51.
  52. 52. Visual Tools of the Trade<br />
  53. 53. Visual Tools of the Trade<br />Color<br />Texture<br />Image<br />Type<br />Look and Feel<br />
  54. 54. Color<br />
  55. 55. Warm<br />
  56. 56. Cool<br />
  57. 57.
  58. 58.
  59. 59.
  60. 60.
  61. 61.
  62. 62. Some Good Color Resources<br />
  63. 63.
  64. 64.
  65. 65.
  66. 66. Visual Tools of the Trade<br />Color<br />Texture<br />Image<br />Type<br />Look and Feel<br />
  67. 67.
  68. 68. Texture creates the <br />illusion of space<br />
  69. 69.
  70. 70.
  71. 71.
  72. 72.
  73. 73. Some Good Texture Resources<br />
  74. 74.
  75. 75.
  76. 76. Visual Tools of the Trade<br />Color<br />Texture<br />Image<br />Type<br />Look and Feel<br />
  77. 77.
  78. 78.
  79. 79.
  80. 80.
  81. 81. Visual Tools of the Trade<br />Color<br />Texture<br />Image<br />Type<br />Look and Feel<br />
  82. 82.
  83. 83. And then she saw it…<br />And then she saw it…<br />Oh, you get the idea.<br />And then she saw it…<br />And then she saw it…<br />And then she saw it…<br />
  84. 84.
  85. 85.
  86. 86.
  87. 87. Some Good Type Resources<br />
  88. 88.
  89. 89.
  90. 90.
  91. 91.
  92. 92.
  93. 93. Whitespace is not wasted space.<br />
  94. 94.
  95. 95. Consider the alternative.<br />
  96. 96.
  97. 97. Negative space is not wasted space.<br />
  98. 98. Use a Grid Give your design some room to relax.<br />
  99. 99.
  100. 100.
  101. 101. 5% to 8% <br />of men are <br />color blind<br />1%<br />of women are<br />color blind<br />
  102. 102. Color should not be your only visual clue in a design.<br />
  103. 103. Browser Inconsistency<br />
  104. 104. The Fold<br />The term “fold” comes from newspaper design and refers to any content that is not visible when a viewer first comes to the screen.<br />
  105. 105. The Fold<br />I’m going to let you finish, but…<br />
  106. 106. Web Design has it’s own rules.<br />But it’s a fun game.<br />A few good resources:<br />
  107. 107.
  108. 108. What is Skill &Why is it Important?<br />
  109. 109.
  110. 110.
  111. 111.
  112. 112. Spark Your Creativity<br />
  113. 113. Observe and Collect<br />
  114. 114. Check out local art!<br />
  115. 115. Take Photos<br />
  116. 116. Take a class<br />
  117. 117. Sketch<br />
  118. 118. Learn Typography<br />
  119. 119.
  120. 120. Just do it.<br />

×