Main

May 14, 2009

Palette, part 2

These are the hex colors from Katie. They're slightly different from the ones I pulled off an image Brian sent me. These are the real deal. Check the web standards page for more options on maroon and gold.

Africa & ME Orange: #d95d2c

Americas Blue: #0095c7

Asia & Oceania Green: #005c2c

Europe Beige: #a99d77

Worldwide Purple: #6a366e

Maroon: #7a0019

Gold: #ffcc33

Text, part 2

It's still under development, but check out the style manual for formatting text. Why are we doing this? Well, to:

  • reduce variations in text in order to improve the user experience
  • create consistency across the site in order to improve usability
  • create consistency between print and web in order to strengthen our brand
  • reduce the number of styles and the need to apply them in order to make the site easier to manage

May 12, 2009

Masthead, part 2

Katie prepared a program-specific banner. And we wanted to experiment with using the square wordmark.

April 17, 2009

Browser Compatibility

These are the browsers I suggest we validate against.

Windows (85% of visitors)*
Internet Explorer 6 
Internet Explorer 7
Firefox 3
Safari 4
Chrome 1

MacOS (14% of users)
Safari 3
Safari 4
Firefox 3

Usage data is from the University eCommunications Standards.

April 16, 2009

Palette

Brochure_color_palette.jpgBehold the color palette for the brochure. Per Katie's idea, let's weave these colors into our web palette.

Blue #0079A6
Green #004324
Purple #48224B
Fog #8B835E
Orange #BC4429

All Together

Here's what it looks like all pulled together.

April 15, 2009

Text

current_content.jpg

I'm experimenting with body text. I'd like to:


  • try other looks for headings other than red centered text on a gray background

  • reduce the number of variations down to h1, h2, h3, strong and emphasis

  • change link hover color to something more visible - yellow gets lost on the white background

  • add an active state to links (how the text looks as you click it)

  • increase the leading (the distance between lines of text) which I think will enhance readability

  • change the default font from Arial to Verdana

new_content.jpg

Banner

current_banner.jpg

The banner image changes with each mouse click and on refresh. Like we discovered with the brochures where we used a different color for each country - too much variation is more than the brain can process. Overuse of visual elements can actually disrupt connections the user is trying to make.

Our changing banner is disorienting. It gives the impression the last mouse click moved you to a different section of the site. You have to scan the page for clues you haven't moved to a different area altogether. I want to:


  1. move the banner ahead of the title and breadcrumbs

  2. snuggle it right up to the masthead

  3. create a single image for each section of the website and use it on every page in that hierarchy.

Something like this:
new_banner.jpg

Masthead

Our current masthead:
current_masthead.jpg

What a new one might look like:
new_masthead.jpg

  • The mandatory "Driven to Discover" element is now taller. Should we shrink the "Learning Abroad Center" element to maintain overall height? The taller the masthead, the further down the page users have to scroll to find content.
  • There's a search box in the "Driven to Discover" element so we don't need another. We can change the wording and functionality so it searches just our site.
  • Visually, the white box around "Learning Abroad Center" isn't necessary because of the natural border created by the neighboring elements. However, if that's our new wordmark perhaps no alterations are allowed.
  • I love the blue but perhaps we could use color to ease the transition between the maroon above and the element to follow.

April 14, 2009

Left Nav

I'll go on record. I don't like our fly-out menus and I don't like the audience links.

My beef with fly-out menus:


  • they are difficult to navigate especially for people like my mom who has a hand tremor

  • users rarely land on the first level page so we miss the chance to introduce a topic

  • they're only needed when space is tight - not our problem if we were to get rid of the...


Audience links:

  • Curriculum Integration is not an audience

  • they just lead back to other parts of the site so users may be better off heading straight there

  • analytics tells us they're rarely used


However, big changes would be biting off more than we can chew. Better to focus on incremental improvements to what we've got. Here's what I propose:

  1. Remove the green triangle though it's better now that Brendan removed the white background that appeared on mouse over

  2. Make the links easier to select by making them bigger

  3. Make sure they work for users who use a keyboard or pointer to navigate

  4. Make sure submenu links mirror the area's internal navigation

  5. Remove the teeny pictures from the audience links; they don't enhance understanding

  6. Set off Curriculum Integration above or below the audience links

  7. Recode to use only css, no javascript


Here's a simple, pure CSS fly-out menu. Tell me what you think. Just for fun, here's a study of different mouse-over behaviors.

April 9, 2009

Footer

And the mandated footer:

Header

Here's the mandated header:
header_thumb.png

960 vs 760

The new templates are built for a 960 pixel-wide web page but they've also created a version that's 760 pixels-wide. I recommend using the narrower template because it's nearly the same width as our current site. Eventually (end of 2010 I think), we need to move to the wider layout but that will require re-working our content into multiple columns.

Centered vs Left-Justified

This refers to whether our site floats in the middle of the browser window or snuggles up to the left wall. I say centered. I find it easier on the eyes. The left-justified template runs right up to the browser's border. Not a single pixel of white between the browser window and the maroon header.