Category Archives: examples

Banner Images and Content Creation

Pam Fogg has created a selection of background images to be used on department homepages, these images are available at – \\middfiles\orgs\WebMakeover\EVERYONE\Banner_Images

Please make your selection, then contact her with your choice of image via email ( pfogg@middlebury.edu ) so that your banner can be created.

There have been some questions around content, Creating Content for Your Web Page is the portion of the workbook that addresses content creation.  Also, please remember to use the Content Guide when making choices about where to place content on your page.

Work continues on the buildout of the new Middlebury.edu site, and we hope to see many of you at the worksessions over the next few weeks.

https://sites.middlebury.edu/webredo/2009/11/24/workshops-and-work-sessions-through-december-22nd/

Below is a list of examples of work that people have already put into their sites:

Homepages

http://midd2.middlebury.edu/academics/chem
http://midd2.middlebury.edu/academics/geol

Carousels

http://midd2.middlebury.edu/academics/resources_students/visual
http://midd2.middlebury.edu/academics/resources_students/ctlr

Image Galleries

http://midd2.middlebury.edu/academics/physics/facilities/obs (click on
the small image in the right sidebar)

Content Guide, Check-in Reminder, Usability

A PRESENT FROM WHITE WHALE

During the WorkSessions, we have heard questions like “What should go in a sidebar?” and “Is this something that should go in the Carousel?” To help us answer these questions, White Whale has provided us with a content guide, and they have turned it into a VISUAL.  Attached is a content guide that will help you answer some of these questions, and make choices as to the types of content that can be displayed in different locations on the page, and will help us, as a community, to create a consistent look-and-feel throughout the site.

Thank you Janie and Tonya for putting this together!

CHECK-IN REMINDER

Thank you to everyone who has already filled out the check-in form. We have heard from some but not everyone, so this is a reminder to fill out the form so that we can make an informed decision before Thanksgiving break.

https://sites.middlebury.edu/webredo/your-ideas/web-makeover-check-in/

WHAT WILL YOUR VISITOR”S DO?

December 15th is right around the corner.  Between this date and the launch, we will be looking at the site to see if we have made an intuitive, useful resource for our community.  We have already heard questions like “Where is the link to WebMail?” and “How do I find Faculty Office hours?”  What we would like to hear from you is how people use YOUR site.  What information do they need to find?  How will it be used?

We have created another simple form, where you would chose the constituent (or add one) and write a task that a visitor would need to complete.  We’ll gather these and incorporate them into the user testing.

http://spreadsheets.google.com/viewform?hl=en&formkey=dEZ5Nk8wbEZrYWt3T0xUaUdqQzF0MlE6MA

Designs for Academic Departments and Faculty Profiles

Per Mike’s last post on the “glass wall” phase of feedback, we are offering links to design mock-ups for three academic departments and a faculty profile. A few notes on these:

These designs are not supposed to mirror actual content or the specific links and menu items that a department might use. White Whale did model it using real content, but making the specific content and menu decisions will be up to each department. Instead, the designs represent a range of options that a department/program might choose from, including different color palettes and navigational tools. Even the three departments used as samples might choose completely different options. And these are just flat images, not actively linking sites.

The three departments represent a range of possible design set-ups. The Chemistry site is the most bare-bones in terms of interactive tools – see the bottom of the page for an area called “the carousel,” a horizontally-scrolling content area that can be updated regularly with upcoming events, announcements, stories or links. The Economics page adds a top navigation nicknamed “the juice bar,” with tabs for updating content. The Film & Media Culture page uses both the top and bottom interactive navigation, and highlights how you might embed video into the pages. There are also various other boxes that can be used in all the designs for highlighting announcements, events, deadlines, or any other updates.

The faculty profile page (thanks to Nick Muller for being the prototype!) shows how faculty might display information. We’ll be adding areas for Recent Accomplishments (publications, awards, grants, etc.) and the ability to embed a feed from another site (like a faculty blog). We will also be basing a staff profile based on this template.

Please look these over and leave comments below – again, we’re not looking for “I love/hate it!” style comments, as much as hoping you might pose useful questions about what might be left out, what functionality you might want that’s not clearly here, etc. Every department and faculty/staff member will have some control on how their sites appear, but it will be based on the options here, so hopefully this will be useful as you work forward in adding content into Drupal and helping to build the site in the coming months!

Unveiled homepage mockups for middlebury.edu

White Whale has shared with us mockup pages of the first round home page design, a small number of examples are displayed here.  Within this explanation, there are many links that demonstrate how this design can be used, and we invite you to explore them all and offer feedback.  Please feel free to share your comments here, on the blog.

From White Whale

Our first round Middlebury home page design is based around a content presentation model that we’ve been calling an “equalizer” or “waveform” for its resemblance to the visual output of an oscilloscope, audio equalizer or seismograph.

Each of these vertical bars contains a Middlebury “story” — which might be a photo, a link to a blog, a short video or audio clip, or a teaser for a longer story inside the Middlebury Web site. These stories will come from the entire Middleverse — of course throughout Middlebury College, but also from Bread Loaf, the language schools and schools abroad, the Monterey Institute, and any other places where Middlebury’s story is being told. Some of the bars will contain campus photographs or inline photo slideshows.

When a user moves his or her mouse over the waveform, they’ll see titles above each vertical bar corresponding to the story the bar contains. When a bar is clicked, it will open horizontally to show the story; the user can either go from there into the site to read the story, or can close the bar and continue browsing stories in the waveform. The user can also scroll the waveform from left to right, up to the number of available stories. In this way, the new homepage can accommodate any number of stories comfortably.

Open stories will have permalinks; in other words, it’ll be easy to link directly to one of the stories in the waveform. So if there’s a feature story about you on the Middlebury homepage, you’ll be able to send your parents a link to the homepage with your box already open.

The color palette for the waveform will be chosen by Middlebury’s designers on an ongoing basis to correspond to the seasonal colors of Vermont. The palette might change four times a year, with the seasons; or Middlebury may choose to adjust the palette more frequently. Colors used in the homepage waveform will continue through the palette used throughout the rest of the site. The palette (and the shape of the waveform itself) can also be customized for special occasions or particular content needs (see below).

Although this waveform content presentation model will appear on the Middlebury home page only, we will produce a “widget” version of the same feature that can be used throughout the site to present feature content in any number of contexts.

There is an easter-egg style reveal of an aerial photograph of Middlebury’s campus, displayed after clicking “Quick Links” or “Directions & Contact Information” in the footer. See below for those links.

These are mockup images only, not functioning Web pages; the live version will be styled to ensure that the navigation links at the bottom are visible on the great majority of computer monitors. They’ll be fixed to the bottom of the screen (unlike here where the image cuts off after 750 pixels vertically).

For easy comparison, open in tabs.

basic

  • Expanded Vermont footer: after clicking “Quick Links”
  • Expanded Vermont footer: after clicking “Directions & Contact Information”
  • Examples of other sites

    We’ve tried to assemble a range of examples from college websites that exemplify some options that Middlebury might emulate. Please provide additional examples in the comments if you see any that speak to you, or have comments on these sites that we used to present to staff on Dec. 16:

    Oberlin has recently redesigned its site into a highly dynamic & multimedia system. Particularly noteworthy is their group blogging site, encouraging students, staff and faculty to participate in a multifaceted conversation.

    Gettysburg has a good example of how a personalized bookmarking system might work – you can create a profile (if you don’t have a Gettysburg email, you can register as a prospective student), and then bookmark any page you might find to save in your profile. Also check out their strong use of embedded video.

    – Bates has an embedded audio site that is simple and effective.

    Amherst‘s site (which is built on Drupal, an open source system we’re actively considering) effectively integrates information from its registration system (comparable to Banner) into a range of sites. For instance, a faculty page automatically feeds what courses they are teaching from their schedule, and links to individual courses (which, if registered in the course, includes access to course rosters, eReserves, announcements, etc.). Such an integrated system of sharing data from various platforms is a definite goal of Middlebury’s makeover.

    – Colby has an extensive list of wikis, which range from administrative functions to student initiatives to course projects. While Middlebury does have a wiki platform, it could be much more active and integrated into the core web functions.

    Please share your thoughts on these sites as well as links to others in the comments.