- General Best Practices
- Independent Schools
- Public School District
Happy Halloween! This month’s launches are scary good, and include a couple of school districts, an independent school in the UK, a military academy, and a number of US independent schools from Florida to Massachusetts to California.
The red and teal buttons that line the top wouldn’t typically be my first choice for a utility navigation, but in this particular case, the design plays out well for this independent school in Tampa, Florida. The bold red continues to play out as you learn more scrolling down, starting with a very well developed one-sentence description that captures their IB program, grades, location and leverages “world-class”, which says it all.
Cleverly designed infographics combine line art and and clean type to convey compelling distinctions and the CDS Develops panel focuses on the kind of person a child will become. Lots of great stuff in the site, too: the Portrait of a Patriot, as one example, is an inviting collage of news across the school and community — you can’t help but see just how much is going on, which is exactly the message this kind of page is meant to send.
This beautiful best-in-class website is all about detail and subtle design touches. In light of how many school homepages feature full-screen video, this site boxes theirs in slightly, which is effective because of the surrounding design elements.
The implicit geometry of the grid plays nicely with the photography, while the animated, parallax effect of the “Valued Voices, Exciting Choices” drives the user further down into a state of ongoing discovery. Content and design work their magic: the “Listen” panel keys people to roles, a unique way to position testimonials; the “Take a Look” combines key data points with color and monochromatic overlays; and the “Exciting Choices” leverages action words to encourage exploration.
There are many things I like about this New York City private school website, but in the end it comes down to the details: such as how the hamburger menu is staggered; the neatly contained “HM In Motion”; the mouse icon to indicate a scroll on the homepage; and a “shorter” homepage than is typical that allows the homepage to key in on a few key distinctions, not easy for one of the largest independent schools in the country with nearly 1800 students, Nursery through 12th. The athletics area in particular continues this trend of removing a lot of design “noise” while featuring the right content in an organized way. The sports grid with a tab for each season is particularly compelling. One last thing about the menu navigation: the school’s Core Values are front and center, reinforcing just how important this is to the institution.
Register today for our FREE 2020 School Web Design Trends to Watch webinar on Dec. 3!
There aren’t enough triangles in websites these days, nor are there sites that manage to handle so many deep colors so elegantly. Or that take a school shield’s outline and create something almost playful, like a stained glass window. Governor’s Academy, a well-known independent school north of Boston, does all of the above and a lot more with its school website.
I really love the mask of the shield on the homepage in “Governor’s People”, which showcases testimonials and profiles, and the At A Glance picks up the bright solid colors throughout, arranged in a staggered grid that is visually interesting. Landing pages like the “Life at Govs” page show how Finalsite’s CMS, Composer, makes it easy to add content, accordion treatments, sidebars with pictures and captions, all within a consistent design. Lots to explore on this site!
One thing that struck me about the hero image slideshow of this school website was that all of the images somehow featured the green and yellow, which ties the design together well. The CHS Advantage panel, just below, spells out the hallmark of its education: Fostering Values, Nurturing Intellect and Shaping Character.
Likewise, the infographic below that is not numbers-oriented but rather textual prompts to read more. The social media feeds does a great job of conveying some current photography, too — using Finalsite Feeds, this is automated while being integrated into the design. Calls-to-action and a succinct statement about who CHS serves make the footer particularly useful.
Clean design with clean messaging: “We Are Wyandotte” is a time-tested solution that works. The district has a coherent approach to its brand for each of the six schools and auxiliary buildings, both in terms of logo as well as how the school website layouts work within the district.
One thing of particular note: the Superintendent’s weekly message, right on the homepage: a great way to share updates using a convenient and efficient format. Nice job!
Visually interesting, energetic hero images that show up on the new Bury Grammar website in the UK certainly is one reason this site successfully conveys a vibrant community and school online. I like the clarity of “What are you looking for?” panel on the site’s homepage as well as the grouping of recent (and updated!) news items that each have accompanying photos.
And making it easy for prospective families to locate the school with the “How to find us” panel is certainly a practical and welcome approach to a homepage designed to help bring students in.
I don’t have to step into the San Francisco Waldorf School to believe their homepage mantra, that “The difference is extraordinary.” In a competitive independent school market, the Waldorf philosophy and curriculum naturally positions itself apart, and this particular School has no trouble setting itself apart.
The homepage lays out clear distinctive qualities — “Creative and rigorous”, “Timing is everything”, “Person to person” and “A unique spirit” — each of which forces you to think and explore. Small touches, like the “Our Campuses” help a user understand and quickly figure out that the school is situated in a few locations, while the Shared Governance page does a nice job of spelling the unique way the school is managed.
It’s nice to see one of our theme designs play out for this Wisconsin school district’s website. Nice photography makes a big difference overall, and having current news and events on the homepage always sends a good message that the district is committed to using the website to communicate what’s happening.
The “Why Oshkosh” page does not contain a lot of content, but it contains a relevant video, running the theme of “North of What You Expect” to entice families to consider the area — a smart addition to the overall district message. Lots of great content lives under the Families navigation item, making it a clear go-to resource for current families.
This independent school uses one of Finalsite’s theme designs and it continues to strike me how nicely our team has created pre-built custom designs that really work well. For Sarasota Military Academy, their blue and gold school colors and classic typeface send a message of tradition.
The clear pathways to reach each division and to learn more about the programs is second in line on the homepage, which places prospective families right at the forefront. And the Academy News & Events page combines the upcoming calendar with a vibrant social media feed, a great way to keep the site current while leveraging posts in other channels.
Finalsite launches hundreds of unique and exceptional websites every year. We've showcased just a slice of the many websites launched in 2019, there are still over a hundred more from this year alone. To see more 2019 launches, read about the more than 50 websites launches earlier this year, or browse a larger collection of our recent launches in our ever-growing portfolio.
ABOUT THE AUTHOR
Angelo graduated valedictorian from St. Paul's School in Baltimore, MD and from Princeton University. Despite getting his degree in creative writing and English Literature, it generally takes some doing to keep him from programming and breaking websites. Just after graduating, he started Silverpoint, and grew it to over 300 schools worldwide before merging with Finalsite in 2013.
- Web Design
- Website Redesign