Images at the Met - not just paintings

This blog is about the images on the Metropolitan Museum of Art (New York, NY) – website – and not just the paintings. Since the museum is a place to view works of art such as paintings and sculpture, it is only fitting that the website be rich in images too.

The splash page http://www.metmuseum.org (which changes daily), shows on this day, the Great Hall or lobby.

The Great Hall is huge, as the people are quite small in the photo. But the photo depicts it as a nice place to begin your visit to the museum. A warm, rich tone is used as the background of the page; it gives the photo a warm, rich feel as well. The home page also displays a different work of art at the museum each day. On this day, a photograph of an openwork stamp seal was chosen. Its grays blend nicely with the photograph of the museum lobby. Both photographs working together draw us in and entice us to click the ‘Enter here’ link.

When we click the ‘Enter here’ link we are presented with the home page http://www.metmuseum.org/home.asp (which also changes daily) – ‘Now on View’ and ‘Selected Highlight’s’.

The ‘Now on View’ section includes illustrations of the posters for three current exhibitions. To help visitors, these illustrations are the same as those used in other advertising media. By clicking on an ‘exhibit poster’, the main page for that particular exhibition is displayed. Here one will find an illustration of the poster as well as a link to view pieces in the exhibition. Clicking the link to view pieces in the exhibition brings up a gallery of photographs. These photographs of items in the exhibit are just that, a photograph of the item – as you would expect to see it if you were to attend the exhibition. There is also an enlarge feature to enlarge each photograph.

The ‘Selected Highlights’ section presents six categories, ‘Now at the Met’, ‘The Met Store’, ‘Membership’, ‘Ways to Give’, ‘MuseumKids’ and ‘My Met Museum’. Each is prefixed by a square image. The image is a logo or a thumbnail of a piece (cropped in some cases) in the museum.

In the cases where the square image is a cropped view, the full image is presented when the corresponding link is clicked. For example, the ‘Now at the Met’ thumbnail reveals the full painting when clicked (along with a list of current events). The thumbnail for ‘MuseumKids’ changes daily. When clicked, a banner with thumbnails, some with kids, of art works from various collections in the museum spans across the page. Again, as on the home page, these are cropped views. If any one of these thumbnails is clicked, a gallery of photos opens. The gallery includes a host of photos of items within the associated collection. Each photo, again, is as it appears in the museum (minus frames on paintings). A user can zoom in and enlarge the picture as well.

Museum branding through the use of logos occurs in combinations on the museum web site. The museum logo has text forms, ‘The Metropolitan Museum of Art’ and the Renaissance M. Both are in the banner of each web page. The logo also incorporates the ‘dot’ (with and without the Renaissance M) in a variety of colors to mimic the button one receives after gaining admission to the museum. The museum also has a mascot – Hippo William. All of these elements come together in the ‘Selected Highlights’ section of the home page.

The thumbnail for the ‘Met Store’ link depicts a shopping bag. The name logo is used alone. This image is a representation of the actual shopping bags used in the store and helps individuals associate the bag with shopping at the store. Upon entering the ‘Met Store’ and performing a search on ‘logo’, a variety of products are displayed sporting the various forms of the logo – Renaissance M and dot.

A thumbnail image of the admission button is used to link to ‘Membership’ and William the Hippo is used to link to ‘My Met Museum’.

Icons are used on the website to call attention to particular features. For example, accessibility icons such as pictured: left to right: wheelchair, assistive listening devices and sign language interpretation,



and, guided touch and verbal imaging tours:

are easy to decipher. These icons are used throughout the website as a short hand to inform those who have special needs about events, programs and features that cater to them.

Share and services icons are used to share, email, tag, etc. gallery photos. As shown here, gallery pictures can be shared in a number of Web 2.0 ways when the share icon is clicked.

All the services icons are concisely displayed in the pop-up window. Four “pages” of icons are available, such as, G Bookmarks, Digg, MySpace, LinkedIn, and Blogger, to name a few.

Garamond – the typeface with Legibility, Readability and Personality!

One of my favorite typefaces is Garamond. Garamond was first designed by Claude Garamond of France in the 16th century. Since his death, the Garamond typeface has proliferated into many interpretations, but all share distinctive Garamond characteristics. “For example, character stroke-weight stress in every Garamond design is canted, with the heaviest parts at approximately the two and eight o’clock positions. Head serifs (those at the top of character strokes) look like banners, and baseline serifs tend to be long, slightly cupped and (in most Garamond designs) have soft rounded ends. Another feature shared by virtually every Garamond face is the bidirectional serifs on the top of the capital T” (Illuminating Letters).

This blog will talk about the Garamond typeface which comes with Microsoft Office Word 2007, Garamond 2.40 MS. Garamond 2.40 is Monotype Garamond TM (a trademark of Monotype Typography, Ltd (Microsoft.com). The alphabet looks like this:


There are basically two branches of the Garamond typeface; American and European. Monotype Garamond TM is of the American branch and “is one of the most elegant interpretations of the Garamond style” with “its marked contrast in stroke weights, open counters and delicate serifs” (Illuminating Letters).

In her article, Avoiding Typeface Terrors, Kathleen Burke Yoshida discusses the importance of using appropriate typefaces in documentation. She says one must consider “a typeface’s legibility (how distinct, clear, and recognizable its letters are), readability (how easy it is to read in a text line), and personality (what feeling it conveys).”

Legibility
Burke Yoshida says “[l]egibility refers to a typeface’s degree of letter recognition” and to determine legibility look at “the tops and bottoms of the letters.” She offers this simple test:
“Place a piece of paper over the top or bottom half of a word or sentence. If you can read the word or sentence easily by looking at half of the letters, then the typeface is likely to be perceived as legible.”

So let’s try it!



By looking at just half of the letters in the sentence – we can read the sentence:

Therefore, Garamond is perceived to be legible.

Readability
According to Burke Yoshida, “[r]eadability refers to how easily a text line can be read.” Serif typefaces, like Garamond, are easy to read because the serifs guide the eye across the text. “Selecting a typeface with a large x-height (the letter body is large with shorter ascenders and descenders) can enhance readability because the type appears to be larger with more space within the letters. Garamond fits the bill for readability, in addition to its serifs, it also has a large x-height as illustrated:


Personality
“A typeface’s personality is related to its letter attributes, such as stroke weight and the presence or absence of serifs” … but, “is ultimately determined by a reader’s perception” (Burke Yoshida).
There are general guidelines, according to Burke Yoshida, that help to define personality:
1. Typefaces have a flavor based upon when they were created. Garamond was created by Claude Garamond in the 16th century. The Garamond typeface has an old-world feel.

2. Typefaces which have serifs are considered more formal. Garamond has distinctive serifs, such as the “bidirectional serifs on the top of the capital T” (Illuminating Letters):


3. Typefaces with cupped or rounded serifs are considered more informal. Garamond “baseline serifs tend to be long, slightly cupped” (Illuminating Letters) as in the letter i:

4. Typeface “[s]troke weight can convey a sense of lightness and boldness” (Burke Yoshida). Monotype is balanced. “[C]haracter stroke-weight stress in every Garamond design is canted with the heaviest part at approximately the two and eight o’clock positions” (Illuminating Letters):


To me, the personality of Monotype Garamond TM is elegant and gracious.

References

Burke Yoshida, K. (2000) Avoiding typeface terrors. Society for Technical Communication. http://www.stc.org/confproceed/2000/PDFs/00006.PDF

Garamond – Version 2.40. Retrieved from http://www.microsoft.com/OpenType/fonts/font.aspx?FMID=1305

Illuminating Letters Number One. Will the “real” Garamond please stand up. Retrieved from http://www.fonts.com/NR/rdonlyres/EF8A90A6-66C8-40D5-95F8-AEF62BB05705/0/ILGaramond.pdf

Crayola is for Kids, Royal Talens is for Adults

http://www.crayola.com/ (Crayola LLC) and http://www.talens.com/ (Royal Talens), will be used to demonstrate these styles.

Crayola, maker of the classic crayon (plus more) caters to children; the Crayola website encompasses what kids want.

Kids want to:

• have fun,
  
• learn new things,
  
• create, and
  
• share with their friends.
  

Crayola.com includes a wide range of activities for kids from coloring books, to craft projects (in written and video form) to games at different levels of ability. Email capability allows kids to share their creations with their friends.

Crayola.com has links to Crayola international sites – Canada, Australia, UK and Mexico.

Royal Talens, maker artist paints, colored pencils and pastels, caters to adults. Their website gives adults what they want.

Adults want to:

• learn about the product(s), such as:
  
  
  
  • where to find the product,
    
  • what other products the company makes,
    
  • how to use the product,
    
  
  
• have fun, create and learn new things, and
  
• communicate with others.
  

Talens.com offers product information both at a high level and at a technical level for the amateur artist and professional artist. It has a ‘How to Paint’ section where the budding artist can learn to paint, or a seasoned artist can learn a new technique. It also has a forum for discussion and a gallery of company and artist work (that can be emailed).

Royal Talens is based in The Netherlands; the site is available in many languages. The user can select to see content based upon European country or language.

Pedagogy vs Andragogy
Research in pedagogy (the teaching of children), andragogy (the teaching of adults) and learning styles has practical uses in website design.

Crayola understands that pedagogy is teacher directed. The website has sections devoted to teachers and parents with relevant information on how they can direct children to think creatively, interact with activities on the site and use Crayola products in the home and classroom.

The For Parents link features Arts & Crafts projects, Coloring activities, ideas for parties, ways to interact with teachers, tips on how to encourage creativity and traveling with children.

The For Educators link provides Lesson Plans, ideas on how to incorporate creativity in subjects such as math and science, as well as a place where students can post their work, to name a few.

The Royal Talens website illustrates principles behind andragogy with the How to Paint section. Adults learn best when they can link the knowledge they already have to new skills. They are “autonomous and self-directed” (Hoffman), they want to know the application before the theory and they benefit most when they are actively involved in the learning process. The teacher serves to encourage and nurture. ‘How to Paint’ is a step-by-step set of instructions on how to paint transcriptions (a copy of a painting by another artist). Royal Talens encourages the adult learner to begin painting: “We offer you step-by-step plans in most techniques and in different styles. So whatever your choice, you’ll be amazed at your own talent.” For example, transcriptions to learn about Painting with Oil:

Learning Styles
Four Learning Sytles are demonstrated on the two websites:

• Verbal/Visual Preference
  
• Tactile/Kinesthetic Preference
  
• Visual /Non Verbal Preference
  
• Auditory/Verbal Preference
  

Best Practices suggest that information be presented on a website to accommodate the broadest number of learning styles. This means each message should be presented in several ways so that users can choose which way they want to get the information.

Verbal / Visual Preference
These users prefer to get information through words.
Crayola.com accommodates children of different ages and reading levels. The use of the visual in combination with the verbal addresses these differences.

Crayola.com uses a combination of verbal and visual to make choices in what traditionally would be a drop-down list. Through the Create and Color link coloring pages can be created and printed. For example, in the ‘drop-down list’ of tools below; when the hand pointer (controlled by the mouse) points to an icon, the icon name appears in the green bar (‘Move’ is partially hidden by the hand) and a bubble offering more detailed information (“Allows you to move stuff around”) is displayed.

Talens.com uses words and illustrations to describe How to Paint steps; these explanations assume a novice level user is performing them.
For example, Step 2 of the Italian Landscape painting:

Each step includes a detailed explanation and an illustration of what the painting should look like at the end of the step:

Tactile/Kinesthetic Preference
“Creative Play”, being physically active, hands-on is what these users prefer.

Crayola.com is packed with hands-on activities. The Coloring Books link has many coloring book pages in many categories that can be printed and colored, it has functionality to create one’s own coloring pages (“Create and Color”) and print them, and many other creative activities such as “Digi-Color” (online coloring), “Certificate Maker”, “Card Creator” and “Idea Generator”. These activities require more advanced level of technical ability.
Coloring Page link:

Create & Color link:
Digi-Color, Card Creator, Certificate Maker and Idea Generator links:
Royal Talens How to Paint is hands-on instructions that can be printed. (See screen prints above.)

Visual /Non Verbal Preference
Visual/Non Verbal users like information to be presented visually in pictures, video, animations, icons, etc.)

The Crayola site is very visual; icons and pictures are used throughout. Icons are large and more realistic than the traditional icon; for example, the printer icon (‘Print’) shown below. Also shown below, the line drawing for ‘Create’ mimics the line drawing that can be created and the photograph for ‘Color’ shows a real person coloring the printed coloring page. The blue arrows show the progression of tasks in a visual, non verbal way.The Talen site uses pictures and icons with a minimum of text. The product listing below for pastels is mainly visual. The user can click the icon to enlarge the photo.
The detail photo below is displayed. This picture is also displayed when the text label is clicked. To find out which colors are in the box, the user has to open the Color Chart link or the Folder link (which is a brochure about these pastels).


Auditory/Verbal Preference
These users prefer information to be presented through the spoken word as in podcasts and lectures.

The CreaTiVe tm link on Crayola.com has videos demonstrating a variety of craft projects by a child/adult team. Each video features one craft project and runs about three to four minutes.

Royal Talens does not have video or auditory capabilities.

In conclusion, the Crayola site is rich in accommodating all learning styles discussed while the Royal Talens site covers many, but not all styles.

References
Hoffman, B. Andragogy: Teaching Adults. Encyclopedia of Educational Technology. Retrieved from http://coe.sdsu.edu/eet/articles/androgogy/index.htm
Knowles, M. Andragogy. Retrieved from http//tip.psychology.org/knowles.html
Turns, J. and Wagner, T. (Feb. 2004) Characterizing Audience for Informational Web Site Design. Technical Communication.

A Poem Set to Typography

Fireworks night is nearly over
All over the city
I am warm in bed
In the afterglow
You have gone to the bathroom
A late flurry of stars lights up the window
I watch them go out with a bang
They have only just come
Down from heaven

“The Lover’s Tale – Typography” is an animated poem from mamamsonic, http://www.flushleft.co.uk/, that very convincingly translates the words (and letters of the words) of the poem into the “stars” of an aerial fireworks display. Through typography, the words of the poem, above, are enhanced through video presentation:

The overall design is well-done, incorporating many design principles. As a whole, the primary principles of Unity and Variety are used to great effect. The same font is used throughout – Century Gothic – but it is presented in a variety of ways to depict fireworks stars. Just as stars do, depending upon the type of firework effect, the letters making up the words in the poem change size, boldness and color. Sometimes they free-fall like a “waterfall”, other times they slowly tumble in a trail like the Kamuro effect; they shine brightly, then fade; they pulse and overlap in a “bang” (as in the finale).


Supporting the principles of Unity and Variety; the design incorporates Rhythm and Balance. The rhythm of the letters moves the eye along the lines of the poem as the fireworks display unfolds. The display is balanced symmetrically as well as asymmetrically; fireworks shoot up from the left bottom of the screen, from the right bottom of the screen, and from the middle. The letters linger and fall more on one side of the screen than the other at various points in the video.


Another important element of design, Color, is used to great effect. Just as fireworks stars burn bright shades of red, orange, yellow, green, blue, purple, and silver against a darkened night sky; the letters of the poem take on varying saturations of turquoise, blue, magenta, pink, orange, yellow and white against a black background.


So, even though the “fireworks display” of the poem is not an exact representation of fireworks, but rather an abstraction; the typography is manipulated so effectively that we know it is a fireworks display, and we can enjoy the poem that much more.