VISUAL DESIGN For 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 • Saves time on site edits and updates post-launch • Many options available:

•  Wordpress •  Drupal •  Expression Engine •  Joomla •  …?

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

AESTHETIC ELEMENTS OF 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

headers

http://www.thedesigncubicle.com/

http://styletil.es/

http://fourkitchens.com/

http://dribbble.com/

http://thesquaregrid.com/

http://markboultondesign.com/

http://cssgrid.net/

TECHNICAL ELEMENTS OF 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 •  News Items •  Events

• Each will have its own needs for formatting and display

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.

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/

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)

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

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/

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

QUESTIONS?