In December, Senior Designer Kelly Wilson and I hosted a webinar where we discussed in detail where web design is headed in 2017. Undoubtedly, we continue to see some overlap from 2016, as some of our most innovative websites like Avon Old Farms and Western Academy of Beijing are far ahead in terms of design and development approaches.

A Mobile-First Approach

The biggest shift we'll see in web design in 2017 isn't necessarily a trend or some fancy design element meant to impress your website visitors. Rather, the biggest change we are seeing in web design in 2017 is a mobile-first approach. While there has been an emphasis on responsive design in the industry for the past three years, this year, we are seeing a shift from "looking good" to "working well."

As mobile-traffic increases, the importance of an excellent mobile experience exceeds that of a desktop experience. So, our design team is focusing on the mobile experience before and at the same time as the desktop experience, optimizing websites on mobile for speed and functionality primarily, instead of secondary.

The Website Redesign Playbook

Edge to Edge Photography

Nothing helps convey a message or feeling better than great photography. As screen sizes and resolutions improve, so do the options in how to fill this new real-estate. The use of edge to edge photography is becoming more popular with designers, allowing for interesting combinations of typography and photography to help tell a story.

The American School of Bombay homepage is a great example where photography drives the overall design. Full bleed images expand within each section in tandem with other visual elements to connect users and tell the School's story.

Along with edge to edge photography, we are starting to see a down turn in the use of photo carousels to showcase photography. Two accepted ideas for this decrease are that users simply seem to be interacting less with carousels and increasingly larger image sizes, due to higher screen resolution, is leading to slower load times across the board.

Instead, designers and developers are turning to a browser refresh or next visit approach in presenting or changing out photography. Moving to a single featured or hero image can significantly reduce overall load times and allow for a fresh experience for repeat visitors.

Large Scale Typography

Typography is an integral part of design, no matter the media. Typography at its core is about communication and without it, a design will not be successful. This year we are going to continue to see the use of larger type sizes for body copy and special treatments. This is partly due to a continued growth of mobile internet usage.

However, as higher resolution screens become more standard, we will also be seeing an overall improvement in legibility for typography and the use of type as larger graphical elements throughout site designs.

Lenoir-Rhyne University uses typography not only to communicate information but also as graphic treatments throughout their homepage to bring focus to key areas of importance. The use of large type sizes for section headers and numbers within their information graphics help to create bold visual elements that stand out more than traditional copy.

Intentional Use of White Space

White space is a fundamental tool that web designers often employ to help balance a layout. White space allows for multiple elements or areas to exist on the same page, by providing separation or a place for the eye to "rest". With this, designers can more successfully bring focus to key areas, allowing users to digest information in smaller chunks.

St. Junipero Serra High School and Harpeth Hall each use white space successfully on their homepage to balance design elements and ensure that the layout does not feel crowded. While St. Junipero Serra High School's homepages (above) use whitespace to balance the animations, Harpeth Hall's whitespace (below) is used to organize content for an optimal website experience on all devices and strategically draw attention to key pieces of content.

Module and Pattern Designs

The responsive approach to web design is continuing to drive how sites are being built and function. With this, we're seeing an increased emergence of modules and patterns within design solutions that some people believe is causing the web to look too similar.

I have a different view of this. The web is becoming a more consistent place for users. Without the acceptance of universal guidelines, the web and any other UI/UX interface would simply be confusing. For example, let's take a step back and think about how a simple media player works. In general, all media players share a fundamental UI framework that has become familiar to users in terms of icons and controls. What if each player had their own UI controls to perform common functions such as play, pause and fast forward?

Being different is not always better.

Chadwick International School's extensive use of module and pattern design on their homepage allows the school to showcase a variety of unique information but still maintain a consistent and familiar framework for users that is easy to navigate.

Bright Bold Colors

Nothing speaks to a user more than bright color; it can invoke feelings and connect people. This year we will see a continued increase in bold bright color schemes within patterns and common UI elements such as buttons to draw attention and help guide users to important call-to-action items. In addition, brighter palettes have started to emerge within brand strategies across multiple industries to help companies stand out. The days of traditional colors might be shifting a bit.

Western Academy of Beijing's bold color palette is used throughout their site to help draw the user in and guide them to specific areas of interest. From the large colored shapes strategically placed throughout the homepage, to the bright red used on hover states, this site's use of color helps the school stands out among their peers.

WAB's website recently took home Gold in the 2017 AVA awards. Read more in this blog post.

ABOUT THE AUTHOR

As Finalsite's Creative Director, David manages the award winning team of web designers. With 20 years of experience in the creative industry, David believes that clean and smart design are critical in creating a successful user experience.