Designing the CMS Skin in the PSD.

The design is the most important step in the process as it sets the tone for the rest of the Skin creation process.  It is very important for the designer to think of how the skin might be implemented in the site.  This does not include knowing HTML/CSS, but it does require the designer to think of things like

1. How will this look with very long content?
2. How will this look with very short content?
3. How much primary navigation will fit?
4. How much secondary navigation will fit?
5. Does the CMS actually have a feature I am including in the PSD?
6. Does the images I am working with come in the stock content?

The designer must think of all these things so the final product looks as close to the original design as possible.  Number 5 is by far the most important question as we try not to change anything other than background and text colors on existing widgets between skins.  This is done for testing reasons as any change to HTML would need to be tested across all skins if each skin had a vastly different CSS re-skin of the widget.

It is also important that the images included in the original PSD are images provided in the stock content.  This is so there is very little extra work for the Project Manager when they are setting up a new client with this skin.

In order to allow the designer to see what is available and play with the system a designer development site has been setup at designer.twintiersweb.com, username: admin and password: test123.

Developer PSD

First, there must be two PSDs provided, one for the Home Page and one for the Inside Page.  The PSD for the Inside page MUST show secondary navigation with selected state on both the primary and secondary navigation link.  The PSDs that are provided to the developer must NOT be flattened at all.  It is important for the developer to be able to show and hide layers and slice out the assets they require when creating the HTML and CSS.

The PSD must also include a Placeholder layer.  This is a layer that will overlay on the skin and tell the developer where placeholders will go.

What is a placeholder?  A placeholder can be edited by the client in the site editor.  They can put text, images or a widget in a placeholder.  There is a special type of placeholder called the Main Content.  This is where the page content will go and will change from page to page while the Placeholders in the Inside Page and Home Page designs will remain the same between pages.  NOTE: It is possible to put a page placeholder in the designs, so if this is what is desired in the design, be sure to leave special instructions in the Placeholder layer.

Below is a screen shot of what the placeholder layer should look like.

Notice the group on the right side, if I turn it off, it looks like the following

It is the designers responsibility to point out what is to be static content, and what can be editable.  Each item that is marked as a placeholder must be reproducible in the system.  The designer must be able to log into their designer site and setup the content they have displayed for each placeholder.  If they cannot, then they need to adjust the design or discuss the implementation of a new feature with the development department.  Each call to action placeholder must follow a standard sizing guideline so the placeholder will fit images from the stock content.  Please see the wiki page on call to action sizes for a complete guideline on sizing.

Themes

Themes are simple color and image changes to the skin that change the look and feel they do not change the flow or layout of anything in the skin.

Along with the skin the designer must provide a screen shot of the skin in each theme along with any background image or banners for the theme, as well as Hex codes for the colors.

Other Assets

Along with a properly formatted PSD the designer must provide a thumbnail view of  each theme that is 280px by 280px.  They must also provide a full preview of each theme of the theme that is at least 1000px by 1000px.