- General Best Practices
- Independent Schools
- International Schools
- Public School District
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 independent, international, 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:
Use of Purposeful Content
Imperfections that Add Personality
Solid Frames of White Space
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.
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.
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.
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.
Looking for some quick feedback on your website? Get a free website grade emailed directly to your inbox!
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, 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.
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.
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 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.
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 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.
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.
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.
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.)
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.
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.
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.
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