1.
VISUAL DESIGN
For 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 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.
AESTHETIC ELEMENTS
OF 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 ELEMENTS
OF 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?