[Editorial note: This article is still relevant and helpful, but you'll also gain inspiration from our 2020 school website design trends article.]
The arrival of 2019 is ushering in new private and independent school website design trends seeking to further marry innovative design aesthetic with a better user experience. Schools with design projects on the horizon are looking to uncover the unknowns of creating the best school website, and the consensus to accomplish this goal is to aim for a complete, more engaging user experience with optimum site performance.
You might be thinking: "Okay, great, so what does that actually mean?" Simply put, the goal is to make your school's website easier to understand and explore while also reducing the work required for hardware and software to load the site. Here's how:
1. Design for speed.
Remember the days of waiting for what seemed like forever for websites to load? Today, you’re hard-pressed to find someone willing to wait more than three seconds, which is a major hurdle for older school websites trying to make a good impression—quickly. Google also understands this user behavior, and they continue to update their search algorithm to favor sites that load within three seconds or less.
As a result, new school websites must be as efficient and lightweight as possible, but not all of this is the responsibility of the coding. It's also critical to use photography strategically, leverage video only when it’s the focal point of the content, and write copy to be as clear and concise as possible. All images must be optimized for the web, and you or your designer should always be looking for ways to accomplish visuals with code instead of graphics. Designing a beautiful and visually impactful site is still the top priority, but that design must keep speed in mind.
- Monte Cassino — Load time 471 milliseconds (at the time of publication from Pingdom)
- Prep for Prep — Load time 859 milliseconds
2. Update to minimalism 2.0.
Minimalist design doesn’t mean that everything has to look 2D and spaced out. On the contrary, the only real goal is to have a clutter-free design that focuses on usability. Minimalist design favors solid colors, negative space between elements, full-browser aesthetic, and linear paths down the page. Any website design that tells a user more in less time fulfills the minimalist purpose.
So how has that design approach changed? In truth, it hasn’t changed much. Solid colors, simple geometry, and effective use of space still guarantee a site will be appreciated by its users, and therefore by search engines. Look for exaggerations of this trend in 2019, with overlapping shapes, brighter colors, bigger text, more gradients, and a return of shadows to add depth. “Less is more” is still the cornerstone of this trend, so as with our advice on designing for speed, use less text, less photography, and fewer clicks to convey the school's message.
3. Think small to design big.
The explosion of mobile devices as the dominant form of web browsing has created an evolution in mobile-first design thinking. Every website design decision should focus on how the site will display in its simplest form. To do so, designers and school website managers can embrace progressive advancement, where they design for the simplest smartphone browser and then consider how that design will expand and evolve to the desktop view; or they can embrace graceful degradation, where the design starts on large screens with a plan for how those elements will condense and simplify.
In either case, start your design process by thinking about what you want users to see on a mobile screen. What order should content appear in? What actions and interactions do you want them to complete? How do you best represent your school on such a small screen? If you’re working with a designer, discuss these questions with them first to ensure they design everything with the mobile view in mind.
4. Tread lightly with video banners.
Homepage video banners have ruled as one of the most prolific modern design trends for the past three years. If you read our 2018 design trends article, you know that we have been advocating for this trend to stop. If we use web design award sites like Awwwards or CSS Design Awards as the barometer, it appears that this trend is coming to an end as the websites that are getting picked are trading homepage videos for lightweight, high-impact visuals that load quickly.
That said we do understand why a school would want to feature a video banner on its home page to make a strong first impression with prospective families. As a result, we're committed to helping schools implement video the right way. Here are our suggestions to get the most from a video on your school's homepage:
- Keep it brief: In the past, we've recommended thirty-second videos, but now strive for 10-15 seconds to keep the file size from bogging down the page
- Feature a call-to-action: The video may decrease organic search traffic, so it needs to do more with less; make sure there's a prominent call-to-action link to keep admission prospects focused.
- Have contrast: If there's content such as the call-to-action over the video, make sure there's a strong visual contrast such as darker video clips under white text.
- Avoid homepage clutter: A video in addition to featured news, events, school level links, testimonials, statistics, and campus info is going to overload the homepage; instead, pick one or two additional content items and let the video and the site's menus do the talking.
- Have a plan B ready: A homepage banner video—regardless of length—is going to take longer for the page to load; track organic traffic and its impact on incoming applications and inquiries, and if those numbers are declining on a new homepage, have a pre-planned version without the video ready to go.
5. Spark interest through color and saturation.
Minimalistic design principles originally pushed designers to rely on dramatic color instead of the illusion of depth to create engaging and beautiful designs; in 2019 that trend will evolve to incorporate more vibrant colors and higher saturation. Neutral colors will still have their place, but pure white or the lightest gray will go farther than tans, beiges, or pastel colors. Large, high-impact photography within neutral colors will help offset the lack of vibrancy and keep the page looking interesting.
Speaking of which, the photos on your school's site should be the primary source of vibrant color! Ask your photographer for high-contrast, high-saturation edits, or take your existing photos and experiment with editing tools like Photoshop to make the colors loud and exciting. Leave cell phone photos off the site altogether as it’s better for admission prospects to focus on impressive quality than underwhelming quantity.
Also, don’t ignore the need to darken or obscure photos when overlaying text. A colorful filter or gradient can still preserve the site's brilliance. Otherwise, carefully consider the brightness and complexity of the subject matter when putting titles and captions over your photos.
6. Introduce chaos to differentiate the site.
2018 saw an explosion of sites using grids and masonry designs to highlight featured content and to provide app-style interfaces. Some of these designs followed symmetry and rigid proportions while a smaller handful pushed the envelope by introducing misalignment and overlapping of their visual elements.
In a situation where the school's top competitors have new websites that follow modern design trends, it may be time to abandon perfect alignment and banded rows of content to stand out from the crowd. Seamless backgrounds, obtuse non-linear visual transitions, and layers of geometry, photography, and design elements will create an engaging, memorable experience for modern web users.
However, usability is still a crucial part of the equation, so balance and symmetry still have a place for making websites intuitive and easy to navigate. When skewing elements for a dynamic browsing experience, photos or links should still line up and follow patterns to get visitors where they need to go.
7. Serve focused content.
School website visitors need to learn, decide, and progress quickly if they’re going to connect with the people behind the website. As a result, modern design favors shorter paragraphs of carefully-worded messaging with contact information to learn more instead of immense lists, long-scrolling text, and tables of information.
Deciding what to cut and what to keep can be a daunting task at first glance, but you can simplify the process with one simple question: What are prospective families looking to learn in their initial discovery phase, and what is something they can be told on an admission visit? Think of website content as an appetizer, offering the most enticing and unique information about the school in the first serving, with the meat and potatoes coming after they've engaged with the school.
8. Less text equals more typography.
The less-is-more trend for website text has corresponded with the rise in typography treatments. Browser-filling titles, stylized fonts, and text descriptions that exchange word count for larger font size are now common. In short, using fewer words enables the underlying message to stand out more.
In addition to size, other factors that contribute to the overall impact of text include color, accent borders, shapes, and overlapping effects—all are being woven together to make every element of content on a page feel stylized. Schools with distinct messaging that forms the core of its identity should consider how to bring these words to life by emphasizing text in the design.
9. Engage with animation.
Websites that function like an app where every user action or behavior has a corresponding visual response are known to improve usability. Buttons should change color or shape to show they are clickable when someone hovers over them, photos should zoom in or grow a colorful overlay if they can be clicked, and scrolling down a homepage should result in content rising up or fading in. It may sound silly, but today's web users feel rewarded when their presence is acknowledged.
When planning a new website design, consider how users will interact with the content and think of ways to indicate that they are making progress toward a goal or have completed an action. The more interactivity provided, the more likely it is that visitors will feel connected to the site and become eager to explore.
10. The path forward for custom graphics.
Custom icons or illustrations continue to be a great way to make information more exciting, and photos are integral to the emotions and ideas associated with any website. Visual identity, however, is comprised of more than graphics and photos. True website creativity comes from discovering how to combine color, shape, imagery, and space on all platforms to help visitors understand the school.
Think about how photos could appear on solid color backgrounds or break out of containers? How could circles, triangles, or diamonds get extracted from the school's logo and display throughout the website? What textures or patterns from the campus can be used to add depth? It’s important to consider everything that makes your school unique and to represent it by blending and manipulating mediums for a creative site design.
Before asking a third party for help with custom graphics and visuals, start the conversation in-house with the questions above. Those who know the school best are going to be the most in-tune with its visual identity.
Looking for more school website design inspiration?
Check out these Blackbaud K–12 resources:
- How to Design the Best Private School Website
- When is it time for a school website redesign?
- Caution: Moving Content — How to Plan for Responsive Web Design
- School Website Landscaping Checklist
Or, maybe you're ready to pass go and start a new website project? If so, contact us today to learn how the expertise of Blackbaud K-12's designers and strategy consultants can help your school reach its online goals in 2019.
About the AuthorMore Content by Corwin Bermudez