Skip To Main Content
School Website Design Trends to Watch in 2023
Kealan Duffy and Kelly Wilson

Your school's website has never been more important. It's your first impression for recruiting new families and faculty and the cornerstone of your school-to-home communication efforts.

As parent expectations grow higher, the functionality of your school’s web design on desktop and mobile matter more than ever before.

What can your school do to keep up in 2023?

Design trends play a critical role in your school or district’s website, and learning how these emerging creative techniques shape the online landscape can help you achieve your marketing and communications goals.

What is a design trend?

A design trend is a new or emerging creative technique that helps us communicate online in a way that engages and speaks with our different audiences. It could be a visually engaging graphic style; it could be a type of interactive functionality; it could be the way that we're structuring and presenting content — it can be a number of things that help immerse our visitors into the school story.

These trends are very compelling to visitors to a website because we all want to experience what's at the forefront of design and engage in the best experiences possible.

But it’s important to distinguish that there are “trends” and then there are “fads.” Both represent new forms of creative thinking, but trends are techniques that stick around and evolve into relatively permanent changes online. Fads tend to be more short-lived.

It's not always easy to tell the difference, but you can normally spot a fad because while they might be very flashy, they don't necessarily help you achieve your objectives or your visitor's objectives quite as effectively.

It's through understanding trends that we can work out how to shape them for our own messages and, in doing so, improve our school communications and our ability to connect with our audiences.

What drives new design trends?

It comes down to three care key areas:

  1. Shifts in user behavior and changes in collective taste
  2. Advances in technology
  3. Inclusivity and ease of use

Shifts in user behavior and changes in collective taste

The expectations of our visitors determine what engages them. This can be shaped by their online experiences, other media such as TV, music, film, gaming, and art, and other aspects of their lives, like culture and politics. All these elements have an impact, and over time these shape our audience's experience of the web, what they're drawn to, what excites them, and what feels easy to use. That’s why it’s important to think about your specific audience and their needs — the same trends don't always work for everyone.

Advances in technology

Technology moves very quickly online. New tools are released, which designers and developers explore and try to incorporate into their processes. Things we didn't think possible three to five years ago are now becoming more efficient, practical to achieve, and mainstream. This opens up a lot of new opportunities for high-quality web design.

Inclusivity and ease of use

For school websites, the trends that stick are those creating a better user experience. An intuitive user journey is just as important as a “wow” factor. Accessibility is becoming a growing focus, and by paying close attention to accessibility web design guidelines and best practices, we open up the online experience to everyone.

Website Redesign Playbook

Designing for the “new normal”

From canceled events to restructured learning models, the immediate impact of the pandemic was extraordinary. But what are those long-term effects? It's helpful to consider how differently our visitors are experiencing websites now.

For one thing, a lot of audiences are now used to spending more time online and within the digital customer journey. Yes, we've seen the return of in-person learning. Yes, we have a wider variety of opportunities to engage with our audiences again, but there's been a lasting change too. People are spending more time online, and they've developed growing expectations for:

  • Superior online experiences
  • Clearer navigation
  • More compelling designs
  • More engaging content
  • Faster loading experiences, and
  • Better communications

There’s a growing expectation that families can immediately connect with you through your website and it's raised the importance of having very clear pathways to take that next step and get in touch.

Our audiences are getting better at discerning between a good web experience and a poor one. To deliver the best school website, we need to keep providing a sophisticated experience that is going to meet those expectations and demands.

With those points in mind, let’s start exploring some specific design trends and what we feel will be emerging and coming to fruition this year and beyond.

1. A goal-driven approach

A great school website design is purposeful — it solves problems. It's always been a fundamental design principle, but as school websites play an even greater role in our marketing and communications, it's becoming even more important that we take a strategic approach to the design process.

Whether you're looking to attract prospective families or strengthen communications and pride within your community, you want to ensure you're thinking about those goals first and foremost.

Clear goals are also the driving force behind a truly distinctive design. Every aspect of your website, from the structure of your menu to your style guide, should support your goals and create the strongest possible outcome. That inspires the most creative and relevant outcomes.

Whether you're planning a new design or putting together some new content, it's always helpful to establish specific objectives and identify your target audience. 

  • What defines your school and your brand?
  • What tone of voice are you using and your communication so that everything feels cohesive and consistent? 

Thinking about these things will help you not only focus your project but also set restraints that can help you with the ongoing process of review and refinement.

Mock up of St Joeseph's website on a laptop and mobile device

Look at St. Joseph's High School, the largest co-ed Catholic college prep school in Connecticut. One of its main goals was not only to feature who they are but to show they're the best of both worlds — an outstanding college prep experience at a fraction of the cost of some of the private schools in their area. They’re doing a great job guiding users through a specific pathway and being more purposeful with storytelling.

As users scroll down the page, they get very specific calls to action — seek, strive, thrive, and serve, and their homepage is structured in a way that identifies the values that are important to them as a school.

Interactive elements and moving pieces capture users’ attention and drive visitors to subsequent landing pages to dig a little bit deeper. It’s a great example of being purposeful about the content on the homepage, the experience, and what message we want to convey to prospective families.

2. Mobile-first philosophy

The use of mobile continues to increase. Over half of first-time website visitors typically come from a mobile device. In addition to that, we're also seeing a greater number of visitors that start on one device but finish their journey on another.

It's important to think holistically about the website and how it works on different devices so that visitors have a seamless experience from one device to the next. This is where mobile-first comes in.

Responsive web design has been around for many years, but mobile-first is really about considering all devices together and the overall experience, so you're really optimizing storytelling. It's a more proactive approach to sharing the same story, creative direction, and content.

When we’re designing for mobile-first, there are certain constraints like smaller screen sizes, and interactions can be trickier. This led to certain design best practices like keeping text content and messaging very concise. It also included having what we call "hamburger" menu systems to hide extensive navigation but still make it easy to access better-optimized images, as well as more media content, larger font size and buttons that are easier to click, and more white space that helps structure the page in a smaller viewport.

All of these things work great on mobile, but they also work great on larger devices to create a simpler, faster, more targeted experience.

Smartphone and laptop mockup of the Rome School

The New School of Rome is a private British international school located in Rome, Italy, and when their website launched earlier this year a lot of the goals were based around developing a bolder, warmer introduction to the school's value proposition and its key messages to ultimately help engage prospective families and drive admissions.

Developing a mobile-first direction was key to succeeding in these goals. On the homepage, there’s a very bold, simple, clear, and engaging design. There's not too much content on every panel, it's clearly divided, and it's easy to digest those messages even on a desktop. The hamburger menu on mobile is essential because there’s limited space, but on a desktop, it's effective because it helps maximize the space for the photography that conveys a lot of the school's key messages.

3. Bolder layouts and color schemes

A school's public-facing website is a shop window into the world and it’s never been a more important time to consider what the role of the website is in driving admissions.

The website is an opportunity to bring people together and inspire pride in the community. Prospective parents are now a generation that has grown up with the web and social media, and so their expectations are different from parents even five or 10 years ago.

Web pages are very much evolving to reflect concepts that are becoming increasingly bolder and more distinctive in their visual approach. Examples of this are more modern rebranding or rebrands with brighter color schemes and more striking color contrasts that feel less serious and more welcoming.

In the past three to five years, there’s been an increase in how schools are using video on their websites. We're seeing people explore more typography options and more interesting layouts that break the traditional grid structure and feel more personal and dynamic. This can have a modern and disruptive impact that helps the website stand out from the crowd, encouraging the visitor to stop, look, and think about what they're seeing. It also really helps capture your school’s personality more effectively and make a lasting impression.

Mock up of Mason City website on a laptop and mobile device

Right off the bat, Mason City Schools’ site feels unique. There’s a prominent video at the top, but it feels immediately clean. They have a hamburger menu where much of the navigation has been tucked away, but it's super easy to use.

The branding for the school is also very unique. They have a swoosh graphical treatment as part of their branding, and their color palette is very bold. Their use of typography uses some bolder fonts throughout their headlines— it’s a balance of trends that works together well and feels modern and easy to use.

4. Creativity with character

Design is becoming more personal and more expressive and it’s been happening very slowly for over the last decade. Depending on your goals, it can still be an effective choice, but some websites would start to look quite similar to each other.

We're starting to see the re-emergence of certain qualities like shadow gradients, textures, patterns, and illustrations that add additional warmth and personality, which, increasingly, we are finding visitors are craving. These aesthetic elements are often subtle individually, but overall they can really help bring greater depth to your website experience.

This is already leading to increasingly rich and varied designs that are more memorable as a result. And it isn't just the graphics and media directly; it's also movement. The use of animations and motion has been increasing year after year.

When you're interacting with certain features, they can add additional depth and a sense of personality that's unique to you. They can help draw a visitor's attention to the most important features and messages, and they can improve ease of use by helping guide you to the part of the page that you're featuring.

Mock up of Jakarta website on a laptop and mobile device

When Jakarta Intercultural School’s website launched, one of the key goals was to develop a warmer feel to the storytelling to showcase the unique insights about the school and make it feel more personal by bringing the culture and personality of the school into the spotlight. 

The colors of their brand are significant in the school's pride in Indonesian culture. They're also messages that are important to the school. As you scroll, leaf graphics are subtly bobbing up and down, and these leaves tie in with ivy which represents resilience, perseverance, and flourishing even in the harshest conditions.

Video testimonials feature a short little burst of movement, and it's a subtle way of connecting the user to that community member and making it more emotionally engaging. Nicely done!

5. Storytelling beyond the homepage

Stories are a great way to reach your audience, but what does storytelling on a school website look like? However you tell your school’s story, the approach should ultimately come back to your goals and audiences. What is the takeaway or morale of your story that you're trying to convey?

Know who you're trying to reach, what types of stories will grab your audience, and engage on an emotional level. It's not just about what visitors think of your website; it's about how they feel. 

The homepage is only the start of the story, and some visitors may not access your site through this page. Users might be going directly to the admissions page or a financial aid page, so it’s helpful to think about the structure of an online story in terms of the overall user journey for different types of visitors and include those elements throughout the entire experience.

Mock up of Kent Place website on a laptop and mobile device

As an all-girls, K-12 independent college prep school in New Jersey, Kent Place School does a great job of starting the storytelling and introducing a lot of its messaging on the homepage but also carrying it through the site.

The first thing you see when you come to this page is “Empower Girls. Advance the World.” placing a lot of emphasis on their tagline, which speaks to the mission of the school.

As you start to scroll down the page, an intro panel ties in with the hero image, their tagline, and more details about their mission statement, which are followed by a creative panel, “Five Things That Make Kent Place, Kent Place.” As you click through, they have a number of really great landing pages, but if we jump over to the about page, they carry a lot of those design treatments and branding elements over into other pages.

It's a goal for a lot of schools to really define who they are and what's really important to them. Try to focus on what is important to your school since, ultimately, it’s going to be driving most of your goals.

6. Purposeful and engaging content

Visitors don't really read content on your website from top to bottom — they're scanning for what intrigues them and looking for the information they need. A visitor will spend an average of just 5.59 seconds looking at written content, which is not a lot of time. It's important to identify the most important aspects of your message and the objectives that you're looking to achieve on a page-by-page basis. Any content that doesn't support your goals only risks diluting the overall experience.

Think about the priorities at each stage of the journey and ask:

  • Are all the messages on the page relevant to my goals and my audience?
  • Is the content succinct?
  • What are the most useful calls to action once the visitor has engaged with the content?
  • Is this the right place on the website for a particular piece of content? 
  • Does this content belong on one page, or might it work better spread across a few different pages?

Thinking about it in this way will not only help you improve engagement but also supports cleaner navigation and helps you to optimize your content.

Mock up of Ascension website on a laptop and mobile device

Ascension Public Schools is one of the largest school districts in Louisiana, and for their new website presence, some of the key goals included addressing the build-up of a lot of information on their previous sites. It was becoming difficult to navigate and engage with specific content. They also wanted to strengthen communications within the school community, making it easier for back-and-forth dialogue. Developing a clean, engaging design would really help celebrate their story.

Purposeful content has inspired their new site — on the district homepage, there's a search tool in the very top right corner. Each section of the page is very succinct, has a clear purpose, and it's been designed with the target audience in mind. The main menu is also succinct, with only main menu items and only a small number of sub-items.

The district's value proposition is followed by the mission that every school shares in the district, but this page is designed for its community — there's a big feature on what's going on, what's coming up, news events, lunch menus, and that’s key content for the active community.

The interior pages continue to use hero images for emotional engagement on relevant pages, and then the page content itself is using subheading buttons that break up content into links with supporting imagery that makes it easier to digest — purposeful content that's helped shape the design of that website.

Key takeaway

As you explore trends, make sure they support your goals. Consider the messages that you want to communicate on your site and think about whether those trends will work for your school.

Balance what's fresh with what's effective. Not every trend will be appropriate for your school, but consider if you’re keeping up to date with these modern design trends, and that will inspire you as you think about your own projects.


Meet With a Website Expert | Finalsite


Kealan Duffy

ABOUT THE AUTHORS

As UK Production Manager at Finalsite, Kealan oversees the designers and developers in our UK office to deliver innovative and engaging websites to clients across the globe. He has a strong passion for audience-driven web design and has been working closely with schools since 2009 to understand their needs and lead the creative direction of their projects.

 

 

Kelly Wilson headshot

As a Senior Designer at Finalsite, Kelly works closely with clients to craft unique and purposeful award-winning design solutions. In her free time, she is usually running after her daughters, spending time with family or upcycling furniture. The beach, running, and coffee are a few of her favorite things.


Explore More Recent Blogs

Subscribe to the Finalsite Blog

Love what you're reading? Join the 10k school marketers who get the newest best practices delivered to their inbox each week.

Request a FREE
website report card

Want feedback on your school or district's site? Get a free website report card, generated by an in-house website expert, sent right to your inbox.