5 Must-Have Web Design Trends for Visual Appeal and Usability
01. Video as a Dominant VisualSeamless 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:
- Single video is looped in the background as in the Papazian site (above)
- Series of short clips in a montage
- Short movie
- Interactive video experiences
- The “non-video” that uses only subtle movements as in the Bundy site (below)
02. Hidden Navigation and Pop-Out Menus mimicing mobileWhat 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.
04. Material Design Lite (MDL) for an unforgettable visual experienceMaterial 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.