It’s hot! But it’s never too hot to launch a website. And also because: these websites are hot! Our designers, front-end developers and project managers in Deployment are busy, capital B. Lots of great designs from great schools to share this month. And congrats to them all for getting things done in July and not August.
Providence Day School | North Carolina
With all the red, white and blue, it’s hard not to feel patriotic when looking at the new Providence Day website, a large preK-12 independent school website in Charlotte, NC. But if the colors evoke patriotism, the prominent banner “Think like a global citizen” tells us this is a place where you learn to explore, think and act. “We Exist To Inspire” is both perfunctory and deeply philosophical — to reflect on one’s existence that is.
The design is hip, visually immersive and a notable example of how a parallax implementation can make even scrolling fun, like the original Bazooka bubble gum that was as fun to unwrap as it was to eat. While summers have looked very different for schools these days, it was nice to see the PDS Summer Program microsite, made easy with Composer, which allows for branching, supports multiple designs and easily handles shared content management.
Alumni in Action is a perfect example of leveraging graduate successes, of high interest to your prospective families. This is a great website that really does inspire.
Charterhouse | UK
How can you not want to visit a place like Charterhouse? The website couldn’t do a better job of landing you directly to the archway of this 400+ year old day and boarding school in England.
This school is as grand as it is elegant, steeped in tradition and academic rigor, but clearly a place where kids also have fun. The design’s role is really to stay out of the way, and just make discovering all of this easy: big, sans serif headers above beautiful photography; a hamburger nav that opens an organized list of options; spots of burgundy that help frame pictures and set up calls to action; modest touches of animation to introduce themes and panels; and a sophisticated use of the grid to make sure the content fits just right, as if it were meant to be.
The landing pages deliver a similarly rich experience: the Explore Charterhouse provides a dozen ways to get to know the school; department pages like Art organize faculty, overview information and curriculum that are easy to comb through; and the Houses area is deep and full, giving us insight into boarding life, branded with a slightly different palette for each house. Girdlestoneites are lavender; Daviesites are Green; and Weekites, a firehouse read. If you spend more time than you expected wondering which house you might like the best, you’re not alone.
Westridge School For Girls | California
A small splash of mixed green brush strokes, set behind a colorful silhouette of a young student — then combined with the absence of straight lines and lots of white space — makes for a lively opening design for this all-girls private school in California. The messaging is equally energized: “Adventurous Thinking. Empowered Voices. Impactful lives.” The momentum of the experience continues down the homepage with sequentially-timed animations that lay out the value proposition. “Why Westridge?” comes first, followed by unequivocal answers that are cleverly revealed in a simple slideshow; there are lots of reasons (“Because girls are our future”), and each one will tell you why.
Further down, Quick Facts pop out of the screen, picking up the uneven splashes of color that marry a whimsical touch with a careful plotline -- there’s lots to be proud of at Westridge, and the students are encouraged to think outside the box.
The Why Westridge interior page is a bookmark-worthy example of how to share the school story beyond the homepage where the focus is even more tightly wound around distinctive programs, student life and single-sex education. It’s hard not to support these uncompromising words: Girls Can. Girls Do. Girls Will.
Trinity Christian Academy | Texas
Heart+Soul+Mind+Strength are big and bold on the homepage of the new site for this co-ed Christian school in Texas; that’s because this is a school that lives by their strength. Scrolling down isn’t all that necessary since the video tells this story so well -- an extended montage that combines unusual close-ups of individual students with traditional action shots, and then more close-up scenes that highlight the foreground image by blurring the borders.
The four pillars are laid out further down the page with overlays that briefly explain their importance, and a link to more, such as for “Mind” which goes to the Academics landing page, an excellent example of a page that continues to tell the story, while guiding users to individual divisions and sharing some key stats and information.
Likewise, the “Heart” page takes us to Service and Missions, which brings us closer to how the school connects students to the community, bound by a greater purpose. Finally, and on a practical level, TCA assembled an excellent “Re-opening Plan” hub, which is a textbook example of how to maximize the publishing tools in Composer to share everything from downloads to links to back-to-school protocols.
Prior Park College | England
Aside from the stunning photography of this nearly 200+ year independent school situated atop a hill with breathtaking views of Bath, England, this new website is a case study in information architecture (IA). Top left off the homepage we see the simple but elegant logo, including a short statement of who they serve; top right are critical utility links: Current Parents, Calendar, Contact Us and Search; short links to the two associated schools with their color-coded logos; and a hamburger menu that slides open a handy menu to navigate the site; and finally three entry points on the left hand side by grade, all above the desktop fold. This means a visitor can cut a path through most any part of the site before scrolling. But there’s more to the IA: just below the hero image is a very clear call-to-action to hear from the headmaster, then a convenient set of four boxes (with excellent examples of high quality thumbnails).
The news area below features one item, which makes sense if our goal is to just give homepage viewers a taste, though it’s hard not to get distracted by the amazing inline drone video that will tempt any prospective student to come visit.
The design and content keep on giving, subtle and underplayed enough to avoid feeling overwhelmed. There are testimonials, but just one at a time. A second set of image-based buttons for programs appear toward the bottom, which is an interesting choice to split them from those higher up the page. This works because it’s much easier to process four of something than eight. The footer is clean and unassuming, a nice finish to a beautiful website.
School District 197 | Minnesota
When the “no scroll” rule got blown up by smart phones and screen dimensions that drove designers batty, websites suddenly grew taller, or longer, or both. But with the ISD 197 launch, a district in Minnesota with eight schools and more than 5000 students, there’s no scrolling at all on the homepage, and barely on a device. So what? Well, the acknowledgement is simple: users are on their way somewhere else when they get to the homepage, so keep everything within tap or a click, but not a swipe or a scroll. This is not to say that there aren’t significant virtues in homepages that tell a story top to bottom, but if you’re going to save that for the rest of the site, it makes sense to limit what the homepage is doing. Less to worry about, after all.
The school homepages mirror the district’s, keeping the experience consistent throughout. The reds and grays of the district brand are sharp, and site editors are doing a nice job of taking advantage of the Composer library of elements, such as the accordions on the Gifts & Talented page or the layout elements to create a simple grid of resources. One page that serves a pleasant visual jolt was the hero image on the Employment page, which is actually a fine piece of artwork that tops the page.
Mill Springs Academy | Georgia
There’s something very easy about the new Mill Springs Academy website. Maybe it starts with the logo, with its three rooted plants growing at different heights and a bird in flight. Or maybe it’s the subtlest of hover states for each menu item, where the plant re-appears, its topmost leaf incidentally pointing to the navigational item you’ve selected. The narrowest, thinnest of gray rules surround Quicklinks, My Mustang and Search — just enough to hold them in place. A uniform, heavier sans-serif typeface makes it way from top-to-bottom; easy and clear. There are four infographics, not eight or twelve, with no prompt for more. There are three testimonials, not ten. And at the bottom, the calls to action are numbered — a forehead smacking epiphany for me at least that it’s really that easy to tell prospective families how Mill Springs wants things to happen: first you inquire, then you visit, and then you apply. All this is to say that this website is a superior example of “less is more”, reassuring, like a pat on the back.
Misericordia University | Pennsylvania
“It Starts at the Arch” is a strong lead-in to a beautiful new website for Misericordia, a private University in Pennsylvania. The homepage has lots to offer, but this site is an excellent example of ways to approach navigation for a college. For one, the Find it Fast, top left, is more than just a search, but an overlay with all sorts of helpful information, links and resources. One sticky navigation item, “Inquire”, shrinks as you scroll, but is always handy on the right. The Academics panel, with a grid of the University’s three Colleges and Programs, breaks things down intuitively for prospective college applicants who are trying to sort through their options quickly. Animated infographics, just below, never really grow old since watching numbers climb is somehow reassuring.
The storytelling continues as you scroll, stopping at a very smart prompt: “See Yourself at Misericordia University.” The College of Arts and Sciences brings together a similar collection of content elements, geared toward the students needing to learn more -- this approach means a consistent user experience, designed toward serving up just enough of the right information to encourage prospects to take a next step.
Mentone Girls’ Grammar | Australia
Always nice to see a new custom-designed theme launch, in this case for an all-girls school in Australia. The School did an excellent job of laying in photography, right-sized content for the predefined areas, and a style guide that is clearly branded and tailored to the school, all with the advantages of an affordable price point and abbreviated discovery timeline to make the process easier. Interior pages like the Junior School, bring together helpful information, but connect that with infographics and video to bring it to life; the “Book an Online Chat” embeds a form in an accordion treatment at the bottom, a nice example of how flexible the layout and page elements are for creative schools like Mentone to use.
Maclay School | Florida
It’s hard not to be inspired by one of the core homepage messages: “Be Unstoppable” for this PreK-12 day school in Tallahassee, Florida. In addition to a well-developed homepage that lays out the story panel by panel, interior pages like the Maclay Advantage take the time to spell it out, leveraging a two column layout with alternating colors to explain a value for each letter of the school’s name. Divisional landing pages, such as for the Upper School, flex Composer’s muscles with a broad range of design features and layouts to enhance how the school talks about its programmatic distinctions, unique academic concentrations, and the overall student experience. Even pages like Character Education are rich with content and well-developed summaries of what Maclay offers. Excellent site all the way through.
Rye Country Day School | Connecticut
After “RCDS: A Community of Learners” across the opening image comes “Why Do Students Choose RCDS?” Since the School knows this is the fundamental question, may as well as state it and put forth a strong answer. RCDS does that with video, but not just any video -- clips that include the School educating during the pandemic (RCDS@home), with Zoom shots of kids dancing and communicating one on one with teachers. A smart move for appreciating what parents need to understand right now. This day school website has some really nice interiors.
The Lower School landing page, for instance, blends a one-column video, with two column content areas, a tabbed element, an accordion element, and blocks that are perfectly sized for their content. The page feels complete as much as it is a good example of sharp user-centered design using the array of tools available within Composer, Finalsite’s content management system.
Likewise, their Signature Initiatives page showcases a wide range of offerings and unique programs at RCDS in a convenient image grid with nice hover states. Lots to explore on this site.
Tacoma Public Schools is large: 36 elementary and pre-schools, 12 middle schools and 11 high schools serving around 30,000 students. But zero-ing in on any one school is simple, via the “Schools” menu, which leads to any of one of the 50 or so sites that the district can distribute site management to, while also maintaining a consistent design and architecture. This translates to a more seamless user experience for parents, prospective employees and residents alike. Practical but very important pages, like Jobs present a lot of information while not overwhelming the user. An informed approach to layouts help, too, particularly for pages like the Nutrition page, which combines a map, contact information and meal plan information, or the Safety and Security page, which integrates video, multiple blocks of content and key resources into one easy-to-use area. Individual school pages each have their own unique identity as well as content, providing a one-stop-shop at every level.
There’s no messaging on Malvern Prep’s homepage, at least initially. A blue shape leans in from the left as if tipping both the page and the user to start scrolling down to learn more, or to watch the quick video snippets that capture the school in motion. The panel below the video tells the school’s story quickly: “an independent, Augustinian school for young men in grades six through twelve”, bracketed by parenthetically-shaped branches of leaves, which seems to elevate the language. With the proverbial table set, the panel below lays out three compelling next steps: student testimonials, Experience Malvern, and Augustinian Identity, which explains the foundational values, history and beliefs. Animated quick facts follow -- with a seeming bounce on hover that’s entertaining enough to repeat -- and a well-laid out display of news items to keep the site current. At last, the final call-to-action, “Get In Touch” picks up the animated lean-to, bringing the button to life in a way that urges you on. There’s a lot to see here: the Student Life landing page drops you into four buckets, conveniently broad enough to pique anyone’s interest while the Global Programming page is filled with ample information, images and program overviews, all designed in a way that makes the content accessible and easy to digest.
The Oakridge School | Texas
Stumbling upon a zoom-based video of the school song on the Mission and Philosophy page stopped me in my tracks; here on a cornerstone web page Oakridge decided to tackle one of the thorniest of challenges related to the coronavirus: how to maintain the spirit and energy of a school. COVID-19 is here to stay, and seeing how schools contend with this fact -- outside of the steady drumbeat of back-to-school protocols and planning slide decks — has been an interesting, real-time test in how quickly an institution like a school can move from reacting to acting; having this video on the mission page is a great example of making the most of the situation. Oakridge stands on a platform of three keywords, front and center on the homepage: “Excel”, “Lead” and “Perform” followed by entry points to testimonials from faculty, students, parents, alumni and the community. These video clips nested throughout the site bring authenticity and meaning to the words, another example of a school that has figured out how to share its story.
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.