Your SlideShare is downloading. ×
0
VISUAL DESIGNFor Content Management Systems
WHAT IS A CMS?
What is a CMS?•  Database-driven framework for creating dynamic websites•  Allows clients to edit their own content•  Save...
Which CMS to choose?•  Wordpress   •  Good for basic promotional sites and blogs; can be expanded with      custom code•  ...
AESTHETIC ELEMENTSOF DESIGN
Aesthetic Elements of Design•  Type•  Color•  Line•  Shape•  Pattern/Texture•  Size/Proportion•  Value/Tone
Type•  Web fonts: Typekit.com, Google Fonts, FontSquirrel.com•  Focus on readability in body copy; visual interest in head...
http://www.thedesigncubicle.com/
http://styletil.es/
http://fourkitchens.com/
http://dribbble.com/
http://thesquaregrid.com/
http://markboultondesign.com/
http://cssgrid.net/
TECHNICAL ELEMENTSOF DESIGN
Technical Elements of Design•  Content and Content Types•  Page Templates•  CSS Grid Systems•  Stylesheets•  Web Fonts
Know your content types•  Start with a few examples of real content:   •  Blog posts   •  Projects   •  Image Galleries   ...
Working with page templates•  Average CMS will have 1-3 page templates MAX•  Code in template pulls content from database ...
Why use a grid?•  Simplify major layout decisions to focus on details•  Prevents accidental misalignment of page elements•...
Working with Stylesheets•  Separate content from presentation•  Can add effects like borders, drop shadow, transparency   ...
Web fonts!•  No need to stick with Helvetica and Georgia•  Focus on readability for body copy; add visual interest in   br...
Additional Resources•  A List Apart, Strategic Content Management:   http://www.alistapart.com/articles/strategic-content-...
Additional Resources•  FontSquirrel.com – free web fonts with @font-face-kit   downloads•  Typekit.com – fonts hosted by T...
QUESTIONS?
Upcoming SlideShare
Loading in...5
×

Visual Design for Content Management Systems

473

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
473
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "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?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×