What are the Top Private School Website Design Trends for 2020?

January 6, 2020 Sean Fitzgerald

A mother and daughter looking at a school website on their phone.

For the last two years, we’ve analyzed the most popular private school website design trends and provided recommendations for the coming year. As we turn the page on a new decade in 2020, we’re finding that many of the best design techniques are continuations of the trends we’ve already discussed. We’ll cover how some of those trends have evolved here, but if you’re looking for design inspiration, I encourage you to also read our posts from 2019 and 2018.  

Let’s dig in.

1. Give the design room to breathe.

An example of white space on Episcopal High School's website.

Negative space, or white space, refers to the empty areas around or between design elements. Leaving space around text elements, photos, or other visuals, helps delineate between sections and draws the user’s eye toward specific content items such as a featured video or call to action. When executed well, negative space provides the design with a spacious and sophisticated feel. While it is typically white, negative space can be any background color. 

Just remember that there’s a difference between white space and empty space. The use of negative space should feel balanced around the content and should never seem like there’s something missing.

Examples:

2. Reframe full-width layouts.

A school website example showing a framed design.

Full-width layouts have been king for some time, in part because they create a consistent visual experience from phones to desktop monitors. Large, impactful photos that span the entire browser is a technique that the Blackbaud K–12 design team has been using since 2007, and today the immense popularity of these designs has saturated the K–12 market. 

To stand out from the pack, it might be time to think inside the box. The simple addition of a frame or border around the site to stop full-width elements from bleeding past the browser window adds a distinctive element and provides a grounded canvas for the page’s content to thrive within. 

Examples:

3. Break the grid.

An example of how the Graland school website breaks the traditional design grid.

In 2019, we saw private school websites embracing unorthodox designs that featured overlapping elements and asymmetrical layouts. Layering photography, geometric shapes, typography, and other design elements is a fantastic way to add depth to a naturally two-dimensional experience. Entering 2020, this trend isn’t showing any signs of slowing down.

When executed effectively, the results are engaging but the composition should never sacrifice accessibility. So while the layout may give the impression of chaos, content should still follow patterns that keep the site easy to navigate.

Examples:

4. Less (text) is more.

An example of minimized text on the Regis Jesuit High School website.

As important as the visuals are, content truly drives the design. Today’s website visitors are fickle, making quick decisions on whether they want to continue through the school’s site or move on. This behavior has resulted in a less-is-more approach to website copy. Long walls of text, complicated lists, and tables of information are getting replaced with shorter paragraphs of copy featuring carefully crafted messaging and contact information to learn more.

A simple approach to streamline your school’s website content is to highlight the key information that prospective families should learn right away, leaving everything else as things they can learn on an admissions visit. Think of the website as the school’s elevator pitch that gets prospective families interested to learn more.

Examples:

5. Be bold.

An example of bold text on Sonoma Academy's website.

Another continuing trend is pairing bold type with other prominent elements. Whether it’s edge-to-edge photography matched with large type or an eye-catching field of color with iconography, these layouts help bring forth your school’s brand messaging.

Keep in mind that the oft-used phrase, If everything is important, then nothing is, applies here. Having too many featured elements is cumbersome and counterproductive to the design’s intended goal. Make sure to give thoughtful consideration to the elements that warrant highlighting, and which ones can take a back seat.

Examples:

6. Micro-interactions make a big difference.

Strong visuals are great, but website interactivity is equally important. Buttons should react when hovered over. Photos can also zoom or fade into a color overlay when moused over to show that they can be clicked. Even large blocks of content can slide or fade into place as we scroll down the home page. Designing for these details of the visitor experience, often referred to as micro-interactions, will delight users and encourage longer engagement.

Of course, too much movement is distracting and frustrating. It’s important to carefully select the items that will benefit the most from added interactivity to avoid going overboard with animations and transitions.

Examples:

7. One-stop navigation—it’s not just for mobile.

An example of a single-element menu on the Crossroads School for Arts and Sciences website.

The trend of reducing a website’s main navigation to a single element isn’t new, but as more and more people browse the web primarily on mobile devices, it isn’t showing any signs of stopping. When done effectively, a minimalistic, one-stop navigation area can promote usability by translating gracefully across devices large and small. This strategy is particularly useful for websites with a lot of pages, where a single panel lists all of the options in an organized manner.

Using this style of navigation alone, however, has some pitfalls that could cause more confusion than it solves. A horizontal navigation list on interior pages pairs nicely with the single-select main menu, thereby allowing visitors to easily transition from one page to the next within a section site without having to always refer back to the main menu.

Examples:

Ready for more?

For insight on how to maximize your school's next redesign, check out our free eBook, How to Design the Best Private School Website. Or contact us today to learn how Blackbaud K–12's designers and strategy consultants can help your school achieve its goals for a new website. Current Blackbaud schools may also be interested in the Website Usability course offered by Blackbaud University.

About the Author

Sean Fitzgerald

As a Senior Interactive Designer, Sean Fitzgerald is focused on delivering rich and engaging front end website experiences for Blackbaud K-12’s library of schools. Sean lives in NH with his wife Kristen, and his son Jameson.

More Content by Sean Fitzgerald
Previous
How to Drive Enrollment through a Top-Flight Parent Experience
How to Drive Enrollment through a Top-Flight Parent Experience

There are many key factors of the parent experience, however it all begins with admissions where first impr...

View More
The Parent Perspective
The Parent Perspective

Gain insight into what is important to parents as part of their experience at the schools their children at...

Check out our EBOOKS & WHITEPAPERS from K–12 experts!

DIVE IN