| « | June 2012 | » | ||||
 |
||||||
| S | M | T | W | T | F | S |
| 1 | 2 | |||||
| 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| 10 | 11 | 12 | 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 | 21 | 22 | 23 |
| 24 | 25 | 26 | 27 | 28 | 29 | 30 |
Let me offer the following two examples of good library web sites, with some notes on "why."
1. http://www.multcolib.org/The Multnomah County Public Library (Oregon) has been recognized as an innovative site over the past several years. You might want to look at earlier versions of their site using the Internet Archive/Way Back Machine (http://www.archive.org/web/web.php).
Look at the graphics, which change on the front page, but are generally static on the lower pages. What do you notice about these pictures? They all have people in them--happy, interactive patrons, using the library. One could argue that the front page main image is too big. In addition, one could argue that the blue navigation list on the right side of the main image should be on the left (based on eye movement research).
There is very little prose on the front page--mostly lists to “popular” services. Note the “audience” links (kids, teens, etc.), which offer a different way to access services. Also note the lack of library jargon and the lack of library acronyms.
In the lower right, you find book suggestions, using images that are covers of the books. You can click on these images--doing so brings you to the full recommendation. Most users interpret small (e.g. “thumbnail”) images as links, so be sure that your smaller images go somewhere.
2. http://www.nypl.org/The New York Public Library’s front page is well designed. Note the rotating main image, which are clickable. Note also the image indicator, to the lower right, under the main image banner. This indicator tells the viewer which image is currently on display out of the total number of displayed images. In fact, you can click on the image indicator to see a specific image from the banner. Very interactive.
The front page has three neat columns--all lists of common actions; very easy to scan and browse. The most important links are toward the top. While the column headers are a serif font, the lists themselves are sans-serif. This difference adds to the further, quick identification of header versus list item. All the boring, legal, required links are at the very bottom, placed in the footer, where the average user would expect them.
And in between the footer and the three columns are three icons and links--to the shop, LIVE, and “support the library.” While lower on the page, these three links are enhanced by the icons/images to the left of each link, not to mention the boxes around both icon and link.
I suggest that you view the source for the page--the creators have used comments well. The CSS is external, but you can view it, by typing in this URL into the Address box: http://www.nypl.org/styles/markup_2006.css We learn best by imitating other web sites. By viewing the html and CSS coding, you can practice using the same features yourself.
Do any of you have good examples?
Michael
Dear Participants,
After tonight's (Friday's) posting of the CSS Layout Lesson, this course on Visual Design will be coming to an end. However, it won't just "drop out of sight" come Monday, 2 April.
Rather, the materials will be made available for at least two more weeks (till April 16th) for you to download, review, etc. I suspect that many of you have been very busy and, as such, have not had the chance to view everything, nor to ask questions. The two week period will be your opportunity to catch up.
Jody and I will monitor the blog (and our email accounts) for further postings during the two week "post period," and will respond appropriately.
Jody will mail out course certificates next week. In the mean time, she is asking each of you to complete the evaluation--the link is on Week 4's page. The information you provide is anonymous and helps improve future programs. You are also free to critique us using the blog, should you so choose.
Michael
Dear Participants,
While a number of you have been very active on this blog, some of you have preferred to "lurk." I happen to know who is lurking because I can view the web site access logs. As you read the following paragraph, we are hoping that both groups of participants will respond.
As we wind down this class, each of you has an opportunity to "ask for something" that may be missing. Did you expect Jody and I to address some particular topic, and we failed to do this? Did we not cover something in depth? Were you looking for another form of feedback, lessons, etc.? Now is your chance to tell us. We are willing to add material, provide feedback in other manners, etc.
You can also email either/both of us directly (jody.walker@simmons.edu or mrleach@fas.harvard.edu) -- if you prefer that format of communication.
Finally, the CSS layout lesson will be posted Friday evening.
Michael
Folks,
I have begun to post the lessons for our final week--#4. You will notice that the web page has changed dramatically in appearance. Of course, this was done on purpose.
For week 3, I simply changed some colors and fonts, dropping the "pinks and blues" that made you think of babies (on purpose). The fonts made the material more legible, but we had to do more.
Given the style already found on the Simmons College pages, it would be a natural choice to use the same style in our final week.
So--what do you say? What are your impressions of this final web page in terms of what you now know about visual design? What could still be improved upon? Why?
Michael
caffeinatedThis article was in my Bloglines feed this morning. Eyetracking points the way to effective news article design. Covers many points that we've read about in this class so far.
Don't know what to say about the findings on the George Brett picture, though. :-P
Happy reading!
Terri
Newer | Latest | Older