24
VISUAL DESIGN For Content Management Systems

Visual Design for Content Management Systems

Embed Size (px)

DESCRIPTION

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

Citation preview

Page 1: Visual Design for Content Management Systems

VISUAL DESIGN For Content Management Systems

Page 2: Visual Design for Content Management Systems

WHAT IS A CMS?

Page 3: Visual Design for Content Management Systems

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

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

AESTHETIC ELEMENTS OF DESIGN

Page 6: Visual Design for Content Management Systems

Aesthetic Elements of Design •  Type • Color •  Line • Shape • Pattern/Texture • Size/Proportion • Value/Tone

Page 7: Visual Design for Content Management Systems

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

http://www.thedesigncubicle.com/

Page 9: Visual Design for Content Management Systems

http://styletil.es/

Page 10: Visual Design for Content Management Systems

http://fourkitchens.com/

Page 11: Visual Design for Content Management Systems

http://dribbble.com/

Page 12: Visual Design for Content Management Systems

http://thesquaregrid.com/

Page 13: Visual Design for Content Management Systems

http://markboultondesign.com/

Page 14: Visual Design for Content Management Systems

http://cssgrid.net/

Page 15: Visual Design for Content Management Systems

TECHNICAL ELEMENTS OF DESIGN

Page 16: Visual Design for Content Management Systems

Technical Elements of Design • Content and Content Types • Page Templates • CSS Grid Systems • Stylesheets • Web Fonts

Page 17: Visual Design for Content Management Systems

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

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

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

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

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

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

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

QUESTIONS?