Web SWG

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

Posted by froye001 at 2:42 PM | Permalink | Comments (0)

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

Posted by froye001 at 2:23 PM | Permalink | Comments (3)

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

Posted by froye001 at 1:31 PM | Permalink | Comments (2)

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.

Posted by froye001 at 9:41 PM | Permalink | Comments (0)

Behold 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

Posted by froye001 at 7:13 PM | Permalink | Comments (0)

Here's what it looks like all pulled together.

Posted by froye001 at 12:26 AM | Permalink | Comments (1)

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

Posted by froye001 at 9:35 PM | Permalink | Comments (2)

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:

Posted by froye001 at 8:36 PM | Permalink | Comments (4)

Our current masthead:

What a new one might look like:

• 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.

Posted by froye001 at 5:43 PM | Permalink | Comments (4)

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...

• 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

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

Posted by froye001 at 8:21 PM | Permalink | Comments (5)

And the mandated footer:

Posted by froye001 at 8:13 PM | Permalink | Comments (0)

Here's the mandated header:

Posted by froye001 at 8:11 PM | Permalink | Comments (1)

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.

Posted by froye001 at 7:40 PM | Permalink | Comments (0)

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.

Posted by froye001 at 7:38 PM | Permalink | Comments (1)