1. Introduction

Defining terms

2. First considerations

3. Analysing the content

Content maps, components

In consideration of editors

4. Starting Design

Manageable templates

5. Presenting a Demo

6. A note on code

7. Documentation

8. Conclusion

9. Reference
Beth Zonderman - Graphic design for web and print
PROFILERESUMECONTACTSAMPLESWEB PORTFOLIOPRINT PORTFOLIOSURFACE DESIGNILLUSTRATIONGREETING CARDSARTICLES
Designing for Content Management Systems
Beth Zonderman, 2001

1. Introduction
As web technology develops, most websites will employ some form of CMS (Content Management System) in addition to any online applications or transactions. While multi-talented programmers are capable of writing their own systems, reinventing the wheel is usually inefficient; wiser use of resources is to employ experienced second and third parties to provide proven expertise in specific areas. In order to collaborate with these various experts a producer must have an understanding of the whole transformation of a site from raw data through interface design and conversion into a publishing system to final delivery of a site to end visitors. By grasping the process and the roles of all involved producers, interface designers and programmers can create coherent, usable sites that save organisations money in the long term.

In this article, we discuss general design guidelines for CMS websites especially those built using a system provided by a third party. Plenty has been written about the advantages of using a CMS and as many about how to choose one. This article is for experienced web producers and designers who have already chosen a system and are ready to begin design of a website. It is aimed at people in front-end design teams filling the following roles:
  • Website producers: analogous to movie producers, not production team members, they are responsible for overseeing design and delivery of the whole website. They liase with clients, project managers, designers, editors, technicians and suppliers to deliver a finished project.
  • Designers: specifically interface designers and art directors responsible for the visual style of a site and the flow of information or interactivity.
  • Front-end site builders: HTML/DHTML/JavaScript coders as well as art-workers who create and optimise graphics.
Here we'll attempt to ease communication and working practice between various involved parties by highlighting considerations that effect them. Each may be a single person or a team and some individuals may fill more than one of these roles:
  1. The front-end team comprised of producer, designers, and front-end builders.
  2. The site owners and content editors. I will refer to them as 'the client' although they could be another department of the same organisation.
  3. The supplier of the database service or software customisation. Referred to here as the 'back end developers', they may be a commercial service or yet another department within a large organisation. They are responsible for developing and/or customising the publishing system that the client will use. Individuals may be database programmers and architects or for the purpose of defining roles in the development process, I consider engineers of FrontPage / Dreamweaver / etc. sites to be back-end developers.
Example scenarios are: a creative agency designing a client's site that will be maintained using a large custom-built back-end system; a designer within an organisation creating a site for the marketing department to update using an Application Service Provider; or a small organisation building its own site with out-of-the-box software like FrontPage or Dreamweaver. The front-end design team will get the most from this discussion.

Design phases and milestones
The phase discussed here is from initial client brief through visual design up to hand-off to the back end development team. Without going into project management or detailed timelines, we'll cover these stages of planning and design:
  1. Receiving the client brief
  2. Research and analysis
  3. Compiling results of research and analysis into full brief and spec, agreed by front and back end teams
  4. Sign off of full brief and spec by client
  5. Design process by graphic/interface/interactive designers up to sign off by client
  6. (Optional, depending on working agreement with back end) HTML/ DHTML/ JavaScript coding, testing and documentation of typical pages
  7. Hand off to back end team
Goal: self-sufficiency, consistency, simplicity
In designing the site and overseeing production, your goal is for the owners and editors of the site to be as self-sufficient as possible once the system is in place. The client shouldn't need to shell out additional cash for routine updates - that way they can save their budget for hiring you to do the next big project.

Having chosen the CMS route, you know that a professional site, even a professional art or non-profit site, needs a consistent style with flawless navigation and strict quality control. Some editors and designers may feel that an automated system restricts creativity. However, a good design should allow flexibility within a tight framework while separating the roles of design, editorial and technical. Editors are free to be creative in their writing but don't need to influence page layout during routine updates, and the time for interface designers to be creative is before launch or in stages - not in day-to-day running of the site.

A tight, logical framework with built-in flexibility will also ensure that a high level of quality and consistency is easy to maintain. The systems and frameworks should make it simple for editors to do their job well over the life of the site.

Next: Defining terms >

    


    © 2009 Beth Zonderman