Visual Design for Content Management Systems

559
-1

Published on

This presentation was given to students at Boston University's Center for Digital Imaging Arts in Waltham, MA.

Published in: Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
559
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Visual Design for Content Management Systems

  1. 1. VISUAL DESIGNFor Content Management Systems
  2. 2. WHAT IS A CMS?
  3. 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. 4. 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
  5. 5. AESTHETIC ELEMENTSOF DESIGN
  6. 6. Aesthetic Elements of Design•  Type•  Color•  Line•  Shape•  Pattern/Texture•  Size/Proportion•  Value/Tone
  7. 7. Type•  Web fonts: Typekit.com, Google Fonts, FontSquirrel.com•  Focus on readability in body copy; visual interest in headers
  8. 8. http://www.thedesigncubicle.com/
  9. 9. http://styletil.es/
  10. 10. http://fourkitchens.com/
  11. 11. http://dribbble.com/
  12. 12. http://thesquaregrid.com/
  13. 13. http://markboultondesign.com/
  14. 14. http://cssgrid.net/
  15. 15. TECHNICAL ELEMENTSOF DESIGN
  16. 16. Technical Elements of Design•  Content and Content Types•  Page Templates•  CSS Grid Systems•  Stylesheets•  Web Fonts
  17. 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. 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. 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. 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. 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. 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. 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. 24. QUESTIONS?

×