Said non-fiction author Charles Bowden: "Summertime is always the best of what might be." So true. And so timely a thought here in the land of deployment, where hours and days and weeks blend together like an unruly twitter feed. By last count, we had over 50 website launches in one month, a reckoning of sorts from an unmatched 2021 for districts and schools who chose Finalsite to be their partner. So thank you to all of them, and you, and congratulations to this group of great launches!  We’ll just dive in, like that swimming pool we all want to run back to...

St. Pius X High School | Texas

The web is, by virtue of its pixel-strung DNA, a land of straight lines, boxes and rectangles, generally speaking, which means when it comes to design, it’s hard to break out of the box, no pun intended. That’s what makes the new website for St. Pius so unique: it’s based on the box, but somehow this box is out of the ordinary, wrapped like a holiday present with much to see inside.

On opening, the interactive photos with their oversized “plus” CTAs make for a quick next step, but there are other subtleties that feel just right. As one example, instead of “Search” the label is “What can we help you find?” a more genteel approach to prompt a common task.

Or, for another, Visit, Inquiry and Apply hang leisurely but no less visibly at the top with all of the other navigation tucked away in the hamburger menu; there’s just no doubt who their target audience is.

Interesting panels continue down the homepage, balanced in a steel metal gray color palette with blips of orange for highlighting the infographics -- which evolves into a slew of contrasting colors that set off the next content area.

The modern touch to the aesthetic works well for St. Pius, a Dominican high school in Houston, where even in the interior a forward-moving design helps punctuate a tradition of excellence that has been well rehearsed for over half a century.

Belmont Hill School | Massachusetts

When precocious astronomers developed the sextant in the early 1700s, they must have marveled at their own breakthrough --  finally a reliable way to help seafaring adventurers navigate around the oceans using the stars. As such, symbolically and metaphorically, an illustration of a sextant  -- front and center and overlaid with an unusually worded imperative “Always Character” -- easily captures the idea of exploration on the new Belmont Hill website, an all-boys school for grades 7-12 in Belmont, MA. 

The small, bouncy arrow, bottom left, is like a little kid, tapping you on the shoulder with a continuous nudge that there’s more, a welcome prod since it’s easy to get lost both in the full-frame pictures and the equally sized navigational overlay, which beautifully ties white space and color photography together.

The image of the sextant continues its metaphorical duty, doubling as an ornamental tree for quick facts, a clever and effective interactive piece. Then, suddenly, the deep ocean blue transitions to colonial whites, with a clever use of the accordion element to share all the uniqueness of the Belmont Hill experience, ones that beckon for a click: “The Loop,” “The Jacket and Tie” and “Milk and Cookies.” After all, these are the things that stick.

This design device is repurposed again to share their Speaker Series, an impressive list that comes with a school that’s “been there, done that” many times over, only to perfect what they have with continuous fine tuning. The homepage ends with a statement that every parent hopes for: “Boys are challenged, known, and celebrated here.”

Two other notables: the search, a nice implementation which offers a free-text field as well as “Popular Pages;” and the site language translation, a superior option for reaching non-native speakers using Weglot, a partner of Finalsite’s.

Creighton Prep | Nebraska

There are some cool, and in some cases exceptional, action shots in the video montage of the new Creighton Prep website -- a high school student holding a large snake, a goalie making a save, a pretty intense bunsen burner flaming high -- and there’s enough school blue coverage throughout the clips that the moments feel like they can only happen here, an all-boys school in Omaha, Nebraska.

The homepage in its entirety is not big -- some news, events, and an upbeat set of infographics -- so naturally the intent is to push users into the site to get more.

This website is also a nice example of maximizing the Finalsite platform and Composer, the content management system. For example, the Calendar page is a strong implementation of one of the earliest building blocks of the platform and uses the full width of the page for the grid, with enough events to feel full but not too many to be overflowing.

Other pages, like Student Support Services and College Planning, shows how one page can be deployed with multiple columns, content elements, images, collapsible content blocks and the like to make a page that is complete and accessible. Looking for something for your child to do? If you can’t find it on the Activities and Clubs page, then you’ve got your work cut out for you.

Stonar School | Wiltshire, UK

It can’t be coincidental that the burst of rays in the logo of Stonar School mirror a stunning landscape shot that opens their new homepage, a real sunrise throwing light over the campus. It’s all very beautiful and calming, a countryside that is waking up.

Likewise, the muted gray and dark blue color scheme, the easing of the panel graphics into view, the touches of lavender blue in thin lines and small icons, is also somehow calming, a halcyon introduction to an independent day and boarding school that also happens to be “the UK’s finest riding academy.”

Whether equestrianism is in your blood or not, the Riding at School page is as good as any to whet your whistle, but also to engage with a design that captures the imagination with lovely pictures of horses, the riding team, and the landscape where both call their home.

The multi-column layouts find comfortable spots for video, images, call-outs and the like, while maintaining an open design that’s accessible, including a form to submit for more.

Speaking of forms, the Book a Visit link, tacked to the top, is a worthy example of how to guide the user, as one might guide a horse down a trail, to the right place, including prompts for Why Stonar (many reasons!), a Virtual Tour, and the form itself, which is reasonably short and approachable. The Contact Us page is one of the best I’ve seen in some time, a back office strategic coup that recognizes that while the user is coming for a phone or address it’s still an opportunity to share a bit more about the school.

Ocean Springs School District | Mississippi

Big, blue and bold. That’s Ocean Springs School District. And that’s loud and clear on the new website for this Mississippi school district serving over 5,000 students with nearly 400 teachers. And why not, if your mission aspires “to be the best school district in the country?” Bam!

The infographic grouping is a nice tagalong to this message: Student Success (1:1 student to device ratio!) and District Success (95% attendance rate!), the sum is as much a success of the parts. The school sites, such as Magnolia Park Elementary, feel even more independent because the site-wide district navigation is rotated 90 degrees, while still retaining the overall design aesthetic.

Content, navigation and images are all unique to the subdomain, but hopping from one school to the next is always available and not at all jarring.

Still can’t find what you need? The “Find It” panel and overlay is a great add, a goody bag of search tools, quick links and even upcoming events.

College of Coastal Georgia | Georgia

Speaking of the water, the opening picture of steps that lead out to the ocean on the new CCG website, a state college of the University System of Georgia, is appropriately tagged “Think Beyond.” The three sails that make up the logo, full of wind and driving forward, also communicate a place that takes you somewhere. And that’s what you want when considering a college.

The “Meet a Mariner” panel is a fun header to draw you into the successes of alumni, while the content below is filled with news and events, a place that feels like it’s bustling even in the summer.

The individual landing pages for the various schools and programs show how Composer can be stretched to accommodate a lot of content without burying the user in information, such as the School of Business and Public Management or the School of Nursing.

And if you’re a student looking to make sure there’s a little bit of fun between classes, how does “Overboard Entertainment” sound? Pretty cool if you ask me; check it out in the Student Life section.

It’s hard to go wrong when you can practically see the Atlantic from your dorm room.

Lawrence Academy | Massachusetts

Most websites still aren’t interactive enough -- sure, there are buttons and hover states, overlays and collapsible blocks. But that’s not that cool. Which is why the “Drag” prompt on the new Lawrence Academy website really stands out, and with the smart messaging, hammers the point home. “Find Your Spark” -- drag -- “Share Your Light.” Nice. And this device is made even more interesting by the big, uppercase arial letters sandwiching the lower case curves of the “your”, an emphasis on the person taking this all in -- the user.

Elsewhere, simplicity abounds: a navigation bar that minds its own business without a lot of novelty or options overload, which is what you want when it comes to getting people around.

Further down, there’s a lovely “bird’s eye” view of campus that transitions in one click to a drone-a-palooza of buildings and green quads full of big trees.

The “What Makes Lawrence Academy” buckets infographics and value proposition statements into three core areas that take you further into the heart of the school, including its core values and academics.

If that’s not enough, or you happen to glide through it, a nicely shaped panel brings together Winterim, Learning Support and Advisory Program.

The footer is no fuss - just solid blue, with big calls-to-action to take the next step in the admissions process, and all the nuts and bolts of getting in touch.

Some nicely developed interiors too: Admissions Process, Employment and Health, Wellness and Safety, to name a few.

Vail Mountain School | Colorado

I mean, it’s Vail. How can you go wrong? VMS couldn’t make that point any clearer with the launch of its new website. But if the opening video isn’t enough, just scroll down a bit and catch a glimpse of the Rocky Mountains in all their snow-capped glory. Can you imagine seeing that every day?

For the vicariously living observer who, like myself, kid themselves by calling their nearby hills small mountains, the photos and messaging keeps on delivering: “Teachable moments everywhere.” Classroom and place could not be more connected here in a way that’s beautiful but down to earth.

But if a touch of envy doesn’t get the best of you, keep scrolling. Skiers pop out of nowhere, forcing you to wonder just what it’s like to take a class while gliding along the snow. But then, there it is: snow! The whitened clusters of pixels just float down, flurries disappearing into the bottom edge, on their way to a soft landing.

The social media mashup at the bottom is a nice way to keep it real, and the footer is jazzed up with a thin piece of line art that feels appropriate and lodge-like.

Still need more? Try the Student Life page, a great display of all sorts of cool things you can do as a kid. Oh to be a teenager...

Istituto Marangoni Miami | Florida

If you’re part of a world-renowned fashion-designed conglomerate, your website better be good; actually it can’t just be good -- it needs to wow at every click, tap, scroll and slide.

The Miami School of Fashion is part of the larger Maragoni network, planting their foot directly on U.S. soil with their new Miami school and bringing their 75+ years in design, fashion, and art to this neck of the woods.
 

You can see by the alumni stories alone just how vast and varied the network is -- if you’re into fashion, this is the place to be. The site’s uniqueness leans on circles as a key device, in part because of how the M in Marangoni sits silhouetted, flush left at the top in the logo.

Black is also the main event on this site, which is why the hamburger nav opens an overlay that is as stunning as it is practical - stunning not for the links, but for the outfit the model is wearing that matches the site so well.

Even if fashion isn’t your calling, poking around the site is worth the time -- the photography alone is mesmerizing in part because of the subject matter, which largely showcase outfits that could stand to be exhibited in a museum. A good place to start is the Continuing Education page, where a woman looks straight at you in surprise from underneath the brim of a hat that is exactly what you might want to have handy on a cold winter day, and then some.

Shattuck-St. Mary's School | Minnesota

Nothing moves, slides out, pops up or dissolves in on the new Shattuck-St. Mary’s School website, and that’s okay. It’s kind of nice to just click, such as to advance the homepage slideshow which delivers a few lovely outdoor scenes, one of which takes focus from the ground facing up at soccer players, as if the ball had a camera.

Up top, there’s a terrific language translation feature worth noting for its seamless integration with the design, the use of flags, and the simplicity of the list.

The Quicklinks and Portal navigation are also cleverly designed and unique. In this way, the site is a great example of fine tuning and finesse, including the color scheme which brings together dark grays, deep reds and muted teals that team up perfectly.

Founded in 1858 and located in Minnesota, there’s plenty of tradition and legacy, but the site is as forward-thinking as its students and faculty.

For those prospective families with just one toe in, the Why SSM panel halfway down the homepage is a nice collection of good reasons, including their trademarked weCreate space, which is where I’d certainly be spending my afternoons...

Salt Lake City School District | Utah

When your big homepage hero image is all about the vaccine, you know we’re still in a pandemic. But the new website for Salt Lake City School District shares this kind of important information well, providing critical virus updates in a way that’s clear and directed.

For a district with over 20,000 students and over 50 percent minority enrollment, you also have a lot of users to think about. This alone makes the bottom right language translation a critical feature that is attentive to the non-native English speakers in their community.

On the lighter side, the SLC district abbreviation finds a comfy home on the inside of an apple, paying homage to the classic symbol of a teacher’s gift.

Further down the homepage, big spreads of news, events and social media through Finalsite Feeds present a district with lots going on. For a big district, the website feels easy — no small achievement!

Flintridge Preparatory School | California

It’s always somehow comforting to settle into a simple but effective website -- not one strung high and far with bells and whistles, but one with a clearly structured navigation, an understated design and good content. Flintridge School’s new website fits this bill, one where you don’t get lost in the swipe and tap of today’s mega-websites.

PrepNews is just one example of an interior page that does exactly what it sets out to do - share news, allow some (but not too much) filtering through the tagging feature of Finalsite Posts, and enable the user to load more news if they choose.

The “Introducing the New Head” page is a nice example of how to feature a big picture, a letter, some video and a few past articles in one clean layout that has a beginning, a middle and an end -- pages like these remind us that the web doesn’t need to be complicated and that simple is just fine.

Madison Metro School District | Wisconsin

The logo for the Madison Metro School District, tucked away on the new homepage, is as basic as it is profound, which makes it one of the cooler logos to cross my desk in a while. The three shapes we learn in preschool -- triangle, square and circle -- form the shape of a person, a symbolically appropriate reminder on how everyone’s education starts when you’re very young.

But back to the website, this one’s filled with cheery accent colors, easy blues, and big buttons and text. Mission-critical pages like Transportation are one-stop shops, filled top to bottom with everything a parent might need, and leveraging the content management tools in Composer to present the information in a way that’s accessible.

Better yet, check out the Menus page -- if we know one page that both parents and kids want to visit, it’s lunch.

The “Select A School” menu, tucked into the main hamburger menu, serves its purpose well, providing quick access to dozens of schools that make up the district, including a color swap to make it visually clear your navigation options have changed.

The individual school websites, such as Black Hawk, leverage the overall design while maintaining the autonomy to include images and content specific to the building.

Tucked in every corner of this large district website is a language translation tool for a few key languages using Weglot, a huge upgrade from the Google Translate feature that many districts originally adopted. 

Saint Paul’s School | Florida

It’s nice when a typeface matches the message so well, as it does for the new homepage of Saint Paul’s School in Clearwater, FL: “Movers, Shakers, Difference Makers.” The hand-drawn letters feel pencilled in but still sturdy, and as you scroll they even animate with a playful little bounce that is nothing but fun, as if the words were attending the school along with the kids.

But the headers aren’t the only things sketched -- illustrations make their appearance on the homepage panels at just the right moment, popping onto the scene for summer programs as a means to navigate or to add a classy touch to the outer corner of a photo collage.

If that weren’t cool enough, the footer opens with graphite strokes of a seaside moment, sailboats floating by and into the sunset. It’s a rare moment of website repose. From here, exploring is easy - a simple meganav, enhanced with animated color bars that rearrange, opens an abbreviated menu of options leading to information-rich pages like Campus Safety and Athletics.

Still want to poke around and can’t get to Florida? The Virtual Tours is an easy stop on your way.

Holy Family High School | Colorado

Every now and then a new school will launch a website that features purple as one of the school colors. Such is the case with Holy Family High School, a coed Catholic high school in Broomfield, Colorado that just passed its 100-year birthday.

Spirituality and Catholic tradition are clearly central here, quite literally prioritized by the three-column presentation of the “Whole Child,” with spirit first in line. Christian images and messaging abound, so for the prospective parent there’s no confusion as to what kind of education your children will receive.

The Why Choose Holy Family is a nice presentation of the School’s offerings, a flower of interactive circles with the spotlighted fact centered.

Throughout the site, content on the interior is kept simple with few pages reaching the scroll bar; yet on the whole the site feels like it’s just enough. A family who shows up looking for the tour should be well equipped to ask the right questions and take the next step having shuttled through the website.

Battle Ground Academy | Tennessee

Elevation is both academic and graphical on the new Battle Ground Academy website. Academic in that “Education Elevated” runs thematically across navigation, headers and messaging; and graphical in that the small blue and gold banners elevate up as you scroll down on the homepage, a symbolic reveal of sorts into a century-plus school with much to offer.

Animated infographics will give you pause as you wait for the numbers to increment to their resting spot, each a distinction worth noting (not the least of which is that 97% of their graduates get into one of their top three college choices).

The “Happening at BGA” panel is a nicely designed combination of events and featured news, mixing thumbnail sizes to keep it interesting. Likewise, on the interior, pages are thoughtfully assembled, particularly important ones like the Admissions Process page or the Curriculum and Courses page, which maximize Composer’s content elements to hold multi-column layouts with accordions and the like.

The transparent overlay of the footer is worth the double take - it’s a cool piece of campus art that you can’t help but want to see in person.

July Theme Launches

In addition to custom websites, many schools and districts launched beautiful websites using our pre-designed theme packages! Check them out: 

Susquehanna Township School District | Pennsylvania

Piedmont District | Oklahoma

Seneca Falls School District | New York

King's Canyon Unified School District | California

Lockhart Independent School District | Texas

Cleveland ISD | Texas

Darien School District | Connecticut

Donelson Christian Academy | Tennessee

St Louis Park School District 283 | Minnesota

Cologne Academy | Minnesota

North Andover Public Schools | Massachusetts

St. Mary's Academy | Oregon

Metropolitan International School | Germany

Challenge Charter School | Arizona

Brentwood Union Free School District | New York

Kings Canyon Unified School District | California

Avon Community School Corp | Indiana

Hampton Township School District | Pennsylvania

St Joseph's Catholic School | South Carolina

CCOSA: Cooperative Council for Oklahoma School Administration | Oklahoma

Grants Pass School District 7 | Oregon

Pomperaug Regional School District | Connecticut

Office of Education, Evangelization and Catechesis | Connecticut

International Community School | Singapore

Crandall Independent School District | Texas

Donelson Christian Academy | Tennessee

South Washington County Schools | Minnesota

Ossining Union Free School District | New York

Calvary Day School | North Carolina

Del Valle ISD | Texas

---

---

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.