Happy New Year 2015

It’s a New Year and, if you’re planning to refresh your website in the coming months, here’s our list of 2015 web design trends to keep your website looking up-to-date and at the cutting edge of design:

 

1) Enter “Material Design”

In recent years, web design trends have moved away from curvy objects and shiny colour gradients, towards large, flat (single colour), boxed designs – see our article from 2013.

This isn’t going away – it’s very much still the current design style. However, this style is becoming more refined.

Google has taken a lead with its “Material design” concept, developed over many months, which it says is “grounded in tactile reality” and “inspired by the study of paper and ink”.

What on earth does that mean?! Well, take for instance a dialogue or registration form within a website. If it has a series of steps, it should provide visual clues on its depth, so users sense a real life perspective on the layers that lie beneath the top screen. This helps users to naturally pick up how they navigate and interact with the website application. Movements and animations are also designed to behave as if they were physical objects, again so users can easily and naturally understand what is happening. In addition, Material Design is about pleasing the eye, such as deliberate colour choices to create an hierarchy of where the eye should focus, as well as intentional white space to immerse the user in the most important parts of the page.

It’s not going to be suitable for every type of website and, in fact, it’s being used more for Google’s mobile apps at the moment (and its core Android software). However, once millions of Google users become accustomed to this design style, it’s certainly going to catch on! The focus will be on having carefully refined designs that provide better user experiences, rather than websites that are just chucked together with all sorts of colours and layouts!

Google Material Design - 2015 web design trends

 

2) Subtle animation

McMillans Solicitors in EssexWe’re not talking about shocking, tacky Flash animations from the olden days! However, subtle design animations are making a comeback. For example, a contact button fading or twisting into view as the user reaches the bottom of the page, which helps the website’s “call to action” grab some attention.

Or parallax animations, where the image background moves at a different rate when the user scrolls down the screen, which (if done in the right way and sparingly) helps lift the content up, like it’s floating on top of the screen.

Both of those examples are shown in a website we launched recently for McMillans Solicitors, based in Essex, although the effects only work on desktop monitors (and have been disabled for smaller devices, such as tablets).

 

3) Ghost buttons

Buttons don’t always have to be solid and bold. “Ghost buttons” are now being commonly used in new web designs, which don’t distract users too much, but they’re there if you need them!

These definitely feature in the 2015 web design trends.

Here’s another example we did for McMillans Solicitors:

Ghost Buttons

 

4) Responsive (mobile-friendly) design is a necessity

In recent years it has been obvious to anyone that responsive web design is the way forward. Responsive design means that the webpage adapts to different screen sizes, from desktops to laptops, down to tablets and smartphones.

In 2014, it’s gone from a “nice to have”, to it really just being expected from a website’s visitors. I said in my blog in January 2014 that there’s “no excuse” for not having a mobile-friendly website and that, in a survey commissioned at the time, it was the number one priority for marketers last year.

Nowadays, I see visitor stats declining on websites that are not mobile friendly, as smartphone and tablet users see them as too much of a pain to use. Let’s not forget that, on average, mobile users now account for almost half of all website visits!

If your website is not mobile friendly, you need to address this in 2015!

 

Full screen image width5) Full width content on your computer monitor

Many of the latest website designs now use the full width of the computer monitor.

Text content, rightly, needs to go in a narrower column, seeing as our eyes can’t cope with really long lines of text.

But pictures and videos can look great when they make use of your widescreen monitor and help create an immersive experience.

 

6) Long pages – encouraging scrolling, not clicking!

The design rule a few years ago was to have fairly short pages that people could quickly digest. That’s now not the case and, as long as the page is structured well into clear sections, many websites now embrace the concept of having a very long pages that people can simply scroll down.

It’s also easier for mobile users, who can simply slide down the webpage without waiting for extra pages to load.

This is the design principal we used in our latest project for The King’s Ditch pub in Staffordshire, where the introduction, menu, location details and other information are all conveyed on a single page. This one-page design has clearly defined blocks of content, with the order of sections also carefully chosen.

 

7) Always present (or “sticky”) navigation bars

This isn’t actually a new idea (in fact we’ve designed websites with a sticky navigation bar many years ago!), but in recent months there’s clearly more websites using a fixed navigation bar that stays at the top of the screen when the user scrolls down the page.

I’m very much a fan of these – it ensures the user can easily navigate around and encourages them to spend longer on the website.

Facebook uses a sticky navigation bar that stays at the top of the screen, useful for displaying alerts:

Facebook fixed navigation bar

 

Business People - stock photo8) Professional, custom photography

Forget the generic stock photography of smiling office workers, it looks unrealistic and nobody believes it! Use real images that your visitors can relate to. However, make sure the imagery is professional and high quality – the image you convey is still important!

 

And 2015 web design trends I’m less keen on…!

Hidden navigation:

I’ve spotted more websites recently with a hidden navigation menu, which you have to find and click on, before seeing the website navigation panel appear. I can understand it feels cleaner and works ok for creative-style websites, but personally I’m a big believer in clear, obvious navigation menus.

From watching people every week use the websites I’ve designed, in my opinion having a really easy-to-use and simple user interface is key to a successful site. Not everyone is confident using the internet and taking away a core part of a typical webpage layout seems ridiculous to me! Perhaps in the future it’ll catch on, but I don’t think we’re ready for this yet!

See the example below that has a small menu icon in the top-right:

Hidden Navigation Menu

 

Massively bloated pages:

With all the fancy new layouts and animation effects being used, don’t forget this can add quite a bit of data to your filesizes, or mean lots of extra little files have to be loaded on each visit to your webpage.

A recent survey by Sitepoint suggested the average webpage download size increased by 15% in 2014 – to a whopping 1.9MB!

Remember that many of your website users will be using slow 3G mobile networks (or worse than that!). They’ll get impatient if your website takes ages to load and they’ll go elsewhere, so pay attention to speed optimisation.

I’m planning to do a talk to a WordPress conference in the near future on this very subject!

 

If you’re interested in seeing how web design trends have changed over time, we recently wrote an article on how Christian Wolmar’s website has evolved over the past ten years.

Wishing you and your website a successful 2015!