What Trends To Expect From 2016 Website Design

The past year has seen a surge in popularity of responsive website design, as more and more sites join the campaign to become ‘mobile ready’ which is now made more important after Google’s Mobile Friendly update.

Lets have a quick look at what’s been popular the last few years and what we should expect for 2016.

Responsive Design

Responsive website design has become incredibly popular in recent years, thanks to the rise of mobile internet usage. Responsive web design is the approach that suggests that design and development should respond to the user’s behaviour and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. Essentially, it’s a design that can automatically adjust to any screen resolution and just a few short years ago, it was enough for a design to render attractively in several designated viewports.

With the advent of mobile devices coming in more varying screen resolutions, definitions and orientations, responsive website design is becoming less and less of a trend and more of a best practice.

UI Patterns

UI patterns are a collection of patterns that are aesthetically pleasing and functional. They could also be treated as visual strategies for solving common usability problems. The rise of WordPress sites and a growing template market, along with responsive website design compliance has led to a lot of sites looking very similar. But having a similar look isn’t necessarily a bad thing. In fact, the way users have been consuming the web these days has led to a lot of common UI design patterns and there’s little, if any, in the way of innovation.

In other words, a checkout will still be a checkout and should function as such. Same with a login model. There’s no real reason to reinvent the wheel. UI patterns must guide users through a smooth experience.

Here’s a few patterns you should be familiar with:

The hamburger menu

Created by ex-product designer for Xerox Norm Cox in 1981, the hamburger icon was originally designed to simply indicate a list within the Xerox “Star” system. While some criticize this pattern’s use, there’s no doubt that it’s widespread use makes the function easily recognizable for users.

Account registration

You’ll find this pattern whenever you try to register for a site. This is often used to know who the active user is in order to provide personalized content or opportunities to conduct a purchase. There might be a form to fill out or a button that’ll allow you to use a social account to sign up.

Long scroll

Placing all your important elements above the fold is now a well-known myth. Furthermore, almost everyone is accustomed to long scrolls thanks to mobile devices. The technique works especially well for sites that want to lure users through storytelling, and you can still mimic a multi-page site by breaking the scroll into clear sections.

Card Layouts

Popularized by the image-sharing site Pinterest, cards layout is a practical method for design whose usefulness is just now being understood. Each card represents one unified concept. Since they act as “content containers”, their rectangular shape makes them easier to re-arrange for different device breakpoints. Furthermore, this emphasis on organisation and clarity extends outside of the desktop, making them ideal for mobile and responsive designs as well.

Hero images

Hero images are large attractive headers consisting mostly of images which are directly related to the content. Most of the time these are used as landing pages for single-page or parallax websites. One common layout you’ll find is a hero image above the scroll, followed by either zig-zagging sections or a cards-based arrangement.

Animations

As web design is flattening out, websites are starting to look more and more alike. One way to help make your website stand out is through the use of rich, clever but subtle animations. Animations are being used more and more to enhance a site’s storytelling, making the experience more interactive and entertaining.

However, you can’t just place them anywhere. Carefully consider whether it adds to your website’s story elements and personality.

Here are some of the more popular animation techniques:

Loading animations

These are used to entertain and delight users during an otherwise tedious experience. These tend to be popular for flat design, minimalism, portfolios and one-page sites.

Navigation and menus

Hidden navigation menus have become increasingly popular, especially as they can be used to save screen space. As you can see in the example, the website uses animations to reveal a menu when clicking on a specific button and prevent a jarring transition (like a navigation drawer hidden behind a hamburger icon).

Hover animations

Hover effects give a more intuitive feel to a site as users mouse over content. Users unsure about a feature’s function tend to hover over them automatically for instant visual feedback. Hover actions and tooltips provide a valuable user experience. They allow users to get extra information without clicking away from where they are on the site. They can also aid in navigation or provide additional resources.

Galleries and slideshows

Galleries and slideshows are an effective way to showcase multiple images without overburdening the users. These are great for photography sites, product showcases and portfolios.

Motion animation

Our eyes are naturally drawn to motion, which makes it the perfect tool for drawing a user’s attention. Motion can also help with visual hierarchy. This can help to add interest and intrigue to forms, CTAs and menu items.

Scrolling

Smooth scrolling relies on animation and gives further control to the user, who can determine the pace of how the animation unfolds.

Background animations/videos

A simple animated background can add visibility to a site, but should be used in moderation or it can be very distracting to the user. The key is to work on individual sections or create a gentle movement of an entire image.

Material Design

Material Design is a design language developed by Google. It uses shadow effects and the concepts of movement and depth in order to create designs that appear more realistic to the user. The goal of Material Design is to create clean, modernistic design that focus on UX. It makes more liberal use of grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows.

Before now, we’ve seen the majority of Material Design projects limited to app design, but this coming year we might see more of it on desktop. Furthermore, Material Design was intended to provide great UI and UX across all devices so its potential has yet to be fully explored.

Flat Design

Flat design is a style that gives the illusion of three dimensions such as excessive use of drop shadows, gradients or textures and is focused on a minimalist use of simple elements, typography and flat colors. It has been around for a while and is compatible with other trends such as minimalism, responsive web design and Material Design.

It’s likely that we’ll be seeing more of the following trends in flat design soon:

• Long shadows – These bring more depth to flat designs.
• Vibrant color schemes – Popular UI frameworks and templates have prompted many to begin using more vibrant colors in their designs.
• Simple typography – Simple typefaces help to ensure that text remains legible and readable in flat design.
• Ghost buttons – These allow for functionality without distracting from the UX and are often represented as outlined, clickable links that change when the user hovers over them.
• Minimalism – Looks to cut down on the number of elements in order to create a fresh, uncluttered UI.

Some Reminders

Website trends may reflect how modern design is used to respond to popular demand and that’s why using them most of the time, if not always, is highly agreeable but make sure it’s best for your users. For example, applying infinite scroll for an e-commerce website would be pushing it.

Trends are nothing more than additional tools for designing. Always remember to pick the right ones that do the job for you.