Top Web Design Trends for 2017

Bold and Creative Typography

2016 began the trend of websites using brass and bold typography to attract user’s attention in new and creative ways. A prime example of creative typography can be found on Nobody which uses an animated introduction with bold typography.

In 2017 we expect websites to keep on pushing the boundaries of what is user-friendly and acceptable in terms of typography. There will also likely be a large shift in the common web font of the internet, typically speaking a large portion of websites are set on using typefaces such as Open Sans and Helvetica however, web designers are starting to become more confident with using different kinds of typefaces.

A lot more thought and preparation is going into the typography of a website, the text is now being animated, individual letters are being emphasised, various effects are being placed on them, and even videos are being embedded into single characters of a word.

It’s not necessarily the most overused web design trend that we see across various sites, so if you want to start standing out from the crowd before the sheep come flocking in then see if you can start integrating bold typography more into your websites.

More SVGs

One of the frustrations that many web designers face is the use of raster or pixel-based images that sometimes become a pain to resize and move around for different screen resolutions.

The phrase SVG stands for Scalable Vector Graphics, the key is in the name and that is SVG graphics are 100% scalable as they are composed of vectors which allow them to be modified to any screen resolution or device and they’ll still look great.

It doesn’t stop there, SVGs are noticeably faster than their JPG, PNG or GIF equivalent as they don’t require a HTTP request. But wait there’s more, you can even animate SVGs because they are essentially an image which is drawn on page load through the code and you can treat them in a similar way to div tags in the sense that targeting them and manipulating them is a piece of cake.

We love the idea of SVGs becoming more popular throughout websites as it allows designers to have more creative elements to play with and animate to create a more interactive and exciting user experience.

Brighter Colours

As we progress to minimalistic web design more so as every year goes by it becomes harder and harder for designers to express their creativity with the limited canvas they are provided with. This has led to new and innovative methods that allow unique and personal touches to be added to the design of a website, one of these was the uptake of using brighter and bolder colour schemes that stood out even with a minimal amount of features.

Google’s material design has gained a huge amount of popularity over the last year, this has attributed to a substantial growth in websites using/incorporating bright colours in their design.

Both of these factors are not showing any sign of slowing down so our prediction is that 2017 will be a year of bright and colourful websites.

Greater Focus on Animation

Animation has changed greatly over the last decade and continues to heavily influence user experience, however, as more animation tools become available to use we will start to see animations become a standard for every website.

The most important thing to note is that as animation tools become more advanced they will also start to output more advanced and refined animations that will hopefully not prove to be too resource intensive.

While we do recommend incorporating animations into a website, doing it for the sake of having an animation is completely pointless. Always look to how, the brand you are working on, wishes to promote themselves and what you would like the tone of the website to be. One you have studied those two pieces of criteria then you can start to create a powerful and meaningful animation that is appropriate for the brand.

Material Design

While material design is not necessarily a new concept it certainly has taken the internet by storm and is becoming increasingly common as time goes on.

What is Material Design

Material design is the concept of taking a paper and ink design and translating this into a website, so, for example, you would include attributes such as shadows and defined edges that highlight elements of the website which are clickable.

While it is a great concept to build websites on there have been a few complaints throughout web design communities which are, websites that adopt Material Design are all very similar to each other. The main problem is that a lot of web designers aren’t just taking the core principles of Material Design and applying them to certain elements of their website, in fact, what they are primarily doing is strictly adhering to the guidelines set out by Google and not adding their own unique twists.

Once this phase of making every aspect of a large website material design passes, we expect that designers will start to move in the right direction and start only applying core principles of material design.

Modular Design

In the world of web design, very much like fashion, trends tend to go round in circles and spike in popularity every now and then. Modular design isn’t new at all but it has gained a large amount of traction over the last couple of years.

What is Modular Design

Modular design is pretty much what it says on the tin, a web design approach that incorporates a modular, block grid layout. The main benefits of using modular design is that it’s incredibly responsive due to the fact that the grid design stacks effectively on different resolutions and screen sizes.

A good example of modular design would be the Microsoft Metro design which was used in the Windows 8 operating system start menu however, it is well known that this particular design never picked up much popularity.

Flexbox

Flexbox is a CSS3 layout mode that arranges certain elements of a page in a pattern that allows them to behave in a predictable manner when the page layout has to change in order to accommodate for a different screen size or device.

Over the last couple of years, flexbox has steadily gained a considerable amount of traction which has led to all modern browsers supporting it completely.

Microinteractions

Microinteractions are specific moments that occur on a website when a user interacts with it in some way, they can be found across a wide range of applications but for argument’s sake, we are focusing on micro-interactions on websites in this post. These micro-interactions can be something as simple as liking a blog post, filling in a form, posting a comment or pretty much any other insignificant interaction that a user can make on your site.

We use the phrase insignificant very lightly as the goal behind micro interactions is to provide feedback for users when they perform these small actions on your website which in turn should improve their user experience.

As designers are constantly looking to improve user experience we have watched micro interactions grow in popularity massively and we can’t see this slowing down through 2017, in fact, it should accelerate in popularity over the next year.

Complex CSS Grid Layouts

Please note this is an experimental CSS module that aims to fix all of the problems that are encountered when trying to create hacks that solve layout problems on websites.

Flexbox is the current widely used solution that allows designers to solve some of life’s most complex problems, such as vertical centring, however, it wasn’t created with a full-page layout in mind.

This is where the CSS grids module differs from the flexbox as it has been built with full-page layouts in mind, it does share a similar feature with flexbox and that is to make the rearrangement of content for different media queries easy and stress-free.

Summary

There are many great web designtrendsthat are going to have a major impact on how we interact and create websites in 2017.