5 Must-Have Web Design Trends for Visual Appeal and Usability

One of the fastest growing elements in website design is the use of video. From full-screen moving images to pop-ups and embedded video from social media, video is a must-have when it comes to content. Video can provide users with a glimpse into your world. The good ones hook users, making the experience immersive and keeping them on a website longer. 

01. Video as a Dominant Visual

  Seamless video is now possible on almost any device and in any environment thanks to universally faster internet connections. Video is a great tool to draw users into a website and generate a lot of interest. The important things to remember are that video must be of high quality, pair with simple contrasting elements, typefaces without a lot of slant or implied motion, and provide an experience that users will enjoy. In terms of popularity, full-screen video featured in a header-style “hero” format is chosen for most use cases. This format spans the top of the screen from edge to edge, often with a content overlay that includes a headline and call to action. These video headers tend to be one of five types:

1. Single video is looped in the background as in the Papazian site (above)
2. Series of short clips in a montage
3. Short movie
4. Interactive video experiences
5. The “non-video” that uses only subtle movements as in the Bundy site (below)

02. Hidden Navigation and Pop-Out Menus mimicing mobile

  What started as the solution to a mobile design problem has evolved into a design tool for responsive websites on desktops. The common cue for hidden navigation is a hamburger icon at the top left or right of the screen.  Websites such as Spotify and Starbucks (and their associated mobile apps) are a huge reason why hidden navigation has thrived. For Spotify, users tap the navigation at the top of the screen, revealing their navigation content from right to left to fill the screen. For Starbucks, the home page slides down revealing the navigation content.

One of the benefits of hidden navigation is that it creates extra space on the main page. This clean, more streamlined viewing experience has been made more popular by design trends such as minimalism, flat, and material design, all of which feature a sleek, simplified style that is free from clutter. Think about your audience here to determine if this is enough information to help them maneuver the site with ease. Some designers also incorporate a text cue (such as the word “navigation” or “menu”) to assist users in identifying the icon. And while the navigation itself is hidden, the path to it shouldn’t be. A common choice is simple lettering sized larger than necessary in relation to the space it occupies. (This might be a carry over from mobile aspect ratios, or just an  attempt to keep sites from looking empty on widescreen monitors.) All caps is another popular form in this style of navigation, perhaps because users are accustomed to header navigation links featuring capitalized typefaces. Not all hidden navigation has to completely fill the screen. Remember, many mobile options overlay and “push” the content, but don’t completely hide it. Reputation Squad (below) does this nicely with a bright color navigation bar that is scaled to the content, while muting the main page with the secondary layer.

03. Inspiration from Wearables   The design of a wearable is simple. The small screen can’t hold more than one piece of information.  It’s an effect technique that’s popping up in all kinds of projects. The aesthetic may change, but the root concept is to put one idea or one bit of information in a container and then stack and arrange those containers in different ways.  Adidas (below) does a great job of using containers. Each element includes a photo, headline and call-to-action link. If you hover over any part of the information, the hover state creates a boxed shadow. You can then click anywhere within the box to access the content. This simple interface is easy for users. It also makes cross-device design a breeze.

We’re seeing more of the the highly-focused, stripped-down aesthetic.

Wearable screens are too small and sometimes offer limited color and awkward shapes. But it’s not a problem. Just take a look at the website for the movie “The Lobster” (above). The lack of color and bold typography with a distinct call to action is user-focused.  While this won’t work for every site design, it can be an interesting break from the norm to entice users. Icons are perfectly suited for the space on a wearable, but when drawn properly (e.g. vector-based icons), they also succeed on websites as the dominant visual.  With the popularity of flat design in the past few years, designers expanded their color palettes, often using three to five bright hues. Now more websites are scaling back to just two colors. (And often one color if you don’t include black and white.) This started with wearables. Many of the small screens just don’t offer ample opportunity for massive color palettes because it would overwhelm users. Trama’s website (below) uses single color palettes to highlight information in its portfolio. Arguably, the website uses a wider palette because each “screen” uses a different color. The core concept, however, stays consistent: each design element has a simple, minimal color palette to draw the eye to important content.

Think about the screen on your Apple Watch or Fitbit, the design is quite minimalist. Filip Nordin’s website (above) with its simple streamlined style is easy for users to understand prioritized content and it looks great. Minimalism is a classical design trend that never really gets old.

04. Material Design Lite (MDL) for an unforgettable visual experience

  Material Design Lite is a more usable, more flexible version of Material Design, and one that you can implement in whole or in part for almost any website design. It offers overall functionality, focus on usability, and design known for clean lines and organization. Material projects are often bright and bold in color. Hues are deeply saturated and color combinations can be a little unexpected.  While MDL projects can feature big, bold color throughout such as Love Fila (below), this can be tricky to pull off with finesse. You need just the right content to make it work well. In this case, Fila had the perfect combination of elements to go big with color thanks to a colorful athletic clothing line.

This site transports the user into an engaging, immersive and truly unforgettable visual experience. An interactive call-to-action prompts the user to push a key button, after which they are transported into a colorful, super-energized video animation previewing the collection. The splashy graphics and vibrant transitions draw the user into the LOVE FILA experience, playing up and off the clothes and models. To make this animation fully mobile-optimized, the video is build in SVG to ensure a robust, smooth visual experience.

05.  Split-Screen Design (Desktop Stacked on Mobile)

  One screen. Two messages. Split-screen website designs are a fun, functional, and responsive way to create an engaging design that stands out. The concept of pairing interchangeable parts for a seamless user experience is key, rather than focusing on color and typeface choices, or how to use images. Split-screen aesthetics work particularly well with certain types of content. It’s important to understand that users will make a visual connection between paired items, so you should see it as an almost yin and yang concept. Because of this, make sure your content is designed to complement and benefit from a “paired” format. Split screens offer choice and control to users: Which link (or side) will get clicked first? What content is most appealing to explore? The click patterns and analytics behind these actions provide valuable data that can help shape future design and content decisions. Split-screen design can be the perfect tool for those times when you just don’t have many visuals to work with. Bright colors and interesting typography pairs can add interest without looking like something is missing.  Baesman (below) uses a pair of bright colors and two different headlines to hook users. Despite background video, it’s color and bold type that draws the user in. Hovering over one of the sections makes the other side fade to gray, enticing users to interact. The same bold, bright color-blocking is used throughout the site bring attention to the messaging and enhance readability.

Most designers want to provide a little surprise for users that keeps them interested. While your trick might not be as obvious as the upside down text on the Renate Rechner website (above), this is just the kind of detail that makes an impression on users.  Layering a single element across screens can provide an additional level of cohesion and flow. In other words, “split screen” elements can overlap. Take it another level and combine a split-screen pattern with other trends–such as flat 2.0 or minimal–for a funky, modern style.

So what’s the next web design must-have? The next frontier of digital design appears to be virtual reality, also called VR or immersive design. It’s inspiring to consider the design possibilities that could come from it. As they say, it’s all about the experience.