As a school librarian, I’m interested in the way things are organized. Organizing is a big part of the job and I’m proud of the way I’ve shaped our library’s physical space. I’ve found myself reorganizing this space to allow form to follow function. When I tackled the job of creating a digital space for my library, I relied on what I’ve learned from arranging and rearranging the physical space. With both, I’ve found success in keeping things very simple and uncluttered. For our school library, physical and digital space alike, I place importance on an open, uncluttered, and inviting space.
A few years ago, our school moved to an all-Google platform for uniformity among our three-town district. This meant that all teachers were required to use Google Sites as their host. For me, this meant changing my K-8 TeacherWeb site to Goggle. I looked forward to the change since starting from scratch gave me the opportunity to weed and rethink its purpose. It wasn’t an entirely new start. I knew I needed a catalog link, links to databases and student search engines, as well as curriculum resources. The challenge was how and where to arrange these things. And Google Sites, especially in the basic form we adopted, is not very easy to work with. I sought out the help of experts for technical stuff, but for the look of my homepage, I turned to some tricks I’ve learned from reading comic books.
Comic book page layout, as well as magazine advertisements, have much in common with website homepage layout. Our eyes first scan rather than read these media. In Comics and Sequential Art, Will Eisner (the guy for whom the graphic novel award is named) explains that in western culture our eyes are trained to move across a page in a left to right direction. We start with a sweep across the top, then diagonally through the center, and left to right again across the bottom in a “Z” shaped pattern. Our eyes are most comfortable scanning this path across a page. When I designed my website, I chose a Google template that fit this model. I put the bold “welcome” message across the top of my page. The middle has a centered short paragraph explaining basic navigation with white space on the left and right. Across the bottom, there are just three bold graphics connecting patrons to the sites most used by elementary kids. When it was time for me to add my Web Seal of Excellence, I decided on the very center widening the “Z” and providing more white space on the sides.
Your eye first follows the path that welcomes you to the site. Once you move across the center, you find yourself at the most popular link, the library’s digital catalog. Your last quick movement is across the bottom where you find the most used links by early elementary kids. If at this point you haven’t found what you are looking for, you can start again. This time you might read the message in the middle directing you to the tabs at the top or the links at the very bottom. Those links that require some hunting are designed for older kids and adults. Again, just as the library is designed for easy movement and access through the stacks of books, our eyes need the same comfort as they travel across the homepage.
OMNE TRIUM PERFECTUM
As for space, it’s important to stay uncluttered. I decided to use graphics sparingly, following the rule of three. Working in a Pre-K through 8 school posed the added challenge of where to place content for very different age groups. I chose colorful graphics for those links most frequently accessed by our younger patrons. For older kids, parents, and teachers, I put their links on the smaller tabs at the top. These links are more text-heavy but each annotation within is still kept short. The Policies and Procedures tab does contain long paragraphs, but each annotated link for teachers, parents, and middle school kids is kept under three sentences long.
I grouped the vertical areas on the homepage in threes as well. The banner with tabbed links on the top, a short paragraph explaining how to use the site in the middle, and the three bold graphics anchoring the bottom. Depending on screen size, most of the homepage fits on one screen cutting down on the amount of scrolling and searching to find links.
The arrangement of library website links, like the physical arrangement of the library’s collection, should welcome visitors. Both need to be easy to navigate. Both need uncluttered access to the most popular resources first, and both need a design that brings people back.
Eisner, Will. Comics and Sequential Art. Tamarac: Poorhouse Press, 1985.
Kidd, Chip. GO: A Kidd’s Guide to Graphic Design. New York: Workman
Publishing Company, Inc., 2013.
Michael Caligiuri is the school librarian at the Florence Sawyer School in Bolton