School Library Website – Layout 

As we continue to find ways to improve our school library websites, a previous post about library website design discussed reflecting on the focus and purpose of your school library web page.  Click here to view the earlier post. Another step of a website review involves looking at layout or the placement of important items on your site.  This could be a link, image, search bar, or other notable information.  The placement of those items can influence how easily learners can locate needed information.

According to web design experts like Insivia, users have two patterns when scanning a web page, F-shaped pattern and Z-shaped pattern. F-shaped pattern works well with web pages that have a lot of text like a blog.  Z-shaped pattern is great for minimal text web pages.  Knowing this information, you can set up your page to place important items in the F or Z-shaped pattern to help a user’s eye find the most important items on your page.


Blog Post with F Shape

F-Shaped Pattern Example


Z Shape Website Layout Example

Z-Shaped Pattern Example


I drew the Z-shaped pattern over my school library home page and noticed a large gap on the right side of the page. (See images below.) I reflected on the parts of the page that students had the most difficulty finding to determine my next step. I moved the search books widget to the top right corner.

Website before Z Shape

Library web site before Z Shaped Analysis


Z Shape Website Layout Example

Library web site after Z Shaped Analysis


Next Steps

Start with your school library home page and draw the Z Shaped or F Shaped pattern.  Do you notice any gaps on your page according to F or Z Shaped pattern?  If so, consider the following questions.

What are the most important items on your web page?
What do learners have difficulty finding on the web page?
How can you use this information to adjust placement of important items?

Additional Resources

Web page design: 3 steps every designer should follow: A quick read discussing the F and Z shaped patterns and more information about website design.

Your Blueprint for a Successful Saas Website Redesign: Additional information about layout including F and Z shape patterns.

Z Shaped Pattern Reading for Web Content: A blog post that discusses how users scan (versus read) a web page.

Author: Becca Munson

Becca Munson, Librarian, is a National Board Certified Teacher with over 24 years of experience in education. Becca is the Coordinator for Library Systems in the Blue Valley School District. Previously, she was school librarian at Blue Valley West High School. She opened two buildings in Blue Valley and spent some time as an Ed Tech Specialist before returning to libraries. Becca supports over 45 librarians and support staff as they work to fulfill the mission of flexible scheduling, collaboration, and literacy.

Categories: Blog Topics, Technology

Tags: ,

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.