graphic and web design principles
TRANSCRIPT
Graphic & Web Design PrinciplesIntroduction to the Principles & Elements of Design(Unity | Balance | Hierarchy | Color | Image | Type )
Branding & Identity(Templates | Style Guides)
Web Design – Tools & Resources(Web Development/Design)
Visual CommunicationIn most careers, individuals will be required topresentations(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
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, words, pictures, etc. (ACTION)
Evokes a feeling | conveys a message
Arrangement of Form & Space
unity
Unity in design exists when all elements are in agreement
Unity exists when design elements look like they belong together
ProximitySimilarityRepetition
unity
ProximitySimilarityRepetition
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/
balance
https://www.canva.com/
emphasis | hierarchy
The varying degrees of emphasis in a composition
Dominant (focal point)Sub-dominant (middle ground - secondary)Subordinate (background – least visual weight)
hierarchy
emphasis | hierarchy
ContrastPlacementProportion
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 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.
Color
http://inkbotdesign.com/spot-cheap-logo-design/
Color
https://www.facebook.com/BurningThroughPages
color
color
https://color.adobe.com
Color ResourcesAdobe Color CChttps://color.adobe.com
COLOURlovershttp://www.colourlovers.com/
http://www.colourlovers.com/web/trends/websites
Design Melt Downhttp://www.designmeltdown.com/default.aspx
Colrdhttp://colrd.com/
Color Hunterhttp://colorhunter.com/
Pinteresthttps://www.pinterest.com/search/pins/?q=color%20schemes
Design Seedshttp://design-seeds.com/
http://www.britishlogodesign.co.uk/business-startup-help/logo-design/colour-in-logo-design-infographic/
In visual communication we can treat
type as a design element
http://trentwalton.com/2009/11/08/things-ive-learned-from-car-guys/
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.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
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 community or organization.
Image Editing / Creation Tools
Canva.com
Designers99Designs.comCrowdspring.comFreelancer.comCrowdstudio.inGuru.com
Stock ImagesiStockPhoto.comFlickr Creative CommonsCompfight.com500px.com
Outsource Solutions
http://tfuresz.com/portfolio/vpl/
VISUAL IDENTITY:Consistency in visual design strengthens the visual identity and makes the brand more recognizable
BRANDINGConsistency in visual design strengthens the visual identity
and makes the brand more recognizable • creates a connection
https://bonkperformanceseries.wordpress.com/
http://www.uwosh.edu/imc/brand-guidelines/brand-templates
Create Templates
https://brand.frontify.com/d/qAiubNBytHKf/style-guide#/style-guide/logo
frontify.com
ExamplesFoursquare Brand Standards http://issuu.com/bondo/docs/foursquare
Barnes & Noble Brand Standardshttp://issuu.com/carol_pistone/docs/barnes___noble_issuu/1
UWM Brand Standards Manualhttp://uwm.edu/wp-content/uploads/sites/115/2014/06/UWMBrandGuidelines8-13.pdf
Tools
https://frontify.com/styleguidehttp://styletil.es/
Brand & Design Style Guides
Resourceshttps://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/
Web Editing Tools
Wordpress• woothemes.com• Themify.me• appthemes.com
Drupal• themeforest.net• Omega drupal.org/project/omega
Outsource Solutions
A/B/N Testing
Accessibility
Card Sort
Tree Navigation
Site Speed
Top Tips1) Become familiar with the basic design principles and design
elements2) Learn the tools and techniques – experiment with free tools and
technologies3) Be consistent in your message and branding – build templates &
identity guidelines4) Design with usability in mind – Design for your audience 5) Don’t just decorate - communicate
Conclusion
http://sois.uwm.edu/wilsworld2015
Robert Nunez ([email protected])Head of Collection Services
Kenosha Public Library
Rebecca Hall ([email protected])Web Development & Marketing Director
UW-Milwaukee, School of Information Studies
Questions?