samecontent design

What was once just another Michigan State University boilerplate site, after picking through its and adding some PHP, CSS, jQuery, a little Flash, and some vector Graphics, became a site that supported a main rotating banner, a social media sidebar displaying tweets and buttons alike, streaming images from our Flickr account, and several other graphical tweaks to modernize the site’s once static appearance.

the_buttons
One simple yet highly effective change (that did not involve going into the site’s code) was standardizing the style and color of the vector graphics across site, making them modern and bold. Once I did get into the site’s design, I added some CSS hover over effects to those graphics to make them dynamic as users move across the site.

main_nav, page_content
What was once an static block of links with a sub navigation only visible after loading page clicked,  now drops down on hover or, if accessed by a touch screen interface, on tap. Featured page content were previously just images shown as a list that descended down a page, but now visitors could click through a compact JavaScript gallery in a less obtrusive manner.

Along with the twitter display, another dynamic part of the site was the Flickr-populated JavaScript plugin. It retrieved a specially curated set of images from our account through Flickr’s API, which I monitored daily as a special analytic. We could use it to test the effectiveness of posting content on site versus linking to images directly on social media networks. It replaced a list of images only accessible by directly manipulating code, meaning inexperienced staff had to manually upload files (most of them .tiffs!) and link them to a corresponding thumbnails. Dangerous territory for the uninitiated.

Implementing these kinds of changes, making additions that highlighted our Web presence and designing the HTML email templates, were both fantastic opportunities to see how far I could go augmenting an existing framework. This included learning in a short frame of time all I could about Dreamweaver templates and how they function in terms of Web Development.