Visual Design intended for CMS

Web designs for CMS can be a challenge at times, as the approach has to be taken in a different manner than it would be if the site were only static content. Many times we get excited about the most innovative and creative designs, however, these designs do not always accommodate the CMS framework and structure the developer is dealing with. As you begin your approach to designing for a CMS, the designer must first take into account that this site is not static. We must consider that the content, navigation, and images will grow at an infinite amount and the design must accommodate any future modifications. Specific elements such as background images and columns cannot break if this happens the design ultimately fails.

Here are recognizable issues when designing for a CMS:

Any designs, layouts, or elements that are designed as if the site was going to print are bad way to begin. 

Some examples are:

• Elements that are meant to only accommodate a fix width or height. Fixed areas on a site, such as a fixed width or fixed height should be heavily scoped by the designer to make sure these elements never change, as a CMS is an application meant to load data and content. Usually, most elements and information change or are dynamically driven. The approach should be that the design take into consideration and is adaptable to content loading.
• Gradients that go through an entire element whether vertical or horizontal should always consider expansion. Also, radial gradients should be utilized with extra caution, as this can be quite tricky or hard to achieve in an expanding elements. We love the gradient look as it adds an outstanding visual design, however the elements that use these must be heavily identified and defined.
• Evaluate and scope the usage of shadows, gradients and transparencies. Moderate the use of these and evaluate the length of them as well. Think about content elements that grow. If these elements expand or contract, we must take note that the shadow, gradient, or transparency must do the same. We should consider if these effects have a place of cutoff; I.E. will the shadow end at some place? Does the gradient flow into a solid color at some point? These are areas that should be carefully thought threw.

Headers, navigation, and any copy or text that are images.
When designing for these elements you must always consider that these can change at anytime. If using graphics for any of these, you must recognize that it may be difficult or not possible to change these in the future.

Design for future needs and minimize efforts to have to create new styles in the future.
An example of this may be where as a header is created and a client needs a new one using that style, however the header was specific to the existing content. The header style didn’t consider wrapping or long text and distorts because of this. Create designs for most elements and even scope out and design for elements a client may wish to add in the future. By doing this, you help to keep a consistent look and feel and keep your visual design clean, even as future elements or modifications are added.

Text-wrapping elements
What happens if the header is too long for the background element? The design should always consider this as the client may wish to change this element text. Be cautious on how you use fixed widths and make sure that text can wrap in those elements accordingly. As overview, just remember it is important as a designer to understand the CMS and how it works, and map out a fully thought-out design strategy and attack plan. The designer must think to create a stable design first, and innovative and creative second or else you may face a challenging situation in trying to fix what has been created. Solve tomorrow's problems with today's design!