Web - Graphic Identity Program - Washington State University

Designing the primary resource for information about WSU

Because the Web is where most go to learn about Washington State University, the design and content goal is to:

Present the University’s identity clearly, consistently, and with distinction.
Provide a consistent user interface to facilitate navigation across all University sites.

The templates are foundations for customized content that expresses each unit’s qualities. Utilizing the required elements and specifications to create a consistent identity and user interface, talented designers and writers can make each page a facet of the University’s unique brand and personality.

Carefully review the Web guidelines before beginning your site. Official WSU Web pages must closely adhere to these guidelines.

Using the WSU Web templates

1. Download

Download the required core HTML files that will be the basis for your page template. Download the optional template files if they will be helpful with your site development.

2. Design

Use the Template designer online tool to design your page look and generate your design key. Follow the steps to make design decisions for your page.

3. Apply

Follow these steps to apply your design to your site pages:

Copy your design key from the Template Designer. The key describes attributes of your page design, and is automatically created by the Template Designer from your design selections.
Paste the design key into the HTML code of the core HTML file you downloaded in step one.
Customize your template design (optional).

Use Dreamweaver or other Web development tool to set up your own CSS style for each template component in the central CSS styles you wish to override. (If using Dreamweaver, version 8 is recommended. Previous versions will not display the layout in WYSIWYG mode from the central CSS, but requires browser previewing.)
Create and insert your own graphics, if desired: e.g., for the site ID region, navigation region, or content region.
Any customizations must adhere to the WSU Web identity guidelines.

Use Dreamweaver or other Web development tool to set up editable template regions and non-editable regions in your core HTML file to support management of your template components.
Type or paste in any content that you want pages across your site to have in common: e.g., site ID, navigation, and footer content.
Duplicate the resulting template file for each new Web page that will use the same page design.
Type or paste additional content into each page’s content regions. Your content will assume the specifications of the WSU template and your design selections.

Revising your design

Follow these steps if you wish to revise a design currently in use:

Copy the design key from your Web page HTML code.
Paste the design key into the box “Paste existing key here,” located in the sidebar area of the Template Designer. The default page design displayed in the Template Designer will change to reflect your current design.
Select new design choices in the Template Designer for the components you wish to revise. The design key is automatically updated after each new selection.
Copy your new design key from the Template Designer.
Paste the design key into the HTML code of each of your Web pages. Utilize the “search and replace” feature in your Web development tool to facilitate this process. Your pages will now reflect your revised design.

Template design revisions coming. Mockups available for review.

The Web template is being revised to reflect the new WSU Identity Program standards currently available in PDF format. The template changes particularly address those standards outlined in the “Visual Approach” section (PDF) and the “WSU Communications Personality” items listed on page A-4 of the “Brand Platform” section (PDF).

The new template design and Template Designer should be ready early summer 2008. Your feedback is welcome on the following design mockups of a sample home page and two secondary pages. You can comment on the template blog or email our template team at templates@lists.wsu.edu.