2015 was a big year for changes in web design. It fostered in a new kind of storytelling that meant less text and more multimedia. Google started punishing non-responsive sites in mobile search. Parallax and vertical scrolling took school websites by storm, replacing that above-the-fold-postcard-look-and-feel. Hero videos replaced still photos.
And still, there's room for growth.
With 2015 closing fast, our schools who are heading into 2016 with a redesign as their top priority are asking, so all this was cool in 2015. But what about 2016?
So we put on our thinking caps, did some research, and figured out what we think will be hip and cool in 2016, while still making improvements in web design and UI/UX.
1. Grid Layouts Will Shake Up Panel Design
Panel design was a hot trend in 2015 for sure. But how will it be spiced up in 2016? Grid layouts.
In order for a site to be inherently responsive and work on multiple devices, designers use a grid system that allows elements to be rearranged and resized in a particular format depending on the screen size. However, it also leads to sites that follow a similar, predictable pattern of stacking, resulting in many sites having a similar look and feel.
This predictability is good and bad at the same time. It's good because you can provide an experience that website users are used to, so they'll be able to easily navigate your website. It's bad because there isn't that "wow" factor.
In 2016, we are going to see a break from this in a few different ways.
First, we'll see more multi-scroll elements or backgrounds that follow a grid. This means we'll see more overlapping and floating images that follow the grid, rather than a stationary element.
Trinity Preparatory School's travel page illustrates how a grid an be used to organized content but presents a unique users experience with panels, animation and typography that breaks from the current stacking and panel approach.
Second, we'll begin to use visuals that break from stacking and use effects of hover or rollover states to create that interactive experience. For example, Greenwich Country Day School's "How to Apply" modular element replaces typically mundane and boring content with an interactive grid design.
And third, we'll see grids transform into modular layouts. While in 2015 many websites were designed with long, horizontal panels, our school websites started to break the mold with modular layouts. This type of design maximizes the potential of grids by adding more content, images, and video to a single panel for a more visual experience.
Website Content Planner
2. The Growing Importance of Typography
Typography has always been an intriguing part of design no matter the media. Without great use of typography, a design can't be elevated. It's why you'll never see Times New Roman on an award-winning site, or Georgia as an accent font.
From readability to creativity, the fonts you choose for your logo, headers, and accents play a huge role in crafting a website experience.
With the growing importance on multimedia for storytelling, 2016 school websites are going to have a greater focus on the types of fonts they choose.
Rather than just selecting paragraph and header text, school websites will select different fonts for:
- Calls to Action
- Paragraph Text
The new variations will provide a richer experience with varying styles, weights and families of type faces offered by Google, Adobe and other foundries.
Rye Country Day School's use of custom typography shows how different combinations of typography faces, weights and styles can be used to help group and guide information in an organized way.
Want to step outside the box with fonts? Holton-Arms implemented this custom script font that really sets their design apart.
Movement has always been a great way to convey emotion or grab a website visitor's attention. Unlike current background video trends, cinematic elements are meant to enhance the feeling of a site without killing bandwidth or distracting from the overall message with small elements of movement, such as clouds moving in the background instead of a full feature video playing in the background or area of a site.
TASIS England and Switzerland's use of cinematic video showcases their campus, while and the use of moving photography illustrates how small, subtle amounts of movement can make a big difference in drawing a user in and creating a mood or feeling for the site.
Telling a story on the web is a massive undertaking, and applying that to web design can be even harder. It takes a certain art to tell a story and draw a user in without making them feel overwhelmed.
Baylor School website does a great job in telling a story about how it develops students to meet their full potential with each section of their homepage. By the time you finish scrolling down on the page, the user has a real understanding of what makes Baylor different and what they can offer a student.
Flat designs were huge in 2015 as schools made the shift to look sleeker and modern. We will continue to see the use of flat design in 2016 but with one small change to it.
We are going to see the reintroduction of shadows while maintaining the overall flat design look.
One of the biggest limits of flat design was its inability to have depth. With adding a shadow effect back into the mix, designers can now create depth and help guide users in a way that flat design couldn't.
Wilbraham & Monson Academy's use of flat design through out their site showcases how color and layering of flat elements can create a user experience that is functional and easy to understand but also pleasing to the eye.
Red Bull shook up corporate web design in 2015 by ditching the traditional corporate homepages and introducing an editorial-style homepage. Spinning off a Pinterest-style layout, Red Bull said good-bye to boasting about its brand and goods, and let stories take the forefront.
It's a scary switch, for sure. But it's been working.
We love it for school websites because of the role it plays in communicating value, telling a story, and sharing recent news and events. It's great for mobile, proves that you have an active community, and lets your school's story and brand be communicated by something other than mission statements.
We see a little bit of this editorial-style design on Westtown School's homepage above, but we think in 2016 schools are going to start playing around with this style a lot more to share what's going on in their community every single day.
What else will be big in 2016?
In general, we're going to see a greater focus on the importance of design that's built to work well on desktop, tablet and mobile. The key to continuing to stand out online is to maximize the potential of grids, panels, and responsive design to surprise and delight site visitors.