Website design trends for 2016

By Alex Aperios, Digital Designer in Mobas' Digital team.

Responsive design

Responsive web design has become increasingly popular over the last few years due to the huge rise in mobile use.

Unless you’ve been hiding in a cave then you may have noticed on your new and improved iPhone or Android that sites are becoming a lot faster and prettier. And this is due to it being a lot more cost-effective and easier to make a site mobile-friendly.

As with anything positive, there are always a few negatives mainly due to the lack of experience or knowledge when responsive sites have been created. These issues can be avoided by keeping to the simple rules below:

1. Performance testing: the most obvious of the rules but also easily avoided as it’s the most time-consuming.

With Google’s most recent mobile-friendly update it’s in your best interest to make your site run as smoothly as possible. This will increase the rate at which users use your site from their phones and, as a large percentage of websites are now being viewed from phones, you should never forget to test.

2. Avoid using JavaScript and CSS image-loading using the display:none tag. This still downloads the image to the device and adds unnecessary weight to a page.

3. Make sure images are fully responsive, defined by using percentages.

4. Use conditional loading for JavaScript as many of the JavaScript components used on a desktop site will not be used on smaller devices. Pay particular attention to third-party scripts such as those used for social sharing as these often impact negatively and reduce performance.

5. Try using RESS – Responsive and Server Side.

Responsive design is no longer just a trend but a part of designers’ and developers’ lives, so taking it upon ourselves to find new ways to make our sites better will only benefit how we use the web in the future.

Page animations

With the rise and evolution of code languages we are able to make almost anything work on the web. From live interactive games to interactive movie trailers, so much can be created to enhance users’ time on a website.

With this in mind, I’ve come across some beautiful animations which made me spend a lot of time on the site but distracted me from what they wanted me to do (buy a product). So it may have been a memorable experience but the site didn’t achieve its aim.

Beware of just throwing in an animation anywhere on the page: it needs to be an extension of the story to add a bit of fun and personality rather than distract.

1. Parallax – used primarily for scrolling down the page to show more depth of an image without interfering with more important content, or to pull in objects for a more fun navigation of the page.

2. Small animations – subtle button hovers, loading animations, interactive forms and anchor tags.

Examples of good animations include:

codepen.io/collection/IDwnG

www.wove.com

www.beoplay.com/products/beoplayh2#light-loud

tympanus.net/codrops/2015/02/26/inspiration-button-styles-effects

Product-focused design

You may not have come across this modern style of design as it’s only gained in popularity this year. It samples the popular minimalistic flat design but uses large-scale photography of brand new products as on the industry-standard Apple website.

Apple may have set the standard but they are not the only people doing it: Google, Android, HTC, Webydo and OnePlus are all great examples of where this design style is currently at.

These are not only beautiful-looking sites but they all work well and responsively. They incorporate minimal flat design with clean fresh imagery without over-complicating the page. Subtle shadows pull the images out of the page, giving it a rich and vibrant feel.

This design is intended to provide a good use of UX and UI across all devices, without the heavy and slow feel when navigating throughout.

This is to some extent my favourite of the most recent trends in web design and something I believe will stick with us in the near future.

Flat design

Flat design has been at the forefront of trends over the last couple of years due to its flexibility with other trends such as product-focused which has a similar feel and responsive design – with which it fits really well.

With its flexibility and minimalistic feel, it’s unlikely to disappear anytime soon. I for one am happy about that as it’s a trend that lends itself well to other styles such as bold colour schemes, subtle drop shadows, clean typography, large product photography and simple button hovers.

Examples of good flat design include:

www.beoplay.com
special.bose.eu/fr

www.webydo.com
oneplus.net
htmlcolorcodes.com

Mobas is a creative, digital agency based in Cambridge, offering a number of lasting web solutions from responsive web design, digital consultancy and search engine optimisation. Find out how you could benefit from better digital support by contacting us today.