Download - Visual Design for Content Management Systems
![Page 1: Visual Design for Content Management Systems](https://reader034.vdocuments.us/reader034/viewer/2022050720/54c732a94a7959126e8b4658/html5/thumbnails/1.jpg)
VISUAL DESIGN For Content Management Systems
![Page 2: Visual Design for Content Management Systems](https://reader034.vdocuments.us/reader034/viewer/2022050720/54c732a94a7959126e8b4658/html5/thumbnails/2.jpg)
WHAT IS A CMS?
![Page 3: Visual Design for Content Management Systems](https://reader034.vdocuments.us/reader034/viewer/2022050720/54c732a94a7959126e8b4658/html5/thumbnails/3.jpg)
What is a CMS? • Database-driven framework for creating dynamic websites • Allows clients to edit their own content • Saves time on site edits and updates post-launch • Many options available:
• Wordpress • Drupal • Expression Engine • Joomla • …?
![Page 4: Visual Design for Content Management Systems](https://reader034.vdocuments.us/reader034/viewer/2022050720/54c732a94a7959126e8b4658/html5/thumbnails/4.jpg)
Which CMS to choose? • Wordpress
• Good for basic promotional sites and blogs; can be expanded with custom code
• Drupal • More flexible & secure than Wordpress, but more complex to get up
and running • Good for sites that require distinct “sections” of content that have
different display requirements
• Expression Engine • More flexible than both Wordpress and Drupal, but requires
extensive customization • Not open source; requires a license fee
![Page 5: Visual Design for Content Management Systems](https://reader034.vdocuments.us/reader034/viewer/2022050720/54c732a94a7959126e8b4658/html5/thumbnails/5.jpg)
AESTHETIC ELEMENTS OF DESIGN
![Page 6: Visual Design for Content Management Systems](https://reader034.vdocuments.us/reader034/viewer/2022050720/54c732a94a7959126e8b4658/html5/thumbnails/6.jpg)
Aesthetic Elements of Design • Type • Color • Line • Shape • Pattern/Texture • Size/Proportion • Value/Tone
![Page 7: Visual Design for Content Management Systems](https://reader034.vdocuments.us/reader034/viewer/2022050720/54c732a94a7959126e8b4658/html5/thumbnails/7.jpg)
Type • Web fonts: Typekit.com, Google Fonts, FontSquirrel.com • Focus on readability in body copy; visual interest in
headers
![Page 8: Visual Design for Content Management Systems](https://reader034.vdocuments.us/reader034/viewer/2022050720/54c732a94a7959126e8b4658/html5/thumbnails/8.jpg)
http://www.thedesigncubicle.com/
![Page 9: Visual Design for Content Management Systems](https://reader034.vdocuments.us/reader034/viewer/2022050720/54c732a94a7959126e8b4658/html5/thumbnails/9.jpg)
http://styletil.es/
![Page 10: Visual Design for Content Management Systems](https://reader034.vdocuments.us/reader034/viewer/2022050720/54c732a94a7959126e8b4658/html5/thumbnails/10.jpg)
http://fourkitchens.com/
![Page 11: Visual Design for Content Management Systems](https://reader034.vdocuments.us/reader034/viewer/2022050720/54c732a94a7959126e8b4658/html5/thumbnails/11.jpg)
http://dribbble.com/
![Page 12: Visual Design for Content Management Systems](https://reader034.vdocuments.us/reader034/viewer/2022050720/54c732a94a7959126e8b4658/html5/thumbnails/12.jpg)
http://thesquaregrid.com/
![Page 13: Visual Design for Content Management Systems](https://reader034.vdocuments.us/reader034/viewer/2022050720/54c732a94a7959126e8b4658/html5/thumbnails/13.jpg)
http://markboultondesign.com/
![Page 14: Visual Design for Content Management Systems](https://reader034.vdocuments.us/reader034/viewer/2022050720/54c732a94a7959126e8b4658/html5/thumbnails/14.jpg)
http://cssgrid.net/
![Page 15: Visual Design for Content Management Systems](https://reader034.vdocuments.us/reader034/viewer/2022050720/54c732a94a7959126e8b4658/html5/thumbnails/15.jpg)
TECHNICAL ELEMENTS OF DESIGN
![Page 16: Visual Design for Content Management Systems](https://reader034.vdocuments.us/reader034/viewer/2022050720/54c732a94a7959126e8b4658/html5/thumbnails/16.jpg)
Technical Elements of Design • Content and Content Types • Page Templates • CSS Grid Systems • Stylesheets • Web Fonts
![Page 17: Visual Design for Content Management Systems](https://reader034.vdocuments.us/reader034/viewer/2022050720/54c732a94a7959126e8b4658/html5/thumbnails/17.jpg)
Know your content types • Start with a few examples of real content:
• Blog posts • Projects • Image Galleries • News Items • Events
• Each will have its own needs for formatting and display
![Page 18: Visual Design for Content Management Systems](https://reader034.vdocuments.us/reader034/viewer/2022050720/54c732a94a7959126e8b4658/html5/thumbnails/18.jpg)
Working with page templates • Average CMS will have 1-3 page templates MAX • Code in template pulls content from database to create
HTML pages • Goal: 1 page template that outputs clean, semantic code • Let CMS handle element positioning • Let stylesheets handle text formats, background images,
etc.
![Page 19: Visual Design for Content Management Systems](https://reader034.vdocuments.us/reader034/viewer/2022050720/54c732a94a7959126e8b4658/html5/thumbnails/19.jpg)
Why use a grid? • Simplify major layout decisions to focus on details • Prevents accidental misalignment of page elements • Faster coding and iteration • Some grid systems are set up for responsive design
patterns: • http://cssgrid.net/ • http://unsemantic.com/ • http://goldengridsystem.com/
![Page 20: Visual Design for Content Management Systems](https://reader034.vdocuments.us/reader034/viewer/2022050720/54c732a94a7959126e8b4658/html5/thumbnails/20.jpg)
Working with Stylesheets • Separate content from presentation • Can add effects like borders, drop shadow, transparency
and round corners with CSS3 • Think global (body type, lists, callouts) to local (page-
specific elements)
![Page 21: Visual Design for Content Management Systems](https://reader034.vdocuments.us/reader034/viewer/2022050720/54c732a94a7959126e8b4658/html5/thumbnails/21.jpg)
Web fonts! • No need to stick with Helvetica and Georgia • Focus on readability for body copy; add visual interest in
branding, site header, etc. • May require special code in page templates or CSS • Resources:
• Typekit.com • Google Fonts • FontSquirrel • League of Movable Type
![Page 22: Visual Design for Content Management Systems](https://reader034.vdocuments.us/reader034/viewer/2022050720/54c732a94a7959126e8b4658/html5/thumbnails/22.jpg)
Additional Resources • A List Apart, Strategic Content Management:
http://www.alistapart.com/articles/strategic-content-management/
• CMS Myth, Responsive Design and Content Management Systems: http://www.cmsmyth.com/2012/03/content-on-all-the-things-responsive-design-and-content-management-systems/
• Smashing Magazine, Designing for Content Management Systems: http://coding.smashingmagazine.com/2010/11/22/designing-for-content-management-systems/
![Page 23: Visual Design for Content Management Systems](https://reader034.vdocuments.us/reader034/viewer/2022050720/54c732a94a7959126e8b4658/html5/thumbnails/23.jpg)
Additional Resources • FontSquirrel.com – free web fonts with @font-face-kit
downloads • Typekit.com – fonts hosted by Typekit (less code) • Google Fonts • LeagueofMovableType.com – free and beautiful fonts • 0to255.com – find hex value of multiple colors • Kuler.adobe.com – find color palette inspiration by
keyword or color • Lorempixel.com – generate placeholder images for design
comps and layouts
![Page 24: Visual Design for Content Management Systems](https://reader034.vdocuments.us/reader034/viewer/2022050720/54c732a94a7959126e8b4658/html5/thumbnails/24.jpg)
QUESTIONS?