O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
Graphic & Web Design Principles
Introduction to the Principles & Elements of Design
(Unity | Balance | Hierarchy | Color |...
Visual Communication
In most careers, individuals will be required to
presentations
(conference presentations | training |...
Robin Williams. (2008). The Non-Designer's Design & Type
Books. Deluxe Edition. Peachpit Press.
FORM SPACE
design is the deliberate arrangement of …
Form = lines, shapes, textures, colors, words, pictures, etc. (ORDER) Form = lines, textures, shapes, textures, colors, wo...
unity
Unity in design exists when
all elements are in
agreement
Unity exists when design
elements look like they
belong to...
unity
Proximity
Similarity
Repetition
balance
Elements are visually equivalent on both sides of a
composition • evenly distributed around a central,
vertical or...
balance
https://www.canva.com/
emphasis | hierarchy
The varying degrees of emphasis
in a composition
Dominant
(focal point)
Sub-dominant
(middle ground -...
emphasis | hierarchy
Contrast
Placement
Proportion
dominance or emphasis in a
design can be created by the
use of:
http://www.stocklayouts.com/
emphasis | hierarchy
Dominance & Hierarchy
Communicate
(don’t just decorate)
Every design element should serve a
purpose – add value to the message.
• Evoke a feelin...
Color
http://inkbotdesign.com/spot-cheap-logo-design/
Color
https://www.facebook.com/BurningThroughPages
color
color
https://color.adobe.com
Color Resources
Adobe Color CC
https://color.adobe.com
COLOURlovers
http://www.colourlovers.com/
http://www.colourlovers.c...
In visual communication we can treat
type as a design element
http://trentwalton.com/2009/11/08/things-ive-learned-from-ca...
type
http://superdevresources.com/making-font-combinations-that-work-infographics/
type
Sources
http://www.fontsquirrel.com/
https://www.google.com/fonts
Type Resources
http://ifontyou.com/
https://designschool...
Image / Texture
http://www.njstatelib.org/blog/marketing/page/4/ http://jackielay.com/design_posters.php
http://www.tgclb.org/
Image / Texture
http://www.tgclb.org/
Image / Texture
Learn the tools and techniques used to help you develop materials that
effectively promote and inform your library communi...
Image Editing / Creation Tools
Canva.com
Designers
99Designs.com
Crowdspring.com
Freelancer.com
Crowdstudio.in
Guru.com
Stock Images
iStockPhoto.com
Flickr Creativ...
http://tfuresz.com/portfolio/vpl/
VISUAL IDENTITY:
Consistency in visual
design strengthens the
visual identity and
makes ...
BRANDING
Consistency in visual design strengthens the visual identity and makes the
brand more recognizable • creates a co...
http://www.uwosh.edu/imc/brand-guidelines/brand-templates
Create Templates
https://brand.frontify.com/d/qAiubNByt
HKf/style-guide#/style-guide/logo
frontify.com
Examples
Foursquare Brand Standards
http://issuu.com/bondo/docs/foursquare
Barnes & Noble Brand Standards
http://issuu.com...
Web Editing Tools
Wordpress
• woothemes.com
• Themify.me
• appthemes.com
Drupal
• themeforest.net
• Omega
drupal.org/project/omega
Outsource...
A/B/N Testing
Accessibility
Card Sort
Tree Navigation
Site Speed
Top Tips
1) Become familiar with the basic design principles and design elements
2) Learn the tools and techniques – exper...
http://sois.uwm.edu/wilsworld2015
Robert Nunez (rnunez@mykpl.info)
Head of Collection Services
Kenosha Public Library
Rebe...
Graphic and Web Design Principles
Graphic and Web Design Principles
Graphic and Web Design Principles
Graphic and Web Design Principles
Graphic and Web Design Principles
Graphic and Web Design Principles
Graphic and Web Design Principles
Graphic and Web Design Principles
Próximos SlideShares
Carregando em…5
×

Graphic and Web Design Principles

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.

  • Entre para ver os comentários

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?

×