If anyone wondered if Finalsite takes a deep breath when schools wind down for the summer — think again. I’ve had to tally the number of June launches three times because I kept losing count. Sixteen custom design sites, all knock-your-socks-off, and 62 (yes, six-two) theme launches, all in a month. Bring it on Deployment!
Logo and brand message connect smoothly in the new Paradise Valley ISD website — logo, in that it’s a series of stepping stones making a curved line, the epitome of a path from and toward a destination; and message, in that “A Journey of Excellence” headlines all of the featured homepage stories. Then there’s a surprising jolt of yellow-orange when two older students appear dancing above the fold (and one can only wish to hear the music that was playing during the photoshoot) — but this is just one of many moments when kids are surrounded by a solid background of bright colors, including greens and blues, the same colors — coincidence aside — that match the stepping stones in the logo. This photo effect is an interesting one, removing all the noise of a campus scene or classroom, and focusing just on the emotion and expression of the student, which seems to pop off the screen.
A terrific “Find It Fast” is available in the top menu bar, triggering a full-screen overlay that includes a big, illustrated search button for access to common links, and then some quick links intuitively grouped by audience and type. The AudioEye toolbar ensures an accessible website following WCAG 2.0 guidelines, including front-facing tools to adjust contrast, text size, and enable screen reading. A nice implementation of Finalsite Calendar Manager is worth checking out, chock full of functionality, including subscription options, filters, downloads, and event reminders. If you were a parent here, you’d have a tough time not staying tuned to the latest.
The new website design for Marymount is lovely — lovely in a clean, elegant sort of way; lovely in a tempered use of animation and visual effects sort of way; and in the intentional use of deep contrasting blues and blocks of white; and in the associated use of pastels for those important elements that need to be called out. But there’s more than just lovely here. Take the “At A Glance” panel halfway down the homepage. Each block has its own behavior, as if to say the value it places on the individual is even exemplified in the eight blocks of information — a few with sequential backs and forths to move between key data points; a few with subtle hover states; and a few that pull from Instagram and the news.
It’s a perfectly compact amalgamation of marketing content and bits of authentic stories. Student voices, further down, reminds us that video is king, particularly when you’ve got some great things to shoot like Marymount, which introduces students in a non-conforming grid that plays in a full lightbox, a simple way to poke around without getting further entrenched in the site. The footer of the site is a good example of how to effectively group contact information, useful links, and language translation, powered by Weglot, one of Finalsite’s preferred partners. For a homepage this good, naturally the interior needs to deliver just as well, and pages like the Early Childhood Center remind us of what that means, with collapsible content, big pictures, succinct content, a testimonial, welcoming staff pictures, and calls-to-action to help the prospective parent dig further into the grade and area that makes sense. Easy-to-complete forms such as on the Live Virtual Tour page ensure parents can easily jump right into the funnel-like a child might set off down a sliding board.
Ok, so there are websites, and then there are websites, and then there’s the new site for Culver Academies. Holy launch, Batman! And knowing that so much great work already comes out of Finalsite’s Deployment Department, this site makes you wonder if there was something special in the Jamba Juice for designers and front-end developers with this one. For one, the homepage is akin to an interactive, high-end movie trailer, with all the energetic, if not frenetic, visual pizzazz that is strung together in a narrative told by jaw-dropping video and pictures that keeps going and going, and going…After all, the Culver Academies story is big, with an all-boys military academy, a girls academy, a large summer program — and over a century of history on a 1,600-acre campus in Culver, Indiana.
Every page is a small work of art — if you happened to make the mistake of skipping through the homepage, onto, say, the At a Glance page, you’d see the rich burgundies and golds playing out in accordion treatments (that is, if you make it past the breathtaking full-screen images that open up the page), the unique inclusion of the military service mark as both a demarcation for text, panels, and columns, and lastly the enormous images that double as calls-to-action to inquire and to visit. As big and bold as everything is, none of it is overly aggressive — in fact, the opposite. While the site is almost sensual as much as it is beautiful, it is also quite serious but without being aloof, much like its matter-of-fact vision: “Lead the world in whole-person education.” But back to the homepage: the carved typography, such as used for the header “Thinking critically and acting positively” is a novel choice, stately and somehow architecturally appropriate, perhaps in how it picks up the line drawing of a stained glass arch. And all of this sits on top of a deep red leathery textured background, which makes everything pop.
The parallax effect on the site starts early and remains an integral part of the full Culver “reveal,” a story that is unified in ideals and values, but split into two academies that each bring its best. Then, out of nowhere, a full-screen video stops the show, full of horses, stable shots, and tracks, as if the school has so much to offer, its best bet was to focus on just one area of specialization. In a bit of programming scroll jacking, we’re introduced to a number of students, followed below by a question: “What makes you a leader?” If a prospective family hasn’t already inquired by now, the individual landing pages, such as for the Academy, are full and intricately designed, with well-written content and sharp imagery. Even the interview page sets the standard for best practice, supplying the options for reaching out through alternating pictures and easy-to-read headers — they really can’t make it easier to get in touch. With a $500M+ endowment, Culver Academies is also uniquely positioned to offer a wide range of scholarships and lots of possibilities to make boarding affordable.
Who wouldn’t click on “Foggy Day?” in the top navigation of a school website? Spoiler alert: it’s exactly what it sounds like, but it’s a good reminder that websites should be made of pliable material, molded to the audience in a way that is practical and makes sense — for the East Coasters in the room, living in a foggy area may not be as common as when you live in Kingsburg, CA. While we’re on the nuts and bolts theme, practical icon-based buttons are well designed with links to calendars, news, and, of course, lunch (because let’s face it, is there anything more important to a student and parent in elementary school?), which hang unobtrusively on the right, ready for the picking.
The homepage also happens to be a terrific example of the layout options in Composer, Finalsite’s content management system, which opens with one column for the full video, to a narrow-wide two-column for the philosophy statement, back to a four-column panel for key programs and notables, then to a six-column for quick links to each of the schools in the district, back to a two-column — which itself describes each school and also contains a three-column content element within the right column. Can’t follow all that? Give this site a good surf with that in mind because it all just rolls out in front of you, red carpet style. The site also features a convenient Spanish translation through a bottom right menu, leveraging Weglot, Finalsite’s preferred partner for language translation. The district did a particularly good job carrying over the design into each of the school sites, such as for Rafer Johnson Junior High School, tailoring it with unique colors, photography, and content while also maintaining a sense of coherence site-wide.
Oh, to be a student at Pacific Ridge, jumping in the air, with snow-capped mountains and lots of friends right next to you! That’s what the school calls “Excellence Through Challenge” but some of us also call that “fun,” which is exactly the tightrope one wants to walk when it comes to education these days. The right side buttons make it easy to start right down that road — Inquire, Visit, Apply — which is predominantly what we want to encourage at this point in the parent journey. Things get even more interesting when you start to scroll, the logo twisting slightly, reminiscent of a windmill, or an eddy in the water — perhaps the latter if for no other reason than the blended shades of blue and the various arcs that shape each panel. Speaking of which, the blues play an active role throughout, such as a transparent overlay on hover for each of the six vertical panels that follow the animated “Experience Pacific Ridge” headline. These sorts of effects create a cohesion to the design, augmented by various downward-pointing arrows that invited you in a little closer to the school. But it’s at that point that yellow springs out of nowhere, a surprise burst of sunlight that makes it nearly impossible not to stop and jump into what’s there - testimonials of students doing all sorts of things, including fabricating robotic arms.
A tic-tac-toe board of numbers playfully tempts you to poke around and see what’s underneath, while the day-to-day of the Firebirds comes to life with a nice carousel of Instagram posts, powered by Finalsite Feeds. Pacific Ridge, aptly named, naturally has a tremendous Global Programs offering, sending kids from all age groups in a finely tuned educational progression, particularly in grades 11 and 12 when over twenty (yes, count them) travel courses are offered, from Nairobi to Greece. However, when you peruse all the on-campus clubs that are offered, it must be just as hard to leave.
For lack of better words, there’s something just rock-solid about the new website for Grosse Pointe Academy, a coed independent school near Detroit (20 minutes from downtown, in fact, as I easily learned from the embedded map on their homepage), serving students 2 ½ years old - grade eight. Perhaps it’s all of that navy blue, not just in the design, but in nearly every photo, vis-a-vis polo shirts, sweaters, and vests. Could also be the stocky logo, firmly set up against a winged GPA, with “Academy” sized proportionally larger and at the same width as Grosse Pointe. It may also be the offset “Discover” block that launches a video, or the compatible blues that sit above and below various elements, augmented by yellow buttons, arrows, text, and lines. Whatever it is — the balance of unique design enhancements, a firm design grid holding everything in alignment, or beautiful pictures and well-written content — all of it helps tell a great story for this school.
The footer is big and useful, organized carefully and in a way that makes it immediately accessible, not a trivial task for a designer. Key interior landing pages, such as for Lower School, present themselves just as professionally, lacing together expandable curriculum blocks, big yellow buttons to learn more, an image-based grid of “Specials,” and clear next steps toward the bottom, such as a prompt to ask a question. These all-in-one pages simplify the journey for prospective parents who may otherwise miss pages tucked away in a deep navigation. Speaking of which, this "ask a question" page is a nice example of how to keep a form simple using Finalsite Forms, while supplementing the page with appropriate imagery and text — just lots of thoughtful touches like that throughout this site.
When a school district unleashes the full creative power that Finalsite has to offer in a best-in-class redesign, there’s lots to take note. One place to start with a great district website is the navigation, which for DASD begins with a narrow blue vertical strip on the right combined with an obvious hamburger menu (kindly labeled “menu”), and five icons below, each with a bright yellow flag that operates as a hover state and wayfinding device. The schools menu is equally kind, a clean layout with a bucket for elementary, middle, high school, and K-12, set against slight variations of a blue-gray that makes the school names pop. Similarly, Find it Fast slides open a highly functional, multi-column overlay that sets Search at the top, with three groups of quick links; it’d be hard not to find what you need in one click or less. The nuances of user experience and design are considerable when accounting for scrolling, but for the DASD website, the transformation of the header is barely noticeable — the icons invert their color; the hamburger menu tucks itself up to the corner, and the district logo disappears in place of its name. Even in the footer - a compact utility of district details, social media links, a school search, and a dozen useful links - is easy to absorb, and if all else fails the “Back to Top” shuttles you back to square one.
From an accessibility standpoint, the Audio Eye toolbar is ever-present, giving DASD peace of mind that not only are front-end accessibility tools available to help its users but behind-the-scenes issues are being continuously checked and corrected. The district has also managed to roll out the district design to each of the schools, such as for Springton Manor Elementary School, which employs the same overall structure, but with completely different content, images and sub-navigation. With Composer, Finalsite’s content management system in place, the District can easily set permissions so that this overarching, coherent design remains while empowering administrators to update pages, news, and content within their school. Is the website so good that you’re thinking about working there? A great employment page makes that even easier.
Outside of the full-screen video, there are just two elements on the opening screen for the new homepage of University School of Jackson — the logo and the hamburger navigation. This means that there are only two things a user can do: scroll down or open the navigation. To the first, a huge blanket of red takes over with these words: Standard of Excellence. It’s an interesting twist on a common approach — not necessarily a brand message or a tagline, but a directive. The website reinforces this statement in various ways — infographics with impressive stats; an ambitious five-year strategic plan; and a “Portrait of a Bruin” which outlines the core values expected from and instilled in every student. And to the latter — the navigation — a partial deep gray overlay holds the full sitewide navigation, with calls-to-action to apply, visit and discover USJ.
Pages like Careers invite prospective faculty and staff to dig in further, but also happen to showcase Composer, Finalsite’s CMS, very well — with multiple columns, images, and even a form to apply. Similarly, History and Traditions use the school colors in alternating blocks to share a slew of unique experiences that are time-tested and help enrich a sense of community, which has had over fifty years to solidify. It’s also nice to see how the website administrator is deploying Finalsite Calendars on pages like the Arts, which shows relevant events for that section, yet only need to be edited in one place, providing a convenience for users and saving time behind the scenes.
In the opening shot of the video on the lovely new St. John’s website, a young student processes — with students, singing, flanking each side — straight toward you bearing a tall flag, as if she might bump right into you — and as soon as you start to step aside, the shot changes to the same student speaking from a lectern. These shots and others in the montage reinforce the School’s core brand message of “cultivating a sense of joy and belonging.” St. John’s, an infant to grade 8 school in Rancho Santa Margarita, California, just needs this website to tell that story, and they successfully capture it in multiple ways: through crystal clear statements like “You Belong Here” and authentic testimonials. Calls-to-action from the homepage lead to well-developed pages like the Inquire page, which provides a convenient overview of the School’s important Episcopal identity, succinct summaries of each key entry point, Early Childhood, Elementary, and Middle, buttons to schedule a tour and learn more, and pictures of the admissions staff. All together, pages like these, filled with bright images of engaged students and teachers, continue the warm greeting of the homepage and draw you in. The hamburger navigation is nicely tucked away, but springs open to a full overlay of intuitive groupings, an accessible search and utility links. Speaking of which, Give sits as one of those utility links leading to an excellent page that makes the case while explaining all the ways someone can give back.
Monterey COE, based in Salinas, CA is a critical resource that serves families and districts alike and provides leadership, support, and service to over 75,000 students and over 11,000 school staff members across 135 schools. In short, they have a big job to do every day, which is why the website is so important to their organization. The new website launch is a clean design that puts navigation and content first, organizing the primary navigation largely around constituents (Districts, Educators, Families, and Communities) with handy multi-column mega menus to make the site easy to traverse.
Inclusivity is also key to this website. In the bottom right, the Audio Eye accessibility toolbar is a valuable resource, providing both front-end tools to make the website accessible alongside a managed service behind the scenes to help ensure pages that get edited are continuously monitored for WCAG compliance. Below the toolbar is a convenient site translation feature, powered by Weglot, that makes it easy for users to read the website in Spanish, while providing administrators a variety of functionality to customize the translation even further. Pages like Finance and Business Services are excellent examples of how a site administrator can use Finalsite Composer to use multiple columns, accordion elements, and pre-designed content elements to build highly functional pages with lots of information that is also not overwhelming.
When it comes to branding, most districts tend to ignore the number in their district name, a required numeric appendage that comes with the territory, so to speak. Not with Barrington, which grabs hold of the 220, tucks it under its arm, and runs with it. For example, a small tab hangs inconspicuously on the right, below “See Something, Say Something” that reads “220 Initiatives,” for which there are four: Build 220, Equity 220, Framework 220, and Safety 220. Each of these, such as Build 220, takes you to a full page of information that packs a list of projects, updated news, a button to ask questions and a timeline, all in one place. The 220, which is big and red next to the knight in its logo, aren’t just for those initiatives, either. There’s a #Innovation220 to capture past programs that Barrington has developed as well as #SeetheStudent220, which was the District theme for this past year. Back to the chess knight for a moment: it plays an outsized and visually interesting role in the footer, edging its head up out of the container, as if submerged in water. And on the About Barrington page, the knight is washed in a glow, resting on top of Barrington and 220, almost realizing a mini destiny as a chess piece, or in the searchable Directory where, if you don’t have your portrait in place, a silhouette of the knight subs in.
The individual school websites are also excellent, such as the Prairie Campus, which features a full-screen video and a design that mirrors but doesn’t mimic, the parent district site in content, navigation, and images. It’s also worth a few clicks worth of time to poke around the other school sites, like Barbara B. Rose Elementary School, with a cartoon-like purple Stingray as a logo and an informal typeface for the name. When you add the bouncing, running, laughing, and smiling kids below, you can’t help but feel happier. Notable, too, for this best-in-class website is the way that the color scheme (in this case a bright purple), specific to each school, plays out throughout the design — button colors, background shades, design elements, and the like — all without any additional effort by the editors. Now that’s worth smiling about!
Among many things worth checking out, the new website for Hebron Christian Academy has at least one interesting twist with its homepage video, and that is to combine it with a slide show, which means a user has four videos to peruse, each with a unique theme, from sports to campus aerials; it’s a slideshow on steroids, kinda. Another interesting twist: the homepage panels are numbered: one, Our Story; two, Our Pillars; three, Our Core Values; four, sub-numbered, one through four for each division; and five, HCA At A Glance. They create chapters in this website book, and the effect is one that compels the user to read all five, and reinforces the idea that the sequence is as important as each individual piece.
Design-wise, the site is clean and professional, with moments of unique interactivity and controlled user experience, such as the short scroll-jacking to flip through the values. The infographics play nicely, with bold enlarged burgundy borders to indicate an active state, highlighting what is a big school (1,184 students) with relatively small classes (16:1 teacher/student ratio) and a pattern of success (100% college acceptance and 60 AP and Dual Enrollment courses). The News area (AKA “Our Stories” in the footer) showcases Finalsite Posts nicely, a very accessible grid of thumbnails tied to news stories that are also tagged, allowing a site administrator to easily share or display any subset elsewhere on the site — this “Create Once, Publish Everywhere” technology is huge time saver, especially when strategically planned out of the gate as content is getting developed and published. It’s nice to see Arts so well developed too, such as with Studio Art, which uses a big dynamic header image that supplements student artwork, candid shots, inline video, a critical admission button to email the art department, and finally a softball lob to a prospective donor to give to the fine arts program. Smart!
“Think. Lead. Live.” Those are the marching orders for Mt. Juliet Christian Academy, a private school in Mt. Juliet, Tennessee serving over 700 students in PK-1 through 12th grade. Beyond that, the school’s vision is articulated in a four-square grid halfway down the homepage — competitive athletics, spiritual formation and leadership, academic excellence, and comprehensive fine arts. Each of these, on hover, reveals their grounding in Christian faith, woven together by the school’s core mission and focus. Fresh, authentic content runs across the page just above the footer in the form of a live Instagram channel, powered by Finalsite Feeds, which provides an additional moderation layer and the ability to customize the design. Speaking of cool technology, the site administrators are having a field day with Finalsite’s Page Pops, which allow for target messaging site-wide or by page: the Employment page uses one to talk about how the team is growing; the Leadership page uses one to feature the new superintendent, and the alumni page features homecoming. Page Pops can also be set up to appear after a short period of time or only if the user scrolls far enough down the page, and they can be accessed by the small bell icon hanging from the left side of the browser window. While this website is not huge, key landing pages, such as for the Upper School, do a nice job of presenting just enough in various formats - a tabbed element showcases Middle, High, and AP Courses; rollover buttons provide a clear next step, and the right side offers content opportunities for a short overview about Kingdom Leaders and a testimonial. These pages are quick to build in Composer and provide ample opportunity to get creative.
If you’re familiar with private schools in New York City, then you’ve surely heard of Collegiate School, a high-profile, highly selective all-boys day school on the Upper West Side, with great views of the Hudson. Needless to say, a school of this caliber would launch nothing less than a best-in-class website, yet the design is not filled with pomp and flash, but rather an understated sophistication that is clean, functional and very compelling. Almost as a rebuff to the high-speed whirlwind that is Manhattan, the site actually forces you to slow down, a scroll-jacking moment that walks you through the pillars of what “We Believe In.” Each pillar takes you elsewhere, but if you keep moving downward, big news-oriented highlights take over the screen, followed by a “This Is Collegiate” social media carousel, powered by Finalsite Feeds. The footer of the website is particularly notable — if you’re not paying attention, you might even think you’ve come back to the top of the website, with the large centered school masthead below a very legible, highly detailed seal (founded in 1628, no less, before we were even a country to call our own), a clear row of links and a short about statement for the few who haven’t heard of them.
At every click and swipe, there’s something nice to look at (not the least of which is the fun spinning orange and blue coin to indicate that a page is loading), such as the Leadership page, with professional shots of key administrators, and a large, impressive grid of the trustees. Even the mega navigation, which overlays the page, showcases a different semi-transparent image for each item, not to mention small corresponding inline videos. Community Gatherings is a nice page, certainly playing an important role for prospective families looking to understand what it might be like to engage. And if that’s not enough, Our Home is worth a stop. Oh, one more thing. Best close-up video of a young student: the slightly growling kid about three seconds in on the homepage. Worth the wait!
“This is my day. What will I do?” What a great question to ask yourself as a kid, and at Episcopal Day School of St. Matthew, in San Mateo, California, this question gets inked right on top of the homepage video like a passport stamp, typeset with chalky letters and the faint outline of a full sun and its rays. That’s not the only sun on the homepage of course; there’s the one sitting next to School’s name, a stylized rendition with a Southwestern spin. This website is right-sized for a pre-k through eighth-grade independent school — meaning, the homepage is not endlessly scrolling, the navigation is just five items wide and no single area has more than ten pages. In that sense, you can cover a lot of ground quickly and walk away from the website having a very good sense of what this school is about. This doesn’t mean that pages are skimpy. In fact, quite the opposite: Traditions is just one example of a full-page that invites some exploration without a lot of page traversing (and if you stopped at “A Day for Donuts,” you’re not alone). Chapel is another: fully developed, with alternating columns, galleries of relevant images, and a nice hero to greet you at the top — all easily editable using Finalsite Composer, our content management system. Speaking of which, the news carousel on the homepage is an excellent, well-designed example of Finalsite Posts, which allows maximum flexibility in terms of layout and organization of thumbnails, content captions, headlines, and the like, while also providing opportunities to share it across any other page in the site. Episcopal Day keeps these items fresh and can leverage the content site-wide.
Black and red make for an impressive tag team in the new custom design for Lakota School District, which serves over 16,000 students with 1,800 teachers across 63 square miles. For such a large district, the site feels compact, which is a result of some well-placed and well-designed user interface devices, the first of which is simply a clean drop-down menu under Schools to provide quick access to its 23 schools. A teal box center right on the homepage provides a nice CTA complement to the hero image, while an “I Want To” header carries a list of common quick links. Hanging from the left are two hidden panels that trigger social media posts and the latest news, a handy device that allows the district to share the latest without overwhelming users initially. The district’s mission is explained via four big buttons, which, like “Future Ready” open up full explanations. “Points of Pride” is a nice example of using a slimmed-down panel to share key stats, such as the fact that 100 percent of its students are equipped with a Chromebook.
The individual school pages, like Endeavor Elementary School, show how a design can accommodate the rest of the district, allowing them autonomy over content, images, navigation and the like, and even the school-specific homage panels. Site management can be distributed while maintaining a consistent look and feel. Lakota also prioritizes accessibility, both in terms of site translation using Weglot technology, one of Finalsite’s partners, and the Audio Eye Accessibility toolbar, which provides tools for users of the website, but also back-end support to ensure the site maintains compliance. Worth noting, too, is the scale of the website, with hundreds and hundreds of pages — but it’s not the quantity that is important, but the level of investment the district has made in making pages complete; even the March Madness page under Events is notable, in case you’re missing basketball already…
Little Falls Township School District
Cathedral High School
School City of East Chicago
Metro Technology Centers
Washington Community Schools
Rockdale Independent School District
Berks Catholic High School
Weathersfield Local School District
Waunakee Community School District
Keene Independent School District
Stephens County School District
Alameda Unified School District
Pillager Public Schools District 116
Copiah County School District
Sayreville School District
Central Berkshire Regional School District
Norwood City School District
Columbia School District
Community Independent School District
Lake Local Schools
Normandy Schools Collaborative
San Mateo-Foster City School District
Cristo Rey Jesuit College Preparatory School of Houston
Mustang Public Schools
Preble County Educational Service Center
Laurel School District 7 and 7-70
Beekmantown Central School District
Cumberland County School District
Bowling Green Independent Schools
Milford School District
North Scott Community School District
Red Creek Central School District
San Mateo-Foster City School District
Brookville Local Schools
Park City Day School
Holy Child Academy
Magnolia Independent School District
Brookville Local Schools
St. Paul High School
Cristo Rey Network
Immaculata Catholic School
Trigg County Public Schools
Trinity Area School District
Unity Classical Charter School
Prelude Prep Public School
Delphos City Schools
Mississinawa Valley School District
St. Thomas More Catholic School
Southwest Licking Local School District
Turner Unified School District # 202
Lewis Central Community School District
Lutheran Education Association of Houston (LEAH)
Clay County School District
South Whidbey School District 206
Hamilton Wenham Regional School District
Bourne Public Schools
Benavides Independent School District
Pocatello-Chubbuck School District
Carlstadt School District
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.