Web Design trends to expect in 2016

Web design trends keep getting updated from skeuomorphism to flat design and now slowly material design is picking in not just in mobile but in mobile web space as well. The decision whether to move to new design trends should depend on your users and your business. Just because something is new and trending doesn’t mean it suits your business logic. There are many websites that try to move and make huge changes to the website, on the end they tend to lose users and fade away.

Here are web design trends what you should be expecting in 2016

1) Full page carousels or Presentation
Carousels initially were used in the hero section of a website. The recent trend is, it being used everywhere as a whole web site. Though these websites having sliding animations for carousels are clutter free and can be operated with the keyboard arrow keys, some find it annoying. Carousels can work, but they should be carefully crafted and optimized to ensure that they don’t compromise UX and accessibility. One downside it is difficult to optimize fro mobile web.

[caption id=”attachment_612" align=”aligncenter” width=”620"]

Image Source: CodyHouse[/caption]

Designmodo’s Slides is the best solution if you looking for to have Carousel website. CodyHouse can be used for presentation slideshow.

2) A lot more revealed on Hamburger menu
As most of the traffic nowadays comes from mobile devices, having a hamburger menu makes a lot of sense. Some have even kept it consistent on the desktop as well. Having the whole navigation drawer revealed when the hamburger is clicked. Placing navigation under a hamburger menu makes a site cleaner, sleeker and allows more space to showcase content. And most people are familiar enough with the pattern. But sometimes it’s hard to discover the hamburger icon.

[caption id=”attachment_613" align=”aligncenter” width=”620"]

Image Source: Squarespace[/caption]

[caption id=”attachment_614" align=”aligncenter” width=”620"]

Image Source: Squarespace[/caption]

To conclude, the user behaviour determines whether you should use a hidden navigation drawer on a full desktop site. Don’t sacrifice usability and discoverability for pure aesthetics.

3) Material Design is here to stay
Since Google introduced Material Design for Android, a lot has changed slowly we were able to see Material Design in websites as well. This trend reflects the move toward smartphones as the principle and first device (mobile-first) used to access the web, over and above the desktop computer. Expect more websites implementing the Material Design.

[caption id=”attachment_615" align=”aligncenter” width=”620"]

Image Source: MaterialUp[/caption]

MaterialUp showcases all the material design elements used in mobile and the web. You can use my Material Design One Pager website for free.

4) Parallax Scrolling
Recently, we’ve seen more sites appear that make use of parallax scrolling. The parallax technique is nothing but allows the foreground and background content to scroll at different speeds, creating an illusion of depth (feel real, 3D). It can be used to very good effect, but it’s debatable if it can be described as having good UX. Parallax websites are mostly used if you wanna showcase a story or a product.

[caption id=”attachment_617" align=”aligncenter” width=”620"]

Image Source: SpaceNeedle[/caption]

Example Seattle’s SpaceNeedle website. The only downside of such websites, that they are heavy on JS, which increases site load time.

5) Interactive Load Screens
As discussed the con above some websites are heavy on page load time, it is necessary to show your users some load screen instead of loading content and images and JS later or slowly. This gives a better user experience for the users. Once the screen is fully loaded, there are plenty of interactive options and it becomes clearer what the website is all about. This maintains consistency for users on slower internet connection as well.

[caption id=”attachment_616" align=”aligncenter” width=”620"]

Image Source: McWhopper[/caption]

6) Particle Animation
Particle animation sets a personal portfolio apart from others, helps to break the monotony of websites with a casual spirit, strengthens a theme and even benefits non-profit projects. It is a subtle yet powerful trend that each day is gaining more popurality.

[caption id=”attachment_622" align=”aligncenter” width=”620"]

Image Source: ShareTheForce (StarWars)[/caption]

ShareTheForce is one of the websites, that uses particle animation.

7) More Illustrations and Complex Typography
Slowly illustrations are being used more widely than just stock photos in hero section. Because with illustration, it’s often easier to place yourself in a scene than it might be in what a photo features. Photos will be replaced with more relatable illustrations that connect to the viewer in a more personal manner.
Typography, on the other hand, is being experimented. Designers use more fonts to combine to create a complex type font to give a good effect on typography. Though it is said, not to use more than two typefaces in a website.