Responsive Web Design
In the past few years, responsiveness has revolutionized the way we design websites. “Responsive” simply means that a website will be optimized for viewing on all screen sizes, whether a smartphone, tablet, desktop or TV. Fluid, flexible layouts, built in percentages rather than pixels, are used to easily re-size and re-position the content based on the size of the device.
What this means for web design is that trends that work well for responsive websites are going to dominate 2016.
Small Interactions with Big Impact
Using animations can create a huge impact on the user with very little time and effort. Some areas of a website that are best suited for animations:
When the user clicks or hovers on a navicon, animating the transition between the main screen and the navigation menu is a cool attention-grabbing interaction. A lot of websites are animating the navicon itself, from three lines (the common "hamburger" icon) to a cross.
To indicate that something is a link, adding an animation is a fun and interactive way of communicating with the user. It can be used with a dropdown menu, a slideshow or a gallery of images.
Scrolling on Long Websites
Thanks to Pinterest and other websites that rely on scrolling down the page rather than breaking content up into many pages, long scrolling websites are now common especially for homepages. It’s a lot of fun when there are navigation links for the page itself – ones that allow the user to scroll down to the content that they're looking for or just to interact with. Positioning them fixed to one of the edges of the page is popular so that as you scroll, they stay with you.
Card-based Design or Content Blocks
Creating content blocks or “cards” that are easy to navigate and easy to re-position into one, two, three or more columns for the various screen sizes have become a common layout trend. A lot of the most popular social media sites, like Facebook and Pinterest, are using it. It's also great for news-based websites, portfolios and other image- or content-heavy websites.
Full Screen Images or Videos
Full screen images and videos look awesome and work great in responsive layouts that are built on percentages. Showcasing beautiful photography or illustration is an amazing way to grab a user's attention. One large hero image is popular but another trend that’s creating an impact is using two or more images together to create a gallery.
New Ways of Navigating
Designers in recent years have come up with many ways of dealing with the lack of space on mobile devices and now we’re seeing larger screens taking the same approach as smaller ones by hiding parts of the navigation and showing them only when the user interacts with a navicon, whether the “hamburger” icon or something more unique. This frees up space on the main screen and enhances the minimalist trend of recent years.
Making the navigation fill the entire screen is another trend for 2016. It's commonly seen on mobile devices, but now it’s being used on desktop sizes as well.
Colours That Will Rule 2016
Everyone is talking about Pantone’s surprising decision to choose not one but TWO colours for 2016: Rose Quartz and Serenity. Otherwise known as pink and baby blue. Pantone have said that it represents a trend towards blurring perceptions about masculine and feminine, and challenges traditional colour association. It means that 2016 will be the year of pastels for fashion-forward brands and websites.