The WSU Identity Program has been revised to better communicate WSU’s evolved brand platform, expanded messaging, and focus on WSU’s impact. These revisions are outlined in the Brand Identity Standards currently available in PDF format at http://identity.wsu.edu/brandrefresh.
The WSU Web template is being revised to reflect these new standards, particularly those 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 template revision goals are:
- Feature a more significant presence of crimson with a consistent presence of gray.
- Present a cleaner and more uncluttered design with lots of white space and fewer words and graphic elements.
- Implement the new color palette.
- Implement the new graphic elements.
Revisions include:
- Adding a prominent crimson bar across the top of each page.
- Standardizing the primary navigation link colors crimson and gray. Featured links and the page displayed link are always crimson. All other primary navigation links are gray.
- Standardizing the primary navigation background to white to provide a cleaner and lighter design.
- Standardizing the page background color to white with a subtle gray gradation at the top.
- Standardizing the optional toolbar background color to a gray (or grays?).
- Removing or minimizing page and content zone borders and dividers to provide a more open, airy design with increased white space.
- Increasing the page width by 200 pixels to again provide more breathing room and white space.
- Changing the body text to Lucida Sans. The font has a less condensed look and coordinates with the head font.
- Revising colors throughout to the new color palette, including in the site id zone.
- Creating sidebar background designs utilizing the new optional graphic elements and making them available for use in site designs via selection in the Template Designer online tool—similar to how site id graphics are now selected.
- Creating Photoshop starter files for photos and images utilizing the new optional graphic elements.
The new template design and Template Designer should be ready early summer. We welcome your feedback on the following design mockups of a sample home page and two secondary pages. You can comment directly on this page or email our template team at templates@lists.wsu.edu.
Web template mockups
Will marcomm push this color scheme to all WSU pages, e.g. our department? I vote ‘yes’. The more marcomm enforces the presentation, the more the departments have to focus on content, instead of fiddling with colors.
Re sidebars. Yes, keep these, but make the content div expand if the sidebar is not used. In 2006 templates, room is reserved for sidebar whether it is there or not. Sometimes we want a >400px main content when the page has lots of prose.
give us a valid handheld stylesheet. trust me. Every kid (or prospect) uses a cell phone every waking minute. The wider divs are okay but allow it to scale down for applicants still using 15″ crts.
Surely you use percentages right, not pixels?
Please allow departments to select catalog and schedule information automagically, preferably a web service. It is required content, but must be entered as static text because there is no other way to get it.
My initial, gut-reaction to the mock-ups was that it looks absolutely awful. Perhaps rounding out the corners on the header would look better, though as the mockups are purely images, I can’t play with the CSS to try to examine this myself.
On further inspection, it’s not terrible. I suspect that the harshness of the edges in the header is upsetting on a visceral level. I do particularly appreciate the wider content area. I am unclear why we have the rounded corners on the bottom, but not the one on the top, and the ‘reflection’ effect at the bottom of the footer feels a little strange. This could potentially by mitigated by moving the reflection a few pixels down, to appear as a more natural reflection.
I like the design and layout of the site, except for the completely out of place reflection at the bottom of the site. Overall it’s very uncluttered, clean, and contemporary – I have no complaints other than the footer looking like an afterthought (and some of the shadow lines giving the page a wierd, bulging appearance)
But I do *not* like the fact every single site is going to look exactly the same, with almost no ability to customize the colors or presentation of the site.
I really appreciate being able to give websites their own style, within the guidelines of the system. As I view webpages across campus I am presented with a dynamic, engaging experience, within an extremely consistent presentation that never leaves me wondering where I am.
I may be alone in this, but I would really like to see the existing web template designer modified to support this new presentation, while preserving the ability for custom appearance.
We are standardizing some aspects of the template to better reflect the brandfresh and to have more consistency/continuity when browsing from site to site. But, still allowing for personal customization within the siteid, and content areas such as, the main, sec, etc.
The NEW template designer will still allow you to choose colors, graphics, layouts, etc. for customization.
I agree, I think the new mock ups look absolutely awfully GOOD! I finally think WSU is headed down the right direction. 1024 x 768 has been the web standard for several years now when designing a page. I think the clean look of the new site will allow for lighter CSS and imagery. This in turn should make it easier to maintain increase load times for off campus users. I think limiting the design features will help identify the page as being part of WSU.
I agree with Jeff that the rounded bottom does not flow very well with the top. I am in favor of removing the reflection. This element seems a little out of place. I do have some concerns about what freedom will be given to add distinguishable features to the sites to identify individual departments.
I look forward to having further discussions with everyone about the new templates. This is another great opportunity to help shape the future of WSU web presence.
OK, here’s my problem. Many of us have invested a lot of time and effort (and money) in upgrading old sites and making new ones to comply with the last round of templates. A task made even hard for people that have jobs that don’t really include web design and programming and have to squeeze it in on the side. Now you’re telling us to scrap all that and start over?!? I know that some people have gotten a little too creative even within the guidelines, but now marketing is adding more constraints. I’m all for a “Uniform” appearance, but this is even more of a cookie cutter approach than before. Now everything will look Exactly the same. And the idea of “more uncluttered design with lots of white space and fewer words and graphic elements” just isn’t practical for all sites. Really, the only improvement is see is the wider page.
My sites (approx 75 of them) are all generated dynamically, so my overhead in updating the template they use is pretty minimal, but I am guessing that am in the minority here – I can’t imagine how frustrated I would be if I was facing a task of updating hundreds, or thousands of flat files to use a new template only a short while after implementing the last one.
The wider page is nice, even nicer would be a liquid layout – but this is a step in the right direction. Jason, you state that we will still be able to change colors, yet as per John’s post the buzzword was “standardized” and used mostly in conjunction with the color “white”. There didn’t seem to be any room for customization according to what I read.
Navigation background: White
Navigation links: Crimson & Grey
Toolbar: grey
Featured links: white background
Page Background: white with a slight grey-dient.
Did I misread something?
Will the new CSS be a drop-in replacement for the current CSS, or are we looking at rewriting our structure?
Just trying to get an idea of how much time to budget for the changes.
Our strategy for transitioning into the new templates is to make the CSS in the new template inherit the current CSS. We are trying to make this transition as easiest and painless as possible.
Just to clarify, once the CSS is changed from the old design to the new one, will all of my pages have width changes? Like many sites on campus, my site id, toolbar, content and secondary divs have backgrounds that fit the current widths. If the CSS widths change, how will this affect what I’ve already designed? Will I have to redo all of my designs?
Thanks,
Joe Sartori
jsartori@wsu.edu
http://libarts.wsu.edu/music
The way I believe this will work is something like this. The old CSS file will stay exactly as it is for some set time. (I have no idea on the time table.) There will be a new CSS file that everyone links to. So instead of this: href=’http://designer.wsu.edu/template/css.aspx?key=11f14af0axx081′ I would need to change that to something like: href=’http://designer.wsu.edu/template/cssv2.aspx?key=11f14af1′. The only real difference is that my key may be shorter and I now link to cssV2.aspx instead of css.aspx.
Of course any custom images or CSS overrides that I had created in the previous version may require some changes; I will also need to go through the next version of the Template Designer and make some new design decisions.
I hope this provides a little clarity on how this can and should be done. I know we are looking for as little impact as possible.
The designs look nice. The wider width is good.
A big question, however…
Why is there not a search box in the upper right hand corner of all pages? The user shouldn’t have to click on WSU Search to search for a topic.
I realize that the WSU Search enables much more fine grained searching…but if I am wanting to navigate the wsu.edu site then there is a usability issue when I have to drill down into a sub page to find a search prompt.
I will try to consolidate some of the questions raised in the comments and answer them in a FAQ on this site soon.
Regarding the lack of a WSU Search field in the global links…
when we proposed this a long time ago, we received feedback that it would be confusing to users. Many WSU sites offer their own search functions that just search their site. It was feared that users would expect the search at the top of the page to be searching the local WSU site rather than all WSU sites. Users may also not even use the local search if the global search were too prominent, yet the local search would have been more helpful.
I am interested in hearing from those who provide a local site search. Do you think a global WSU search field at the top of all WSU Web pages will help or confuse your audience?
I prefer a local search field, but I’d like to have a standardized place to put it. For example, on http://edacenter.wsu.edu/, I put it in the toolbar and it works very well there, but other departments have it in different places.
My other comment is that I would _really_ like to see a version of the WSU Identity for RSOs to use. They are part of the school too and should be able to identify themselves as such. A slightly different header that made the “Student Organization” distinction clear should do it.
You mean RSOs cannot use the WSU identity? That’s backwards. RSOs should be congratulated for using the templates.
The guidelines for who can use the templates are at http://identity.wsu.edu/web/guidelines/who.aspx. These guidelines have changed little since the introduction of the first WSU Web templates in 2000. The templates help communicate to WSU audiences that the content within a WSU page is official WSU content, under the control of WSU, and represents the voice of WSU. The templates help establish a trust relationship whereby visitors can trust the content is WSU’s and WSU will stand by it. Although RSOs are affiliated with WSU, their sites represent their own voice and are not under the control of WSU or its regents and must not be represented as such. RSOs are encouraged to show their WSU affiliation on their sites through the use of the WSU Cougar head spirit mark.
Prior to this current template revision project, we were planning on a modified version of the WSU template specifically for RSOs that removed the WSU logo, global WSU links and global footer. And then added the Cougar head logo along with a clear “Registered Student Organization” indicator very much as Ben Ford suggested. Once the revised templates are ready for use, we can get back on this.
What’s the thinking behind having the main content’s drop shadow not extend all the way to the top? Why wouldn’t it be on the crimson as well? I’m having trouble comprehending how this would be laid out physically.
Also, I’m in agreement about the search bar. It would be simple to clearly describe the search bar as a global search (for example, having “WSU Search” be automatically inserted into the search field before the user clicks on it). Especially for decreasing the bounce rate.
I hope this question hasn’t already been asked, but is there an expected date for the new templates to become available?
Thanks,
Joe Sartori
jsartori@wsu.edu
http://libarts.wsu.edu/music
I like the very clean look.
I agree with the comments about getting rid of the small “reflection” of the rounded corners at the bottom. It goes nowhere, yet suggests there’s another page of content below that I somehow can’t scroll to. If you used the rounded corners at the top and ran the straight edges off the bottom, I recognize that’s not the way you’re using rounded corners in print pieces but it might flow better in the web context.
ESSENTIAL to have a format that plays well on handheld devices.
I’m one of those who is not well served by the wider page, as I have to scroll to see the right-hand edge of the sidebar, and the blank space left of the nav bar feels odd just hanging there with no reason for being.
I’m still confused by the post from Dain White & Jason Bittle’s response concerning the ability to choose colors so one program’s page look different from the next program’s pages.
What elements of the template will be THE SAME for every page on every site, and what elements will be customizable?
I agree that the color choice option has created the ability to create some ugly pages. But programs need to be distinguishable from each other, and their pages need to appeal to their target audiences.
Will this necessary differentiation all be done through spot graphics? That increases the design demands on programs that may not have that ability on staff.
barb
I think the rounded edge of the WSU logo is attractive and would be sorry to see that aspect of the template changed. This may have already been addressed but there is a small break (about 10 pixels) at the upper left and right of the crimson header at the edges of the logo and site ID area.
Responding to John Vleck’s request for input on local searches: We do get feedback that users are confused by the 2 search boxes. It would be helpful to use to have the Top search box say “search WSU”; our search engines say:”search vetmed”. http://www.vetmed.wsu.edu/
We started with our local search engine at the right of the toolbar but when we used a site region image such as http://www.vetmed.wsu.edu/depts-vth/ the image was sandwitched between the 2 search text boxes so we move ours to the left of the tool bar.