New CVM Designs
Posted on March 8th, 2010
You may have noticed I've been MIA for some time with development of simonwille.ms unfortunately grinding to halt. For those that haven't heard the news, I recently switched employers. I wasn't exactly planning on leaving my previous job, but the offer I recieved from the highly ranked and prestigious Texas A&M College of Veterinary Medicine & Biomedical Sciences was simply too good to pass up. Of course with a new job comes new responsibilites and man do I have a unique set of challenges ahead of me. My time has been a little more stretched than usual, but now you can see what I've been up to.
One decade, one website...
The current CVM website is, to be blunt, freakin' old. It's optimized for a tiny viewport, has amorphous and unwieldy navigation (some pages even sport four levels of navigation!), and simply looks outdated. On top of that, the entire website is not housed in any kind of Content Management System which makes updates by non-technically inclined staff basically impossible. Luckily I have a coworker, Tim St. Martin, who also left the same previous employer ready and willing to aid. Together, we are up to the task and ready to dish out some accessible, standards-based web design.
Enough talk, show me the good stuff
Blah, blah, blah, quit the sales pitch and show the goods already. Fine. I then hereby present to you the first colloborative design we worked on:
CVM 01
CMV Redesign 01: Click to view larger image.
Our main focus on this design was to "unbox" the content and allow a more spacious and open viewport. We wanted simple, clean graphics for a professional look that was representative of the College's extensive history and legacy. An emphasis was placed on contrast and clarity without creating a feeling of overexposure. To see an example of how we reorganized the navigation to a contextual audience-based categorization, see below:
CMV 01 Nav: Click to view animation. Mouse over "College" to see a dynamic drop-out menu. Please note this is a flash mockup merely meant to illustrate the effect. The actual navigation will be clean, semantic HTML decked out with a javascript transitional library. The example links in the contextual fly-out are also subject to change. Just focus on the animation.
CVM 02
CMV Redesign 02: Click to view larger image.
This was another early take that added in some minor textures for a different effect. You'll notice we reused the wrap-around A&M logo on the right as it added a nice layering to the banner to imply depth to the design. We also reused the expanded footer as we are both a fan of the trend. Extended footers increase page stickiness, improve SEO, and provide a "fallback" navigation for those who are looking for a more organizational-based structure rather than an audience-based one.
CVM 03
CMV Redesign 03: Click to view larger image.
The next design was an evolution of the previous with a twist. The main idea being to split the home and interior pages into different layouts. The reasoning behind this shift was to make the home page entirely presentational with a simplified visual heirarchy to get visitors to their destinations as effectively as possible. The home page image slideshow was widened to allow photgraphy to be the centerpiece for emotive delivery (luckily we have a phenomenal photgrapher, Larry Wadsworth, at our disposal). One of the challenges of this design was to prevent the user from feeling that the rug was pulled out from under them when encountering a modified navigation on interior pages. To combat this problem, icons were added to all major links as a quick recognition device to keep visitors immersed.
CMV Redesign 03 Interior: Click to view larger image.
CMV 01 Nav: Click to view animation. Mouse over "College" to see a dynamic drop-out menu. Please note this is a flash mockup merely meant to illustrate the effect. The actual navigation will be clean, semantic HTML decked out with a javascript transitional library. The example links in the contextual fly-out are also subject to change. Just focus on the animation.
CVM 04
CMV Redesign 04: Click to view larger image.
This final design was probably the most progressive treatment of the content. By floating all presentational and navigational elements such as the banner and footer into unconstrained spaces, we put the entire focus of the site into the page content itself. This design also featured the most dramatic navigational effect as seen below:
CMV 01 Nav: Click to view animation. Mouse over "College" to see a dynamic drop-out menu. Please note this is a flash mockup merely meant to illustrate the effect. The actual navigation will be clean, semantic HTML decked out with a javascript transitional library. The example links in the contextual fly-out are also subject to change. Just focus on the animation.
Going Forward
Tim, myself, and our fantastic boss, Justin Flynn, have already demoed these designs for the dean and her closest staff. Our meeting with Dean Green was very positive and I think everyone involved so far has been very excited about the future of the site. It's been personally invigorating for me to be a part of something that has so much energy and buzz around it. The final design will be based around CVM 01 with some moderately substantial tweaks. The next step is to get the CMS up and off the ground which is never an easy undertaking. I'll be hitting the XSLT and XPath pretty hard these next couple weeks to make sure we're serving up dynamic content correctly. The new design won't mean much if we don't have a good, solid engine running in the backend.
I hope you enjoyed this early sneak peak at the new things to come for the CVM website. I hope you are as thrilled as I am to see it come to life. Stay tuned as the story develops. Hopefully, it won't be too much longer before we can roll the whole thing out. There's only a few pixels, a boatland code, and a scant 2,193 pages to deal with in the meantime...
-Your Ready And Able Web Developer, Simon Willems
1Modal window functionality is brought to you by the fantastic shadowbox script written by Michael J. I. Jackson.
Participate!
Want to leave a comment? Well, too bad! Actually if you head on over to Twitter and include penguinsroost (no hash necessary) in your message, you can participate in the discussion over at the penguin's roost.