Graphic Design and Layout on the Web
Here are some sites that we can look at for examples (both good and bad) of different styles of graphic design and layout. As our class project focuses on 5-7 year old children, we are looking for sites that are directed at children.
From Shannon:
- Freaky Fish Family Album (A game idea, but poor for what we want....some yes's and no's)
- Life in a Massachusetts Tide Pool (For parents and educators. The design is a big No in my book.)
- Consistency of site design (The Dole 5 a Day pages are indicative of the consistency that Steve Burdick was talking about. I like the large colorful images, but this seems to be an older level than we need. It may give ideas about graphic representation though.
- Dr Seuss (Scrolls and Scrolls--deals with parents more so.)
- School Discovery (Example of 'grid' design.)
- Child Aware, Parent Showcase, Pre School Manual (Ideas for the Parents Section.)
From Jeff:
- Safe Kids - Interactive Story Book - How Safe is my Child? (A safety site aimed at kids. Design and content issues aside, it has a very strict linear design -- maybe not so different from what we were talking about yesterday. This site has no way of getting out of the "route" in the middle, which I found very frustrating. If we go with this kind of structure we definitely need a navigation bar on each page.)
- The Field Museum of Natural History (Nice navigation graphics (using a small color set); good layering of graphics with different resolutions (images are first presented as low-res. gifs, then you are given the option of downloading bigger jpegs--and you are always told how big jpeg and audio files are before you decide to download them); and most importantly, good content (check out the Javanese mask collection!)
- The Museum of Modern Art, New York (MOMA) (If MOMA didn't have a beautiful and classy web site, who would? The online catalog "Contemporary Art from the Netherlands" is an excellent example of using frames for navigation (and I usually hate frames!). Not for children, but kids should be so lucky to have a design like this.)
- Media Kids (Japan) (All in Japanese, but the graphics are cute. As you all may know, client-side animated gifs like the mole on this page are extremely easy to make and don't require any cgi scripting (some browsers may not support them, though.)
From Christi:
- The Fray (This is a place where people really express their views. In general I really like the minimal use of words and graphics. The backgrounds are very nice -- they match their section's icon located on the front page.What I think is very original is the use of the "STOKED" story right off the front page. There are only a few words on the screen to begin the story. You click on the words and it brings up another screen with a picture on it and more words. You click on the words to be lead to the next screen. There is only one place to go -- to the next screen. I'm sure we'll use this in our project somewhere.)
- HappyNet (This has moving animated icons and let's you interact with it. It gives a net "happy" rating. You enter how happy you are on a scale of 1-10 and it averages the last 30 responses to get a "net happiness" rating. There is a warning at the bottom of the screen that IP addresses get logged when you submit your answer. The heading says this is a service of the Princeton Review. There is also an offer to let us use this happiness piece.)
From Hee-Sun:
I want to share just a simple idea about the web sites for kids with you. As you recognize, all the materials in each web page are not bad. Some of them are good, others are not. My focus is the use of background patterns. Just take a look at these web sites.
- The Bug Club A club run for children or the young at heart who are interested in Bugs and other "Creepy-Crawlies". Too much scrolling!
- Brain Games Ready for some Streneous Brain Exercises?
- Bedtime-Story Whimsical Bedtime Stories for Children of all ages. Blue text on black can't be read easily.
Then, my suggestion is the following. Don't use too many colors and patterns on one page since it can make children confused. Do you agree with me?
From Monica:
- The Electronic Zoo (This one has a good first page, but the links for children are mixed up with links for professionals. There are some good pages in the links, but how do you know which one of the hundreds you should try.) Crowded, wider than the default screen, too many choices. Originally meant for vetinarinarians. Not consistent layout.
- Mr. Edible Starchy Tuber Head An Interactive Game for Kids. (Kids choose the features on Mr Potato Head and the computer draws the finished product. I found this site in Interesting Places for Kids. I followed the link to Toys and Games and then to Interactive Web Games at Yahoo.) There is a disclaimer in the site for Interesting Places for Kids.
- Worm World (has quick time movies of a worms' five hearts beating and a worm being born.) Advertisements at the top are distracting. Screen size is too wide for default Netscape screen.
- Children's Museum-Great Adventure Tour (The background is consistent through out this one, but it really makes it hard to read and stay focused on the content.)
From Soo-Young:
- Magellan's Quest (I like the first page of catoon-like graphics, but it takes time to display though. This site has interctive games for kids. Games are basic but many kids seem to love it (according to counting number). One thing we have to remember for the game pages is the appropriate links. Because of feedback pages, sometimes "back" or "forward" or "go" menus are useless.)
- Miami Museum of Science (They use big icons and limited texts for kids, at least for the first pages of each unit. Visit hurricane or PH Factor unit.)
- AskAsia F.K.O. (For Kids Only) (This site is still under construction. But you can see very consistant layouts for every page. One problem is even though they use very big head banners with icons, these are not clickable (maybe this site is under construction?). You should scroll down in order to select the next options, especially you have small monitor.)
- Internet for Kids (This homepage looks terrible in terms of graphics! The next level menus are more parent guided pages if you are small kids. Small size letters, lots of texts and links... Can small kids follow too many link options?)
From Joe H:
My searching dealt with finding storybook sites aimed at very young audiences. Here are some urls:
- Theodore Tugboat's Surprise Friend (Interactive story where you get to choose what happens next; No scroll design, good pics, straight forward text; Good example for the age level.) See also the Theodore Tugboat home page.
- Shishy's Kidstuff Personalized Children's Books. (You personalize the story to begin and it includes your name from page to page. Neat idea! No scrolling, good screen design, simple text and graphics; Good site for the age level.)
- Learn Your Alphabet (Very simple; BAD site, poor page organization)
- Grin's Message (Too much text, poor page layout. BAD site!)
- Children's Storybooks Online (Provides three or four different stories. Uses a nice variety of styles!)
For those of us on the Poison project, I believe one of our biggest challenges will be to convey a great deal of specific content material to an audience that has limited reading and comprehension skills. We need to be very careful not to design a site that only adults can use! Many of the "so called" kid sites have cool pictures and activites, but the interface for the kids is atrocious!
From Ginny:
- HarperCollins Children's Books: The Big Busy Home (This site has good design features and it is visually appealing. For the poison project people: I also liked this graphic of the house. One thought for the poison developers: this site was very slow to download using a 28.8 modem at home. I hope that we consider this when designing our site.)
- COHIS Kids Corner (This site has a lot of design problems but I thought it would be interesting to see what another university has out there for kids in terms of prevention.) From Boston University Medical Center's Community Outreach Health Information System (COHIS).Focus on Health and prevention of diseases. Contains Disclaimer.
From Jon M-L:
- UMDL/MYDL Teachers' Corner (I've been looking for resources on line for teachers. The more I look, the better I like the UMDL's (patting self on back), which you can find here.)
- Academy One (A project which seems to be similar to what I envision for the Teachers' Corner can be found here. The project is Academy One and they use gopher servers and newsgroups to distribute information.)
- CyberSpace Middle School Teacher Resource Center (One that I don't care for. It's just a hot list of other sites, which in turn are often hot lists themselves. This seems to be a common trend in Web sites in general and especially in education. Just points out that we need to be in the content business.)
From Gary:
Okay, y'all, a few sites for consideration (or inconsideration, as the case may be). Not all are for "young" kids, but what the hey--
- The Children's Virtual Museum of Virginia: (Weak graphics (albeit attempts were made at making it colorful); "Unfriendly" layout with a monster headline gif; Consistent (if not very aesthetically pleasing) layout with targets; Not much actual content; delivers little (although for a grin check out the kids' stories section--cute).)
- CyberSpace Middle School: (Basically an organized and structured collection of external links, but there's some good stuff here. However, another example of a poor use of an image-map; it's a killer, and it's ugly (sorry to be blunt). Layout is inconsistent. Broken links, poor layout. You'd think some of these sites would have a sense of humor -- these are for kids, after all -- but sonofagun, alas, and alack, they don't...)
- Knowledge Adventure (Now this is a cool site. Consistent layout, with consistent backgrounds (if not title bars). Colorful, playful, and--wow--fairly cool content. Large thumbnails, but more friendly than using the really big images other sites resort to.)
From Darryl:
- Children's Literature Web Guide (Here is a Canadian site for Childrens' reading resources.)
- Real Kids, Real Adventures (Good site for stories, games, and animation)
- Poison Prevention Sites on the Web. A list of 10 sites that Darryl found. An invaluable resource for those of us working on the Poison Prevention Week Project, as well as for those of us with kids!
From John:
Perhaps we could take a look at this site in class for a few minutes to analyze its design strategy (from the Scout Report):
With Ken Burns' New Perspectives on The West, television combines with the Web to produce a stunningly rich and interesting educational resource. Beyond the eight-part documentary that aired earlier this month on PBS stations, visitors to this Web site can look closely at each episode's background material of photos, memoirs, and maps, all richly speckled with links to more historical and geographical information. Games, knowledge quizzes, and info about the making of the series also find a homestead, as does a submission box. Clear navigation tools keep you oriented as you move among a multimedia tour, a searchable timeline of events, and lists of people and places important to the history of the American West. Also notice one of the best uses of HTML frames on the Web.
From Rosalind:
- Smokey Bear is the Fire Prevention Week 1996 site, directed at kids. Check this site out for ideas! This seems to be the closest thing to our Poison Prevention Week project.
Send your Evaluation! What do you think about the sites listed here? Click here to send us your feedback on the sites listed above.
http://www.umich.edu/~ed626/graphic.html
Revised: October 18, 1996
Copyright ©1996 The University of MichiganSend comments or queries to Carl Berger or Rosalind Kam