As we come closer to the end of another year, it is clearly evident that 2016 has been another interesting year for the web design industry. We have previously looked at the trends that shaped web design in 2015 and this year, we have also seen significant, new web design trends emerge which we will examine in this article.
With regard to the development of digital experiences and web design, there has generally often been a clear separation of how a website’s look and its functionality are designed. The result has been a difference of opinion between developers and designers. However, this has changed this year, with many interface designers beginning to focus more on functionality instead of simply paying attention to form and design.
- Smarter Websites – Artificial Intelligence
The emergence of Artificial Intelligence (AI) has greatly impacted how web designers look at digital design. In its original sense, the design of a website has started to take a back seat and is more transparent. With more applications being developed to offer users contextual information, AI helps them to act on the information. This was first seen on mobile apps, but the web is quickly catching on.
One example of this use of AI is Facebook M, the social network’s answer to Siri. Although it is very similar to Siri, it has a range of features that outshine its rival. Facebook’s David Marcus says, “M is a personal digital assistant inside of Messenger that completes tasks and finds information on your behalf. It’s powered by artificial intelligence that’s trained and supervised by people.”
Yet another example of the use of Artificial Intelligence on websites is the introduction of Smart Reply for Gmail, which suggests answers based on received email messages. Incorporating these web design trends has seen a big shift in how users are interacting with companies and products.
- Non-Scrollable Full-Screen Web Pages
Finally, after much debate, non-scrolling sites are gaining popularity among web designers. Previously, one-page websites, which scrolled endlessly and had a sticky menu at the top, appeared to be the standard way to design website home pages. With the latest web design trends, it is now is great to see pages which require the user to click in order to navigate.
Although scroll-jacking has split opinions, there are times when it makes life easier. The key to designing these types of websites is limiting the page to the size of the screen. Non-scrollable websites often feature keyboard navigation. Examples include:
- Facebook Privacy Basics: Although it is not a responsive design, it is still an excellent site that explains the social network’s privacy features through the use of some nice illustrations.
- Fantasy: On this design agency website, which was launched earlier this year, the Work section has everything on one screen.
- Focusing on Interaction over Layout
Traditionally a digital design would start life in a design application such as Photoshop, where the page layout and visual appearance would be decided. While it is all very well to figure out the look and feel of the website at the start, this approach limits the designer when they want to figure out how it will work once it is populated with dynamic content on going live. It is also almost impossible to know how users will actually feel when interacting with the live website.
Because of this, some software companies have started to develop design tools that allow for prototyping of designs, such as SparkBox and Adobe XD (Experience Design). By using these new tools, designers can start to focus on the interactivity of their designs instead of leaving it as an afterthought, after the design has already been coded.
- Having a Sticky Headline to One Side of the Page
Agency sites and design studios are often the best places to look at the latest web design trends in action. One of the most popular features on new agency websites is having section headlines scrolling off to the side of the website’s main text. For now, this seems to be a desktop-only trend, so the following examples, while impressive, cannot be viewed on mobile phones for now:
- Code & Theory: On this beautiful website, the city names stay in place when scrolling through the jobs section.
- Stack Overflow: Although this example does not completely fit the bill, it gets a pass since it is not a design agency website. When you scroll through Stack Overflow’s website, its sub-navigation remains visible to the right.
- DDB Sthlm: This Swedish agency site also has this feature. When you click on Work in the menu and then proceed to scroll down, you will notice that the headline remains visible to the side.
- Over-The-Top Website Animation
It is now technically possible to add complex animation sequences to websites so this year, it would appear that many designers asked themselves, “Why not?” When these are done right, they offer website visitors a breathtaking and entertaining experience, but if the designer is not careful, the experience could bring back the memories of all-flash sites once again.
The thing to remember is: animation should be used with care, but when used, go all out. Some great examples of websites that use OTT animation include:
- Waark: This is a small, new design studio that has nonetheless managed to develop one of the most visually stunning digital experiences online this year.
- Animocons: This website features icon samples that have spectacular click animations.
- Rally Interactive: The beta version of the website has struck a great balance with the animations used. Rally goes crazy with the top, but mellows it out when a visitor clicks or selects an option.
With so many exciting new web design trends emerging in 2016, it will really be interesting to see what the New Year will bring!