Skip To Main Content
  • General Best Practices
  • Independent Schools
  • International Schools
  • Public School District
2020 School Web Design Trends to Watch
Andrew Martin

Website design at Finalsite isn’t about chasing the latest design trends. Instead, we strive to stay ahead of the curve so that your school or district’s websites stay at the forefront of digital design expectations and technological advances.  

Award-winning senior website designer Kelly Wilson recently hosted a webinar in which she shared some sneak peeks about where web design trends are headed in the coming year, using examples from Finalsite clients in the independentinternational, and public school markets that are already ahead of the game.  

A quick poll launched at the beginning of the webinars found that nearly half of the attendees are always looking to make minor tweaks and changes to their website. Another one-third of attendees said they were looking to redesign their website in the coming year. Whichever bucket you fall in, here are the top web design trends that should be top-of-mind for both schools and districts in the new year. 

Design Trends to Watch in 2020:

  1. Use of Purposeful Content

  2. Editorial-Style Layouts

  3. Meaningful Motion

  4. Imperfections that Add Personality 

  5. Solid Frames of White Space

  6. Personalized Experiences 

So…What exactly is a design trend? 

Unlike fads, which can exit the public consciousness just as fast as they became popular, design trends tend to stick around for a lot longer. These aesthetic, stylistic, and technique-based trends ultimately guide the creative evolution of all web design for a period of time before being replaced by another emerging trend. Trends come and go for a variety of reasons, such as a collective shift in taste or user behavior and rapid advances in technology and software. 

Recognizing current trends and, even more importantly, recognizing emerging design trends can help your school and district stay ahead of the curve with a website that always feels fresh and modern. Annual tweaks and updates can help bridge the gap between a typical three or five-year overhaul. User expectations evolve over time; your website should, too. 

Trend #1: Purposeful Content

The constant bombardment of commercials, access to far more entertainment than we could ever hope to watch, and the constant presence of our smartphones has shortened the average person’s attention span to about nine seconds

Schools and districts have to anticipate what a visitor might want to see and offer them several different choices to hopefully capture their attention. This requires schools and districts to think more than ever about what makes them unique.

Kelly suggests focusing on the two to five things that really makes your school unique, and place those key points front and center on your homepage. As the schools below demonstrate, these key points don’t necessarily have to be a hero slideshow, news slider, or calendar. 

St. George’s School

St. George’s School recently redesigned their website with a simple, yet effective homepage that greets visitors with a hero slideshow that highlights the school’s idyllic campus — definitely enough to capture one’s attention in under nine seconds. 

The second panel down introduces the school’s mission, which is written as a compelling statement.

St George's School Homepage Mission Statement

The next panel down highlights three key differentiators that separate St. George’s from the pack: connected learning, Geronimo (a multidimensional program with the development of skills in sailing, leadership, and teamwork), and the school’s location along the Newport, Rhode Island coastline. 

St. George's School Geronimo program highlight

The next panel down focuses again on the school’s location overlooking the ocean to help with SEO and instills in visitors the importance of their state-of-the-art academic, arts, and athletic facilities. In just three short panels on the home screen, St. George’s calls to attention their beautiful campus and the key differentiators that might incentivize someone to apply to their school over another, similar co-ed, college preparatory boarding and day school. 

Eden Prairie Schools

Eden Prairie Schools’ website begins with a hero video to showcase their facilities and student body before moving down to a panel that directly points out what makes them unique in the public school space. The “What Makes Us Unique” panel highlights seven key differentiators in a slideshow that shows the district spent the time to really think about why a family would, and should, send their child to their schools.

Eden Prairie Schools Homepage What Makes Us Unique

The website still includes the standard news, events, and videos panel, but it’s placed further down the page and collapsed into one panel (rather than three separate panels). This keeps the page compact and places what makes the school unique near the top of the page so visitors see content relevant to them, not what’s relevant to the current district community. 

Eden Prairie also highlights “The Student Experience” in a panel that changes layout and presentation based on a visitor’s device and screen size. These three panels work together to reduce the amount of content on the district’s homepage while prioritizing purposeful content to encourage visitors to take action.

Eden Prairie Schools The Student Experience

 Looking for some quick feedback on your website? Get a free website grade emailed directly to your inbox!

EMAIL ME MY FREE WEBSITE REPORT CARD


Trend #2: Editorial-Style Layouts

Software and coding advances have given web designers more freedom to experiment with new design styles and branch out from the standard grid-style page layout. This freedom has allowed designers to create more compelling pages through: 

  • More open page competitions and layouts

  • A greater emphasis on white space

  • Asymmetrical page balance and floating elements

  • Overlapping layers with photos and/or video assets

  • And a less obvious use of grids to structure pages 

An abundance of white space also guides visitors towards the important components of the page, while floating elements help to break up the rigid structure of grid-based pages. Pages feel more natural and can lead to a greater sense of flow and purpose as the visitor is guided down the page from one element to another in a way that feels more organic than grids.

Brentwood School

Brentwood School, which took home a Silver award in the 2019 W3 awards for their innovative site is a fantastic example of why you should ditch traditional website layouts! Brentwood School’s website incorporates interesting typography at the top of the homepage that changes color as you mouse over each letter.

Brentwood School colorful homepage typography

As you scroll down the page, you’re greeted with more animations, as the two halves of the next panel move inwards to connect in the center. 

Brentwood School moving homepage panels

The lack of a two- or three-column layout and avoidance of grids leads to a homepage that looks and feels more interesting. It creates moments of interest and discovery, especially when a visitor first sees the panels moving in from the sides. It’s a unique approach to web design that will likely stick with visitors as they look at other schools with more conventional page layouts. 

Tulsa Public Schools

Tulsa Public Schools frames each section of their homepage in a bold, colorful border that helps to draw the visitor’s attention inwards and helps break up the homepage into easily digestible portions with clear distinctions between each section. 

Tulsa Public Schools colorful homepage border

Tulsa adds an extra dimension to their homepage by staggering the boxes used as backdrops for the text callouts. This layered effect is repeated several times as a way to add some extra visual flair to the homepage that incorporates more traditional grids for content in key areas, such as the news section.

Tulsa Public Schools staggered callout boxes

Trend #3: Meaningful Motion

Motion has already become a key player in web design over the past year. Adding motion to your website — through videos, cinemagraphs, scroll and hover-based animations, and animated cues — helps break up static images and backgrounds on the page, add additional life to the design, and serve as a visual guide to direct a visitor’s attention to key spots on a page.

Highline Public Schools

Making the most out of small touches, Highline Public Schools added a delayed effect to the corresponding text callout to each of the images in the homepage hero slideshow. It’s a simple effect, but it adds an extra layer of motion that makes the top portion of the homepage feel more dynamic as the visitor clicks through the slideshow. 

Highline Public Schools animated homepage elements

Highline also makes frequent use of mouse-over or hover-over animations to bring their icons, news thumbnails, and goals section of the website to life with that little bit of extra dynamic flair. The district also incorporated flipping animations for the grid-based “Highline At a Glance” panel to help that portion of the page feel unique alongside the bold color palette.

Trend #4: Imperfections & Personality

Purposeful imperfections in web design have overtaken the standard grid-based design structures of years past as designers are looking for more and creative ways to inject personality to their websites. Imperfections — such as hand-drawn icons, creative and expressive typography, bold colors, soft shadows, unique gradients, textures, 3D graphics, and interactive elements — appeal to a younger audience. 

Columbia Grammar & Preparatory School

Columbia Grammar & Preparatory School maximizes the impact of their homepage through numerous artistic personality injections. The hero image is framed in a thin yellow border, the typography for the text on the hero image is fun, the arrow that appears over the various grade-level callouts is fun and unique, and the hand-drawn images in the statistics sliders add that extra layer of personality that really makes it feel more like a scrapbook and less like your standard website.

Columbia Grammar & Preparatory School hand-drawn website art

Trend #5: Solid Frames of White Space

Framing other elements on a page with larger areas of white space is a relatively new design trend that has become popular, because the abundance of white space allows the other visual elements on a page to shine - like being bathed in a spotlight on stage. Additional white space creates a greater sense of structure and help to prioritize and separate the different elements of a page far more effectively than traditional borders.

Merchiston Castle School  

Merchiston School, a leading boarding and day school in the UK, recently launched their new MarCom platinum award-winning website that features a plethora of white space, including framing the top portion of the homepage in a white border, which draws the visitor’s attention inwards towards the hero video.

Merchiston Castle School homepage hero video with white border

Each section further down the page is set against a white background which helps draw the visitor’s attention to each of the panels with key information. When colors are used, such as pinks and blues, the color palate is soft, which never draws attention away from the photo. Even the larger text that separates and kicks-off each new section is muted and soft to keep attention on the content that matters the most.

Merchiston Castle School homepage callout with white background

Trend #6: Personalized Experiences

Personalized content serves up website content that is most relevant to your website visitors  based on key identifiers, such as their geographic location, language, behavior (such as the pages they visit most), and the device they’re using. 

(Crafting a personalized website experience is so important and beneficial that we’ve even made our own personalization element as a part of our inbound marketing platform that automatically changes the content on your website based on those same factors.)

Asheville School

Another recent website launch, Asheville School incorporated many of the design trends featured above (as did all of the schools in this blog), but what really stood out to us was the personalized quiz towards the bottom of the homepage.

Asheville School personalized homepage quiz

The “What kind of Blue will you be?” quiz empowers visitors to pick and choose from four possible choices from a short selection of questions targeted towards visitors who may be interested in applying to the school. 

The visitor’s information is collected at the end of the quiz, and someone from the school can reach out to the visitor at a later date. It’s a clever and effective way to essentially gamify the inquiry process that should incentivize more visitors to take action than your typical inquiry form. 

Key Takeaway

Ultimately, design trends should work in tandem with your school’s message to maximize the impact of your website. While the trends featured in the blog may work for the schools we used as examples, it’s important to consider each trend to make sure they’re the right fit for your own school audience. 

At the end of the day, take creative risks, be bold in your website design, balance fresh design ideas with the tried-and-true, and start your next redesign with a clear design and launch goal. Should you want or need help during your next website redesign, Finalsite’s award-winning deployment and design team is always there to guide you through the entire process.


GET MY FREE WEBSITE REPORT CARD


Andrew-Martin-Headshot
ABOUT THE AUTHOR

As Finalsite’s Product Marketing Specialist, Andrew writes blogs and creates videos to share information about all the latest and greatest Finalsite products. Andrew has more than 10 years of video production experience and a journalism degree from the University of South Carolina. He has an incredible passion for movies, television, reading, and writing fantasy and science-fiction. 

  • Web Design
There are no news posts to display

Free 15-Minute Website Consultation

Want feedback on your schools current website? Schedule a free 15-minute website consultation to learn the improvements you can make to your current website to enhance your charter school brand.

Receive a Free Website Report Card

How does your website's design, UX, and search performance compare to industry expectations and standards? Request a free website report card to receive an analysis directly in your inbox!