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

1,890 views

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 http://www.digital-web.com/articles/principles_of_design/
  9. 9. balance https://www.canva.com/
  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. http://www.stocklayouts.com/ 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 http://inkbotdesign.com/spot-cheap-logo-design/
  16. 16. Color https://www.facebook.com/BurningThroughPages
  17. 17. color
  18. 18. color https://color.adobe.com
  19. 19. Color Resources Adobe Color CC https://color.adobe.com COLOURlovers http://www.colourlovers.com/ http://www.colourlovers.com/ web/trends/websites Design Melt Down http://www.designmeltdown.com/default.aspx Colrd http://colrd.com/ Color Hunter http://colorhunter.com/ Pinterest https://www.pinterest.com/search/ pins/?q=color%20schemes Design Seeds http://design-seeds.com/http://www.britishlogodesign.co.uk/business-startup- help/logo-design/colour-in-logo-design-infographic/
  20. 20. In visual communication we can treat type as a design element http://trentwalton.com/2009/11/08/things-ive-learned-from-car-guys/
  21. 21. type http://superdevresources.com/making-font-combinations-that-work-infographics/
  22. 22. type
  23. 23. Sources http://www.fontsquirrel.com/ https://www.google.com/fonts Type Resources http://ifontyou.com/ https://designschool.canva.com/blog/typeface-fonts/ https://www.pinterest.com/explore/font-combinations/ http://www.papress.com/thinkingwithtype/text/tracking.htm http://graphicdesign.spokanefalls.edu/tutorials/process/ type_basics/default.htm
  24. 24. Image / Texture http://www.njstatelib.org/blog/marketing/page/4/ http://jackielay.com/design_posters.php
  25. 25. http://www.tgclb.org/ Image / Texture
  26. 26. http://www.tgclb.org/ 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. Canva.com
  30. 30. Designers 99Designs.com Crowdspring.com Freelancer.com Crowdstudio.in Guru.com Stock Images iStockPhoto.com Flickr Creative Commons Compfight.com 500px.com Outsource Solutions
  31. 31. http://tfuresz.com/portfolio/vpl/ 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 https://bonkperformanceseries.wordpress.com/
  33. 33. http://www.uwosh.edu/imc/brand-guidelines/brand-templates Create Templates
  34. 34. https://brand.frontify.com/d/qAiubNByt HKf/style-guide#/style-guide/logo frontify.com
  35. 35. Examples Foursquare Brand Standards http://issuu.com/bondo/docs/foursquare Barnes & Noble Brand Standards http://issuu.com/carol_pistone/docs/barnes___noble_issuu/1 UWM Brand Standards Manual http://uwm.edu/wp-content/uploads/sites/115/2014/06/ UWMBrandGuidelines8-13.pdf Tools https://frontify.com/styleguide http://styletil.es/ Brand & Design Style Guides Resources https://designschool.canva.com/blog/your-brand-needs-a-visual-style-guide/ https://designschool.canva.com/blog/20-easy-tips-build-visual-brand-identity/ https://designschool.canva.com/branding-identity-design/
  36. 36. Web Editing Tools
  37. 37. Wordpress • woothemes.com • Themify.me • appthemes.com Drupal • themeforest.net • Omega drupal.org/project/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. http://sois.uwm.edu/wilsworld2015 Robert Nunez (rnunez@mykpl.info) Head of Collection Services Kenosha Public Library Rebecca Hall (rjhall@uwm.edu) Web Development & Marketing Director UW-Milwaukee, School of Information Studies Questions?

×