Hot, hot, hot. That’s what July has been, and I’m not talking about the weather, but websites. The gears are moving too quickly to even see here at Finalsite, launching websites fast, furiously, and on time for a big launch in preparation for the new school year.
There are lots of beautiful custom sites and Theme Design sites alike, so sit back in your air-conditioned office with that lemon-infused ice tea, stop thinking about your to-do list for a few moments, and get inspired with some great website launches from Finalsite!
If you’re ranked by US News and World Reports as one of the outstanding high schools in the country, your website ought to walk the walk, too. And Verdugo Hills does just that with its launch. The site opens with a compelling cross-section of video clips — a basket rolling through the net in what appears to be a winning shot; a drone shot of the campus, tucked in the foothills; a common brigade of kids in a hallway; robotics; a band on a stage; and cheerleaders — it’s hard not to find something you’d like to do. In some ways, all of these shots combine to provide a sense of normalcy — that Verdugo HS means what it says. The foundation, then, is captured in the word “PASSION”, which is wrapped up into three core tenants: STEM, Academy, and VAPA — all of which you can learn about on the homepage, and each of which is branded accordingly, providing a unique sense of collective identity.
Even though each of these items makes its way into most schools’ programs, there’s a feeling that Verdugo has also figured out the “secret sauce” to educating students by combining them all. Meanwhile, the red and white provide a nice dynamic contrast throughout the website, with occasional soft angles to break up the perpendiculars. The site translation is handled by Weglot, Finalsite’s preferred partner, providing non-English speakers a simple way to move between English and Spanish. And on a practical note, the calendar is color coded and categorized, a nice implementation of the Finalsite Calendar module for providing robust functionality around filtering, reminders, and subscriptions, too.
“Discover. Experience. Succeed.” That’s the three-step process at the Salisbury School, a small independent school in Salisbury, MD on the eastern shore of the Chesapeake Bay. Since 100 percent of their graduates are accepted into college, that seems to be a formula that’s working. And if that data point isn’t enough, the interactive “Voices” panel, represented by a cross-section of students, alumni, and parents hammers the point home through short testimonials.
Little green flags that hang unobtrusively on the side inherit the sharp angles and brand of the site, core calls-to-action for the prospective family or donor ready to make a move. This website is also a good example of keeping things simple and manageable in terms of size and scope while providing enough information for users to get what they need. For example, interior pages like The Educational Foundation are well developed, using multiple columns and collapsible content elements to share a lot of information without being overwhelming. Parent Experiences is also a nice solution for orienting families who are new to the school and want to get a feel for what’s ahead. Coming from overseas? No problem — there’s an entire page just for you.
Things go from slow to fast quickly in the opening video on the new website for Moreau Catholic High School in Hayward, CA. It’s hard to decide which speed is most interesting, too, but fire flaming out from someone’s hand, kids fanning out joyfully in a welcome parade, or a laser engraver making quick passes — all rise to the top. These bits are just strong teasers for a school that headlines its value proposition with “Compassionate College Prep”, an interesting combination of words that marries a key value with the more traditional independent school outcome.
The homepage panels showcase great examples of self-contained narratives that each help guide the visitor through to the next step. For instance, the Academic Excellence panel has both a “Learn More” button as well as a previous and forward arrow to loop through pictures, and nearby, several options are available to visitors to move down the funnel to inquire or take a tour. Nice interior treatments, such as Ministry, continue to build the case for enrolling, in this case providing a half dozen image-based buttons that allow users to explore, be it liturgical life or musical ministry. All of this, of course, is easily edited and built using Finalsite’s content management system, Composer, which combines page and element-level layout functionality to build multi-column pages easily for different kinds of content. Even more functional pages like the Media Relations page are quick to consume, with key resources, contacts, and related information all in one efficiently designed page.
“Excellence” is literally part of this district’s name, bumped up close to Mesquite and colored gold. This is a tall order for a large district with dozens of schools, as it is for their new website, which rises to the occasion. Navigation on a large district site is challenge number one, but the site architecture is intuitive and the user experience is smooth — the Schools drop-down makes every school easily accessible through a multi-column format and simple headers for elementary, middle, and high schools; meanwhile, Find it Fast reveals a deep blue overlay with search, icon-based quicklinks and curated sets of links by audience: Staff, Community, Students, and Families. Site translation high up top offers a bilingual option in Spanish, an important convenience for districts, particularly in Texas. A gold-plated sticky nav on the right offers convenient access to utilities, the Portal, the Skyward student information system, and calendars.
For such a large district, an enterprise solution like Finalsite is critical, allowing individual schools, like Horn High School, to make up their own minds about navigation, color, and content. A deep permissions-based system behind the scenes allows for careful but efficient editorial control over the entire website to ensure that updates can happen as quickly as possible while maintaining coherence across thousands and thousands of pages. Excellence indeed!
When a cat pops in and out of nowhere on a school website, you can’t help but take notice; and it’s a heck of an incentive to keep scrolling, too. A small thought balloon, containing just a “?” sits above its head, which of course is enticing as it is unexpected. This website, launched for Alexandra College in Dublin, has an incredibly beautiful design, too, which makes the cat even more out of place, yet adds moments of levity that make the whole experience more engaging. It’s like walking into a football match and having the mascot come sit next to you — you can’t help but feel special. This school gets what might appeal to kids just as they do with their parents, and both are well-accommodated digitally here, too. And it’s not just the cat, either, that makes the site fun — there are splotches of yellow on the red as if someone forgot to wash their brush while scrolling through the website, and a small dotted path that ambles across the screen, a path that implies discovery not necessarily reaching a destination.
Terrific shots for Junior, Senior and Boarding programs provide introductory images to click on for more, animated with clean, semi-transparent rollovers that offer some details. The Areas of Excellence panel is worth a stop, too, even if to check out the school emblem close up, and watch as each component of it pops as you explore each area; the artwork associated with each on the left is a creative splurge of color and creativity, providing a sense of an underlying focus on the arts. Meanwhile, the central CTA, “Explore” leads to a landing page just as impressive as the homepage, headlined by “My Alex”. Values and “Living a Good Life” jump off the page in the form of big images and type, with enough text for the page to feel substantive. The cat, by the way, doesn’t just live on the homepage, as if it wants to join you and chime in from time to time. “Hi,” it says, “I'm sure you're curious about who I am and why I'm here!” Once you click on that, the game begins, leading to a final thought: “Cats are curious, and I am no exception. I will open your mind, your heart, your soul, and your innovative self and enable you to become a woman to be reckoned with.”
“Men and Women for Others”. That’s pretty much all the words there are to read when you first arrive at the new website for Brebeuf Jesuit, the only Catholic, Jesuit high school in Indiana, with over 800 students. And if you’re already curious about the name, visit the About page which provides a nice profile as well as a short history of both school and patron. The homepage delivers a nice and easy user experience, with oversized images that seem to breathe on the page, and big photos and content blocks that stretch to the grid in a way that keeps the layouts open. Six large squares finish the homepage, a montage of social media posts and school news through Finalsite Feeds, which provides moderation and management in an easy-to-use interface for administrators. This grid design also becomes a nice component for other areas of the site, an example of how Composer, Finalsite’s content management system, creates a set of reusable parts that can be customized for different purposes.
In the case of the Visit Brebeuf page, for instance, the grid provides six different ways to get to know the school, a perfect set of options for parents who may be uncertain where to start. Other pages, like the more nuts-and-bolts FAQ, leverage Finalsite Posts to share a slew of common questions that use a lightbox to share the answer. And if you can’t find what you’re looking for, a magnifying glass at the top opens a small search window with quicklinks and search options, compactly designed and easy to use.
It’s not until you scroll to the bottom do you really get a feel for the spectrum and variety of what bright colors and shapes can do for one’s impression of a school. Bright triangles, apportioned in unequal sizes and positions like a stained glass window, or a geodesic dome that’s been unraveled, hold up the bottom of the website with an array of reds, yellows, blues, and greens, colors that are picked up by the small sticky nav on the right-hand side to inquire, learn more and make a donation.
Swift is a school specializing in dyslexia with a unique approach known as the “The Swift Effect”, which is “not magic and yet it is magical.” This unique pedagogy is one way to understand Swift, but a nicely developed “Get to Know Swift” page brings everything you might want to know in a sort of A-to-Z guide, with expandable content blocks to pick up details on everything from the nurse’s clinic to technology. Similarly, as a nationally-recognized leader in education for dyslexic students, the resources page provides a comprehensive and organized set of lists for parents trying to dig up more. Current constituents can access password-protected content in the MySwift Portal, while the Calendar, linked from the top, is a user-friendly way to see what’s ahead, using the best of Finalsite Calendars to access different calendar views, filters, and subscription options.
Ten things out of the gate: for a large district with 22 schools, the drop-down to access them works well, organized by divisions and programs. Second, the horizontal bar of icons makes for quick work to get to mission-critical information: bell schedule, food service, transportation, and the like. Third, a simple translation accessed from the main menu makes it easy to swap out English for five others, using the superior translation service of Weglot, Finalsite’s preferred partner. Fourth, any menu whose name is “I want to…” definitely takes a user-first mentality, providing a short list of top items: Find A School or Find a Form.
Fifth: the jointly designed news and calendar combo help show current events and latest happenings in a compact format, with buttons to get to more events and also a huge button for a printable calendar (and let’s face it, that’s one quick way to a parent’s heart). Sixth, the individual school sites, such as Rippowan Middle School pick up the design of the district but with colors, content, and images all their own, a controlled autonomy that makes sense. Seventh: simple but important pages like the 2022-2027 Strategic Plan share with the community the district’s long-term plans. Eighth: “Excellence is the Point” is a pretty solid tagline. Ninth: having a list of community partners linked directly from the footer is a smart public relations strategy that makes the most of the website. And finally: the embedded functionality used for the School Lookup is a perfect example of integrating a third-party technology directly within the website to help parents figure out where they should be registering.
It’s always nice to see a unique twist on homepage videos — just when you thought there wasn’t another way to skin the proverbial cat, Second Baptist uses some simple transition effects to make their string of clips even more interesting, all supporting their key directive: “Think. Live. Lead.” Then, adverbs take a seat, popping next to each word with one swipe downward: “Think Critically. Live Biblically. Lead Courageously.” It’s as if the goal of the site is to help narrow the focus, one step at a time. Further down, the words are put into action with compelling news stories and social media posts, all powered with Finalsite Feeds which helps administrators moderate and curate what gets posted from various channels. Second Baptist, serving grades PK3 - 12 in Houston, has a lot to offer, so landing pages become an essential ingredient, such as the one for Academics which combines infographics, a directory, a short blurb of content, and video to capture the attention.
Other important pages, like the After School Program, share a lot of content but through accordion elements, which help keep the page from feeling too overwhelming. Most importantly, perhaps, Discover SBS, is a landing page that wows the user with beautiful imagery, a nicely designed, interactive admissions timeline that spells out each step in a very simple way, a calendar of upcoming events, and more. Naturally, pages like Tuition are critical, but SBS spells out value and affordability first before sharing hard numbers in a nicely-crafted grid, a strategically smart way to set the stage for a meaningful conversation. And pages like Welcome are beautifully crafted. Ready to visit? This excellent contact page has everything you need, including an interactive aerial map of the facilities.
One place to start with is the new Benilde-St. Margaret’s website is directly on the community page, which will tell you what block today is (Block Odd Day); when school is open; a few upcoming events; provide quick access to Facebook, Instagram, YouTube, and Twitter; share a handy list of links to related resources, and provide six convenient starting points to learn more about this private Catholic school serving grades 7-12. It’s these kinds of pages that — when set up correctly — create a nice view into school life for prospective families as much as a convenient one for current students and parents.
Naturally, the homepage is just as good a place to start, too. Backgrounds and headers dressed in red, as well as a sticky nav on the right match the uniformed students who all just seem to be right on brand with their sweatshirts, jerseys, and the like; even the chairs they’re sitting in are red. Embedded on the homepage is their Instagram feed, which features a daily prayer and is served up automatically through Finalsite Feeds. Navigation is easy and efficient, using large mega navigation with two columns of links and a featured image, masked in the shape of the school shield. For those busy families who can’t seem to find a time to visit in person in the near future, the Campus page is a good place to start, with hot spots that link to images of each building, as well as some high-definition 360 interactive videos to immerse yourself in the space.
“Stand Strong” sits in all block letters, small, but surrounded by a heavy border — stamped almost, perhaps an embroidered mantra stitched directly on the website. But then those words appear huge, taking a sizable chunk of the homepage, two words that dissolve in as a movie credit might. These are two words that certainly resonate if you’re a Strong Rock Christian School based in Locust Grove, GA, a school that’s young by comparison to most schools, founded in 2007, but yet no small enterprise with 900 students.
The infographics further down the page highlight one critical number to their purpose: “1 mission to serve God.” In this way, Strong Rock Christian School uses the homepage to make it clear what kind of prospective families they’re trying to reach. Website visitors coming to the site can make an easy choice to visit one of four main pillars, each initialed with an “I” and a relevant icon — academics, fine arts, athletics, and finally, Missions — all headlined with “Distinctively Strong Rock” and topped with the illustration of what appears to be one mountain in front of another, a parent or teacher bringing up its youth. Many of the landing pages, like Missions, contain their own video, an excellent way to engage the user without leaving the site or having to navigate multiple pages.
There are many nice things about the new site for Sidney City Schools, a district of 3,300 PreK-12 students in Ohio, and one of them is that the hero image is made up of news stories. We’ve learned time and again that this can be a risky gamble — both to find the right stories and images to fit the space, not to mention keeping it updated. At least for now, Sidney seems to have done a great job with all three: “Heave Ho” features a classic tug-o-war scene; “Congratulations” honors the graduating class; “We are Sidney” shows an intimidating football team marching toward the camera; and “Hello, Seniors” tosses a welcoming shout-out to the incoming class of 2023. This is a perfect mix of news content, a strategic selection that allows the district some breathing room by using stories that won’t date themselves too quickly and can be swapped out intermittently when the time is right. Leveraging the technology of Finalsite Posts, the district can also expire and tee up new stories as they happen, allowing for careful scheduling of what gets published.
In terms of design, there’s no doubting the yellow and black district colors, the combination wrapping the tail of the “S” in the logo like a snake or the body of a bumble bee. The hamburger menu and separate schools menu are unconventionally set up top left (and conveniently next to a translation button, too), but that makes for quick access, the former opening a full-screen overlay draped in dark gray and yellow of four navigational areas, and the latter linking to the individual school pages instead of releasing a drop-down menu. The strategic use of homepage news is just one example of well-considered pages, including a terrific page welcoming new families — you can almost hear all the questions getting immediately answered. Other pages, like School Meals, are dense with content, but in a good way, leaving even the user who doesn’t have time to read it all a sense that when it’s time to get the low down on lunch there’s only one page worth visiting.
“G” sure is for “Green” in the logo for Green Local Schools, a small district of five schools in Ohio — meaning, it’s big and oval and gets its point across. And aside from that clear brand, the site also manages to use just enough black and just enough orange such that you get the district colors but don’t feel them hammering down on the experience. Weglot, Finalsite’s partner for website translation, and AudioEye, Finalsite’s partner for accessibility, send a clear message that the district has prioritized its visitors and ensured that the greatest number of users can have the best experience.
Some stunning hero images greet you, particularly — and unusually — the group shots of students, such as Band, which has dozens of players tightly lined up in an array that is so neatly arranged you could almost mistake it for a piece of art. Other uniform patterns — theater camp, an athletic shot — are equally strong, not just for the wash of light blue or black but for a sense of community among students, exuberant with school pride. The website is rich with information, such as the Board of Education area, which, let’s face it, isn’t always the most exciting stuff to peruse but as a matter of best practice, this landing page is a good one — with general information, an upcoming calendar (with subscription and alert options built right in), a list of the members, and a sub-navigation on the left to get to more. Individual school sites pick up the design, each a self-contained but matching subsite with unique logos, colors, content, and navigation — allowing autonomy with site management but broader oversight from the district.
If you have children, and specifically sons, then it won’t be hard for you to get stuck watching the opening video on the new McCallie School website, which is a striking collection of boys-becoming-men footage combined with a slew of creative framing techniques that mix up speed, angle, lighting, and focus. There’s simply no way to capture everything that a school like McCallie has to offer, but this video is about as good as it gets in its 60-second or so attempt. Beautiful panels of refined designs stack like a wall of framed art in a gallery, laid out with a nod to the particulars: comfortable margins, simple sans serif typography, and big pictures full of faces. The visuals become practical at the bottom, where you can find a footer with all you need: curated buckets of links, social media, a call to donate, accreditations, and contact information, packed tight enough to fit on one screen, but not so tight that it’s overwhelming.
Landing pages, like the Boarding Experience, pick up on this reserved and tasteful sensibility, with alternating content and image blocks separated by a thin rule with the letter “M” splitting them up — this flexibility is signature to Finalsite’s CMS Composer, which makes it easy to build unique pages with both layout options and content elements. College Counseling is another example of maximizing the page — with a full-width ticker tape of recent college acceptances, a two-column section with a single image and content followed by a one-column area for a nice testimonial, an accordion element to hold all of the key information, and then a grid of the college advisors. In this way, pages like these have it all but don’t feel difficult or offputting. Meanwhile, McCallie Summer Camps is an entirely different website in terms of design, navigation, content, and audience, but is still powered by the same instance of the Finalsite platform, an excellent demonstration of how versatile the solution can be.
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.