In the previous year the web experienced major design swings. The flat design movement smoothed three-dimensional styles and added expansive white space to websites everywhere. Multi-page websites were converted to long single pages with fancy scrolling effects. This year, we’ll see these extremes be tempered with a focus on improving user experiences, which ultimately means a more engaging website where your visitors will stay, learn, convert and buy. Savvy business owners and their web designers will spot and leverage the following trends:
Several major websites have incorporated background videos. For example, if you use PayPal, you’ve likely already watched a frequently updated background video on their home screen. Videos can now be displayed with HTML 5, so there is little concern for technology limitations. And for those devices that don’t support HTML 5 videos, a background image can easily take its place. This may not work for all websites, as it can be overly distracting. For established brands, this can extend the brand experience and help visitors immerse in the “mood” of your site. For technology-related companies and services, a background video can amplify your content or message in the right way.
The pervasive home page slider just doesn’t work and I hope companies give it a final goodbye in 2015. To clarify, the home page slider is a slideshow-type series of images, often with captions. No newly designed website should be dragged down by a slider. They take a long time to load. They can be confusing to users. They have low click-through rates. People are so used to seeing them, they are easily ignored. They aren’t staying to see all of the messaging. I recently saw a website that had 10 slides in their home page slider. No one is going to sit and wait for all those slides. If there are 10 important messages, something needs to be reconsidered from a marketing strategy perspective. Instead, savvy marketers and business owners will be asking for a full-width hero image or a background video (see trend above) to effectively set the visual tone and put the focus on your product/service/main message.
This one is not as readily discernable to the average web user, but will definitely improve user experience. SVGs (scalable vector graphics) deliver lots of pixels and beautiful images for retina displays. In previous years, web designers and developers have seen reduction in individual, cut-up graphics as designers moved to sprites to capture all individual images, and then to fonts. However, SVG is even more awesome for solutions like these because they are scalable and not limited to one color (fonts are limited to one color). For the end user, this translates to faster loading, more beautiful graphics, and easily bringing a little more color back to icon sets since vector isn’t limited to one color like a font.
For the average web user, Google’s Material Design is likely new terminology. Material Design is a design language created by Google and announced mid-2014. Google’s Material Design is about consistency, functioning and interacting in same-place style between apps. It should help reduce confusion; gor example, using the same design patterns across a website for how dates are displayed is good design. Having a design reflect the brand experience of a company is good design. If you use an Android phone, you’re already seeing this in most of Google’s apps: Gmail, YouTube, Google Drive, Google Docs and more. This design pattern can be seen to a smaller extent in the Chrome browser, as well as desktop web interfaces for Google Drive, Google Docs, and Google Sheets. I don’t expect all sites and apps to start mimicking Google’s application design style, but we’ll see this influence web design the way major Apple OS/design releases have in the past.
We’ve watched a move toward scrolling instead of clicking, with long, single pages in which numerous sections of content are visually differentiated. This arose out of increased use of mobile devices and brands that wanted to use storytelling to guide the user. The extreme result was one long page that comprised an entire website. However, that extreme has been refined so that a typical-sized company website may have several long pages for different types of content and goals.
If you use G+, Pinterest, or Twitter, you’ve seen card design. This design pattern is comprised of a grid of individual boxes, often white rectangles on a gray background. These rectangles have repeatable elements (like title, author, tags and an image). It is becoming a standard way to showcase content instead of a traditional “list” format, being easier to skim, digest and process. It also works well with responsive design. Some are pushing for a “card standard” — which may gain some traction on mobile apps, but such a standard seems unlikely to gain widespread support in website design.
Micro-interaction is the “in-the-know” term for a single, small action performed on a website, such as logging in or “favoriting” some content. When micro-interactions are done well and integrated into a fluid website experience, a user may barely register the details. Instead they know they enjoy using a certain website, instead of merely tolerating a site they “have to use.” This year, expect to see more of these used on websites of all stripes to make a fluid, enjoyable user experience. (Think small transitions or subtle, helpful animations.
The extreme of “flat” design has been reached. Designers’ obsession to flatten user interfaces as a backlash to skeuomorphism, drop shadows, 3D bubbles and excessive gradients was a welcome reset. However, designers have erred on the side of making everything too flat, with little distinguishing features between design, content and interaction. As a result, some interfaces are overly difficult to use, squashing the company’s brand personality. This year, website designs will settle on a better balance for design with cleaner, less-cluttered layouts with subtle patterns or small amounts of shadows and gradients to identify buttons and functionality. Let’s bring back personality!
Responsive Web Design is here to stay. On a basic level, responsive web design lets page contents slide into a vertical orientation. However, typography has not received the care required for optimal reading experiences. This year, responsive typography will be more fully embraced and integrated into responsive web design development. Web designers need to take into account the distance at which a user holds a device for optimal font sizing – it’s different for phones, tablets and laptops. More planning will be put into development to ensure reading on-screen is possible no matter what device you have or how close you are to the screen—arm’s length or across the room. Designers can adjust type proportions for device, viewport and resolution.
Being natural experimenters, some web designers will start employing some of the design approaches outlined above out of a sense of “fun” or to make their clients feel like they have “trendy” sites. But these trends will have the most impact in the hands of a designer who has gained a keen understanding of their client’s brand, model and business strategy, so that tools and tricks align with their mission and do what clients want all websites to do: engage, educate and convert.