Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Graphic and Web Design Principles


Published on

Rob Nunez, Head of Collection Services, Kenosha Public Library
Rebecca Hall, Web Development & Marketing Director & Instructor, UW-Milwaukee

Quality graphic and web design are crucial to promoting, branding, and raising awareness of your library and its valuable services, but it’s an expensive skill to hire out. Many libraries are taking on these challenges themselves, and assisted with a variety of free or cheap online design tools, are creating websites, logos, banners, and other graphic elements for their print or online resources. This session will help those involved in creating and maintaining these to understand the principles of making appealing and effective visual materials for their libraries and services.

Published in: Education
  • Be the first to comment

Graphic and Web Design Principles

  1. 1. Graphic & Web Design Principles Introduction to the Principles & Elements of Design (Unity | Balance | Hierarchy | Color | Image | Type ) Branding & Identity (Templates | Style Guides) Web Design – Tools & Resources (Web Development/Design)
  2. 2. Visual Communication In most careers, individuals will be required to presentations (conference presentations | training | programming) publications (newsletters | annual reports ) marketing (posters | displays | advertisements | branding) online communications (web development/design/updates| social media) use technology to communicate effectively
  3. 3. Robin Williams. (2008). The Non-Designer's Design & Type Books. Deluxe Edition. Peachpit Press.
  4. 4. FORM SPACE design is the deliberate arrangement of …
  5. 5. Form = lines, shapes, textures, colors, words, pictures, etc. (ORDER) Form = lines, textures, shapes, textures, colors, words, pictures, etc. (ACTION) Evokes a feeling | conveys a message Arrangement of Form & Space
  6. 6. unity Unity in design exists when all elements are in agreement Unity exists when design elements look like they belong together Proximity Similarity Repetition
  7. 7. unity Proximity Similarity Repetition
  8. 8. balance Elements are visually equivalent on both sides of a composition • evenly distributed around a central, vertical or horizontal axis Symmetric Elements of differing size, shape, tone are arranged in a composition in a way that balance each others visual weight Asymmetric
  9. 9. balance
  10. 10. emphasis | hierarchy The varying degrees of emphasis in a composition Dominant (focal point) Sub-dominant (middle ground - secondary) Subordinate (background – least visual weight) hierarchy
  11. 11. emphasis | hierarchy Contrast Placement Proportion dominance or emphasis in a design can be created by the use of:
  12. 12. emphasis | hierarchy
  13. 13. Dominance & Hierarchy
  14. 14. Communicate (don’t just decorate) Every design element should serve a purpose – add value to the message. • Evoke a feeling or mood • Convey a message or idea • Build a user’s personal engagement with the content • Control the pacing of material • Help organize the information and help create the informational hierarchy Robin Williams. (2008). The Non-Designer's Design & Type Books. Deluxe Edition. Peachpit Press.
  15. 15. Color
  16. 16. Color
  17. 17. color
  18. 18. color
  19. 19. Color Resources Adobe Color CC COLOURlovers web/trends/websites Design Melt Down Colrd Color Hunter Pinterest pins/?q=color%20schemes Design Seeds help/logo-design/colour-in-logo-design-infographic/
  20. 20. In visual communication we can treat type as a design element
  21. 21. type
  22. 22. type
  23. 23. Sources Type Resources type_basics/default.htm
  24. 24. Image / Texture
  25. 25. Image / Texture
  26. 26. Image / Texture
  27. 27. Learn the tools and techniques used to help you develop materials that effectively promote and inform your library community or organization.
  28. 28. Image Editing / Creation Tools
  29. 29.
  30. 30. Designers Stock Images Flickr Creative Commons Outsource Solutions
  31. 31. VISUAL IDENTITY: Consistency in visual design strengthens the visual identity and makes the brand more recognizable
  32. 32. BRANDING Consistency in visual design strengthens the visual identity and makes the brand more recognizable • creates a connection
  33. 33. Create Templates
  34. 34. HKf/style-guide#/style-guide/logo
  35. 35. Examples Foursquare Brand Standards Barnes & Noble Brand Standards UWM Brand Standards Manual UWMBrandGuidelines8-13.pdf Tools Brand & Design Style Guides Resources
  36. 36. Web Editing Tools
  37. 37. Wordpress • • • Drupal • • Omega Outsource Solutions
  38. 38. A/B/N Testing
  39. 39. Accessibility
  40. 40. Card Sort
  41. 41. Tree Navigation
  42. 42. Site Speed
  43. 43. Top Tips 1) Become familiar with the basic design principles and design elements 2) Learn the tools and techniques – experiment with free tools and technologies 3) Be consistent in your message and branding – build templates & identity guidelines 4) Design with usability in mind – Design for your audience 5) Don’t just decorate - communicate Conclusion
  44. 44. Robert Nunez ( Head of Collection Services Kenosha Public Library Rebecca Hall ( Web Development & Marketing Director UW-Milwaukee, School of Information Studies Questions?