The Year of the School Website: Top Design Trends for 2018

January 3, 2018 Corwin Bermudez

Best School Website Design Trends for 2018

Editorial Note: Listen to a discussion about this article on the Get Connected podcast, Episode 49: Star Wars T-Shirts & 2018 School Website Design Trends. Also, check out our article, Top Private School Design Trends for 2019

It often seems like website design trends change with the seasons, which can be frustrating for private schools trying to maintain a modern look to win over admission prospects. The heated competition to first attract visitors to the website is also introducing new complexities, from design elements impacting search results to new forms of digital advertising competing for a slice of the school’s communications budget.

What will all of this mean for private school website trends in 2018? We’ve looked into our crystal ball of design best practices and are foreseeing a continued trend toward responsible design strategies that balance visual appeal, usability, and longevity.   

A Picture is (Still) Worth A Thousand Words

The past five years of design evolution have reinforced the fact that the best way to introduce a school is through visuals. Photos and videos remain the dominant content throughout every page of modern websites, and nowhere is this more prevalent than in the full-browser banner visual that spans the width and height of home pages.

The full-browser visual is not a new design tactic—Blackbaud K-12’s design team first introduced this to schools in 2007—but the latest adaptations involve short videos, logos, and menus floating over the photo or video without a container, more overlaying content, and less emphasis on symmetry and subtlety.

The school website trend of banner imagery displayed on Emma Willard School.

In a previous article on home page videos, we reviewed how large video files impacting a site’s load time can also hinder search results. Schools that want the visual impact of a video without hurting search results should limit home page videos to 15-30 seconds or create a cinemagraph.

The Masonry Effect

The long-held standard of a news carousel and event list displayed side-by-side is officially outdated. School designs are starting to employ masonry layouts to engage users and highlight the school’s new and exciting content.

Masonry, named for its bricklaying appearance, involves a dynamic grid that changes column structure and cell width with each row, allowing schools to feature various content types and patterns. Beautiful, modular, and easy to update—what’s not to love?

Private school website design trend of masonry on Lycee Francais de New York.

Expandable Panels

The expandable panel trend has been around for a couple of years with limited usage on school sites. We’re hoping more schools utilize it in 2018 because the eye-catching visual presentation and interactivity of this approach is an effective way to draw user attention to the school’s value proposition. Schools looking to employ this tactic should specifically tailor content to it instead of trying to fit existing (often lengthy) messaging into a confined, artful space.

The use of expandable panels as a private school website design strategy.

Aligning the Edges

Organic shapes and jagged edges can be powerful visuals on websites that focus on aesthetic as the primary selling point, but schools don’t have this luxury. While the design helps cultivate interest and elicit emotional responses from prospective families, these users come to the site seeking specific information, and the design must deliver. By aligning the edges of content items into rows and grids with corresponding imagery instead of single-item carousels, the design creates prominent visuals that are easy to navigate.

Designing Text

We no longer consider it purely the writer’s responsibility to make text engaging. The flexibility of CSS styling has enabled designers to look for creative ways to make content more consumable without hindering the school’s ability to make edits. As a result, we’re breaking up bulleted lists into grids with photos or icons, creating alternating photo/text patterns as users scroll down a page, and introducing panels with vibrant colors and hover animation.

An example of panels in K-12 school website design trends.

Content Groups Get the Best Design Results

Content creators can help designers “design” the text by organizing information into small groupings. Shorter segments of information provide designers with more flexibility to add visual interest while focusing the user’s attention on the most important aspects of the school’s story.

An example of standout content in the best school website design trends.

Front and Center

Centered text blocks utilize symmetry and space to create a focal point on the page. This trend is evolving to include larger font sizes and increased margins to help draw attention to the centered information. Displaying content in a linear manner as users journey down the page also creates a unified experience from desktop screens to mobile devices, improving the site’s overall usability.

Centered content as a school website design trend best practice.

Separating the Header from The Body

Narrower columns can make a block of text easier to read, and any opportunity to emphasize design elements while also improving effectiveness is worth taking. Putting headers beside content creates an interesting visual dynamic. Yes, it will make body copy longer, and there may be some editing required for this strategy, but the resulting sense of balance between header and text will make the website more engaging.

Using headers in school website design.

The Return of Serif Text

Serif fonts have long been excluded from website design due to poor visibility and performance on HD displays; however, with more and more devices displaying clearer, designers are embracing elaborate typefaces that match school branding. Serif text provides an elegant and polished look without sacrificing usability and should be included wherever appropriate in new website designs.

School website design best practices now include using serif fonts.

Unorthodox Layouts

So far, we’ve focused mostly on design trends emphasizing clean lines and symmetry, which can seem contradictory to point out that layouts eschewing standard conventions are also in style. As one school zigs, it’s natural that another will zag to stand out from its neighbor. Designing “out of the box” has its merits, creating an organic feeling of energy through overlapping elements, misaligned blocks, and layered items.

The use of unorthodox layouts in private school website design trends.

Color and Spectrum

The human eye can see seven million colors, but schools often limit their website to “school colors” selected decades before the internet was invented. Color and gradient treatments are permeating newer site designs, offering schools more ways to visually engage their audience. Whether it’s to add treatments to photos or to assign colors to navigation sections, introducing new colors that complement the school’s historic colors is a great way to boost the site’s impact.

Using various colors in private school website design.

School Website Manageability

This article is filled with new and evolving ways that private school websites will stand out in 2018, but these strategies shouldn’t come at the expense of manageability. Most schools don’t have the luxury of short redesign cycles, which is why Blackbaud School Website System™ (formerly onMessage®) was developed to provide K-12 schools with greater control. This flexibility better enables schools to keep up with the seasons of change without busting the communications budget.

Contact your account representative today or e-mail to learn about our website design services for schools.

About the Author

Corwin Bermudez

Corwin Bermudez is an Interactive Designer with Blackbaud's K-12 Professional Services team. He has 10 years of experience in website design, print design, illustration, and audio/video production.

More Content by Corwin Bermudez
Previous Article
Blackbaud ID is coming to Blackbaud's Education Management Solution
Blackbaud ID is coming to Blackbaud's Education Management Solution

Learn how Blackbaud ID will boost security and improve the user experience for school's using our "ON" suit...

View More
A Farewell to Podium: The Platform that Changed Private School Communication
A Farewell to Podium: The Platform that Changed Private School Communication

The final Podium website has been retired, which has us looking back on the platform that changed how priva...