linkidin instagram twitter

15

Jan

Web Design Trends of 2016

foundry-digital-trends-2016

What does the future hold for web design?

With the world’s Internet usage increasing to 45% as of January 2015, a company’s online profile is more important than ever to business’ visibility and reputation. It is therefore of growing importance to have a website that represents your company successfully and entices your target user with its design elements and functionality.

Design decisions should always enhance the UI (user experience) with the customers’ needs being at the heart of what is created. The site’s aesthetics and functionality must be based upon what is appropriate and accessible for the target user rather than what are considered fashionable elements: just because you can, doesn’t mean that you should.

A Redditor compares the craze for including inappropriate and dysfunctional design trends for the sake of including something fashionable to bad 80’s trends that everyone obsessed over no matter whether they suited the individual. He posts:

“So many new options and capabilities are available and everyone is going crazy finding ways to add it all to their site. So now we have a bunch of shit that we all think looks great but is extremely unusable”

So 2016 needs to be a year of re-engaging with customer needs, only following trends that benefit the user and emphasize usability.

 

User Interface

More and more we are replacing ordinary and extraordinary functions alike with technology, from buying our weekly food shop, to planning a journey across the Atlantic. As the world becomes more dependent upon the Internet to carry out tasks, the competition between companies to gain web users attention and custom is set to increase.

ux-jewels

UI – the way we interact with a device-must cater for the US and Western world’s demand for an easy and smooth website experience. 2016’s new designs will therefore see even more of a focus upon usability in reaction to the prioritizing of the convenience of all aspects of a user’s online experience. Furthermore, usability’s centrality to a company’s UI will be highlighted when the middle classes of China and India become new users of technology. Companies will have to react to the needs of this new and unfamiliar demographic in order to gain their custom. It will be essential to consider the cultural characteristics of this new population of technology users, and tailor the UI designs accordingly.

For the year ahead, UIs will remain disconnected and diverse, with companies working independently on improving their products as technology progresses. We will continue learning product specific navigations. It will be many years before any common standards develop and companies converge.

 

The Long Scroll debate

The rise of mobile browsing has caused web design to lean towards the use of  Long Scroll in 2015, so will 2016 see the same behaviour? With pros and cons for both long scrolling and minimal scrolling, 2016 can be anticipated as a year where sites are split between embracing the long scroll and avoiding it.

2016 web design could continue to invest in the long scrolling trend as there are clear benefits to using such a design. First and foremost, long scroll somewhat caters for the increase in accessing the web through mobile devices. There is a natural feeling to scrolling, with it being an instinctive reaction when browsing on phone or tablet. Secondly, the flow of long scroll aids communicating a company’s vision, as all content contributes and works towards an overall message, rather than having the dislocation of clicking to separate spaces which breaks the reader’s flow. Hence why asbestosinhomes.co.uk chose this design:

long-scroll-example-

 

But will 2016 be the year when this Long Scroll popularity changes?

Indeed, with short scroll offering the benefit of getting to the point faster, 2016 may be the year where the short scroll makes more of an appearance. It has been argued that scrolling makes it harder to scan info for specifics and consume the information presented. Therefore compact design, where users navigate around content by clicking through shorter pages, may be on the rise. Certainly, there is such a thing as too long scrolling, and this could deter users who become frustrated with the endless scrolling being less time efficient.

So the balance between making navigation of a site simpler by removing the clicking for navigation of a site by using scroll, and having too much exhausting scrolling that deters a user from the site due to not being able to find the content they wish to view, is pivotal to designing how the navigation element of your site functions and is bound to be a continuing debate into 2016.

 

Card Layouts

Since first being pioneered by Pinterest in 2009, the use of cards has grown into a common sight across the web. This interactive element enables a site’s content to be broken up into small bites and presented in a clean cut manner, and thus avoids lengthy, cluttered content.

trends-card-layout-example

The usually rectangular cards act as an entry point, as users can click upon a card to open and extend content. This layout’s popularity part comes from its adaptability to a range of devices allowing cross-device consistency.

This layout’s clarity and accessibility makes it an element that is unlikely to disappear in 2016. We will continue to see the use of cards on sites that pride visuals and functionality alike.

 

Flat Design

46% of internet users expect a page to load in 2 seconds or go elsewhere. This rise in user impatience means a website has to load quickly or else risks losing viewers. The complex textures and closeness to reality of Skeuomorphic design has largely been replaced with flat design- a minimalist and simple concept- to avoid the clutter of images slowing the site load time.

trends-ven-diagram

 

With the minimalist flat design meeting the user demand for efficiency, flat design is destined to continue its dominant presence throughout the internet. For companies to retain their identity they may turn to additional design elements to make their sites distinct. Design ideas that may emerge are:

  • A bright colour scheme so that users associate certain colours to the company Simple typography.
  • Animations such as loading animations add personality to a site.

 

Animations

As mentioned above, animation is increasingly being used in web design to help communicate a brand. As well as providing visual stimulation, a carefully selected animation can contribute towards a website’s communication of the company’s vision and message.

In a year where flat design is due to continue and increase, elements such as loading animations can prevent sites looking the same, and add individuality to a site and provide content in an interactive manner. With page sizes on the rise, a key pro of using loading animations is that the user has something to look at whilst site pages load.

trends-loading-animation-example2

If chosen correctly, such animations can contribute to communicating the website’s message. However, make the loading animation too long and the animation will have the adverse effect of making the user impatient and deter them from using the site further. Therefore both the content and length of the animation must be considered carefully. To diverge from falling victim to the cookie cutter of flat design, loading animations will continue to be used in 2016 , perhaps with recognition that these can be customised to assist communicating a business’ vision.

With a website’s usability becoming increasingly important over the next year, Hover animations are likely to become even more widely used. Hover effects cleverly aid a users navigation of a site by providing visual feedback in response to where the mouse is hovering. A response as simple as a highlight effect can ease a users navigation around the site. Furthermore, providing feedback such as  details as to where a link is leading ,can be particularly helpful to provide first time users with a smooth experience.

 

Sliding Animations and Carousels

The use of slideshows and carousels greatly increased in 2015, rightly recognised by companies and designers as a successful way to present multiple images without overburdening a user. They can effectively capture the essence of a brand or company whilst avoiding clutter as demonstrated upon the NEBT website:

 

trends-slideshow-example1trends-slideshow-example2trends-slideshow-example3

 

Carousel: A user is required to scroll through the frames

Sliding Animation: The content display automatically changes.

The importance of the content of either a Carousel or Sliding Animation must not be overlooked. The crafting of a Sliding Animation is particularly key due to its automatic nature. Whilst a carefully crafted sliding animation can benefit the communication of a brand, accessibility and UX must not be compromised as a result of this visual component.

The benefits of reduced clutter, and visual communication of a brand makes it likely that the elements of Carousels and Sliding Animations will continue to be chosen for web designs, however, the need for originality in a world of increasingly similar design could see a rise in custom illustration and animation.

 

Navigation and menus

With a site’s usability becoming increasingly influential upon a user’s website experience, navigation should be among the most crafted and critically considered elements of the design process.

Another element that has emerged due to the increase and success of mobile internet is hidden navigation, otherwise known as the Hamburger menu. This compresses the entire menu into one icon that once clicked on expands to reveal its extent. The hamburger menu’s minimal design makes a site appear cleaner, which is particularly beneficial for the smaller screens of mobile devices.

trends-hamburger-image

But hamburger icons have begun to appear on desktop too, with many sites opting for this simplified look and navigation method. Whilst making sense for a small device upon which all space is valuable, this minimalist look can be harmful to the usability of full-size websites by adding an unnecessary complication of having to click for content rather than it already being displayed.

2016 is likely to see the continuation of the Hamburger menu with it undoubtedly looking sleek. However, its impact upon a site’s functionality is a critical consideration during the design process so that its discoverability is not harmed by the visual minimalism.

 

Hero images

Since sight is humanity’s strongest sense, Hero Images ( the image that greets the user when they first arrive to a site, typically sitting above the scroll) manipulates the idea that ‘a picture holds a thousand words’ .

trends-hero-example

Successful hero images capture and describe the site in an instant, enticing the user by giving them a taste for what the company does. Commonly, the Hero Image lies above the scroll as if a page header. It has become easier to load a HD image, which communicates a company’s attention to quality, and videos are now able to appear without significantly slowing a page’s loading speed. This uncluttered design continues a theme of sleek minimalism that 2016 is set to follow, as is able to communicate a business’s purpose in a visually engaging and appealing way.

 

360 Photography

360 photography is bound to be a prominent trend in 2016. It gives an audience a fully detailed visual description of a product. The user has control over what they see of a product and the ability to view from every angle.

trends-360-teddys-

With interactive zoom and pan features in addition to multi product views, 360 photography can pick out the finest detail not usually seen by the naked eye; it proves there is nothing to hide. This is likely to provide customers with a sense of confidence in what they are purchasing. With customer satisfaction increases, and returns rates reduced, 360 photography is set to emerge as a growing trend in 2016.

 

Foundry is passionate about the speed that web design develops and changes, and we look forward to seeing its progress over the year.

web-trends-2016

For more information visit:

https://uxmag.com/articles/2016-the-user-interface-revolution-underway

https://www.awwwards.com/6-web-design-trends-you-must-know-for-2015-2016.html

https://djdesignerlab.com/2015/07/15/emerging-web-designing-development-trends-worth-exploring/

https://blog.hubspot.com/marketing/web-design-trends

https://www.awwwards.com/be-careful-about-these-6-web-design-trends-in-2016.html



Let’s talk!

Send us your brief

and calculate your budget and timescale

Start