Texas State Multicultural Studies
better with refinement...
Comments by: Fred Showker, Editor:
First let me say this site is doing the job and doing it fairly well. It loaded quickly, and all the elements popped into place correctly, with nothing standing in the way of flowing into the content effortlessly.
If I may, however -- let's take a look at some very minor tweaks that can make all the difference in the professionalism and presentation of this important information.
Open the "BEFORE" (87K) image, and slide its window to the right to continue reading.
- Follow the reader eyeflow...
In this layout everything seems as it should, however by the placement of the photos,
we've split up the content into uncomfortable chunks. This content should read as a body of copy, and the reader should have no (white space) barriers to slow the effortless reading process.
Yes, that's a lot of text.
- The rule of white space
White space is used to do either or both of two things:
1) Separate one element from the other
2) Isolate an element, calling attention to it.
- Any time you introduce white space it should not be in the running flow of elements or content that is actually meant to be together. (Keep similar things together, different things apart.)
- Organize content and photos
Now open the "After" (87K) example, and slide it to the right so you can flip back and forth between the Before and After. I'll wait.
These are very slight modifications which can be accomplished in the way the content well is formatted, and with some minor modifications to the table/CSS.
First: We've got to get that text into a clean, organized layout. The human animal is drawn to organization and repelled by chaos. So, I've tightened the text and brought it all to the left. This gives a clean left margin for the eye to follow.
This style sheet should introduce line spacing.
Perhaps: line-height="1.3em". With sans-serif type this small, line spacing makes the text much more readable and appealing.
Next: I've cropped the black & white photo so that it is the same width as the color photo below. Again, this provides an axis line relating the photos in their positions. The pictures were only slightly different, (maybe 15 pixels) which contributed to the out-of-balance feeling between them. Remember, if two elements are supposed to be different -- make them very different. Slightly different makes for unrest.
Notice this slight change also puts the truck's axis of movement pointing into the copy, rather than into the menu bar (as before) - out of the content area. Always be aware of the "axis of movement" in a photo. If it points in a decided direction, try to make sure that movement points at the area where you want your reader to look -- rather than away from the content, or worse yet, off the page.
Now the content well seems to flow into a composite "whole" or gestalt. The photos now create a visual frame to the right which tends to hold the content in the readers focus.
- Did you see the other changes?
Probably not -- because they were so subtle, you wouldn't notice beyond the more comfortable feeling:
Alignment should be intentional alignment. The original layout centered both the page head, and the article head. By moving both of these into alignment to the left, we've caused the axis line of the content to be more pronounced -- thereby helping the reader quickly into the content well.
Observe in the original how the centered heads introduced more uncomfortable negative space into the overall layout. The white "hole" next to "Our Mission" disturbed a smooth eyeflow.
Of lesser importance, I tightened the menu items in the left navigation column, and moved the links away from the left-hand borders of the boxes. I question if those borders are even necessary, but left them in since they're already there.
The uneven alignment of the stack of items is also disturbing to my eye, however I understand what the author was intending to do by indenting them. Perhaps we should test those links without indention to see if it hampers navigation.
- Attention to detail
This site was already working well, and quite user friendly. My suggestions for these minor changes only strengthen the overall appeal of the page -- and serves to enhance the smooth transition from the arrival gulp, to reading the content. These are the kinds of changes the designer needs to investigate after the page is up and running.