This presentation was given to students at Boston University's Center for Digital Imaging Arts in Waltham, MA.
Text of Visual Design for Content Management Systems
1. VISUAL DESIGNFor Content Management Systems
2. WHAT IS A CMS? 3. 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 ? 4. Which CMS to choose? Wordpress Good for basic promotional sites and blogs; can be expanded withcustom code Drupal More flexible & secure than Wordpress, but more complex to get upand running Good for sites that require distinct sections of content that havedifferent display requirements Expression Engine More flexible than both Wordpress and Drupal, but requiresextensive customization Not open source; requires a license fee 5. AESTHETIC ELEMENTSOF DESIGN 6. Aesthetic Elements of Design Type Color Line Shape Pattern/Texture Size/Proportion Value/Tone 7. Type Web fonts: Typekit.com, Google Fonts, FontSquirrel.com Focus on readability in body copy; visual interest in headers 8. http://www.thedesigncubicle.com/ 9. http://styletil.es/ 10. http://fourkitchens.com/ 11. http://dribbble.com/ 12. http://thesquaregrid.com/ 13. http://markboultondesign.com/ 14. http://cssgrid.net/ 15. TECHNICAL ELEMENTSOF DESIGN 16. Technical Elements of Design Content and Content Types Page Templates CSS Grid Systems Stylesheets Web Fonts 17. 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 18. 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. 19. 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/ 20. 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) 21. 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 22. 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/ 23. 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 24. QUESTIONS?