The Biggest Web Design Trends of 2015 (so Far)

With the final third of the year fast approaching now is the perfect time to take a look at the biggest web design trends of 2015 so far and put them under the microscope. New trends are always exciting in an industry that thrives on innovation, but it’s important we question every design choice rather than simply follow the latest fads.

So let’s take a critical look at the trends that have dominated the year so far and weigh up the pros and cons.

 

Hero Backgrounds

Hero backgrounds aren’t a new trend by any means, but the way we use them to create that first impression is rapidly evolving.

 

Video backgrounds

Screenshot 2015-07-24 at 11.42.02

Digital advertising agency mediaBOOM uses a simple HTML5 looped video to add a cinematic touch of class to the first view of its page.

Pros:

  • They look pretty incredible
  • Highly engaging
  • Says this brand is cutting edge
  • Video can tell users a lot in precious few seconds

 

Cons:

  • The video production process itself
  • Takes time to load (not ideal for mobile)
  • Limited support
  • Video offers no context to search engines and typically means less content the likes of Google can read
  • Autoplay also presents some UX concerns

 

Verdict: Video backgrounds certainly look the part, but they come with their challenges, especially on mobile. Always think about context too – it makes sense for a media agency to use video footage, but a law firm in London may have better options.

 

Hi-res image backgrounds

Screenshot 2015-07-24 at 12.01.34

Digital design agency Fubiz has a flair for stunning photos, graphics and just about every form of visual content. Instead of a video background we have hi-res images for the hero space – a trend that has really taken off this year.

Pros:

  • Quality, hi-res images look stunning
  • Especially on HD displays, which are becoming commonplace
  • Images offer more context to search engines (HTML images that is, not CSS backgrounds)

 

Cons:

  • You need rights to top-notch images
  • Image heavy sites can be slow
  • You have to optimise for standard and HD displays
  • Optimising for mobile also comes with its challenges

 

Verdict: Using hi-res images involves a lot of work to keep your site loading fast and optimised for different devices. It can be done though, with some crafty compression, CCS sprites, progressive loading and a number of other techniques on the development side.

 

Colour backgrounds

Screenshot 2015-07-24 at 12.28.01

Taking the complete opposite approach we have Lunar Gravity which adopts a colour background and strong type to create a bold, yet minimal design.

Pros:

  • Super light on code and quick to load on any device
  • Do it right and you have a distraction-free design where your text does all the talking

 

Cons:

  • You only have type, colour and layout to create that striking first impression (doesn’t mean it’s not worth the challenge though)
  • You’ll almost certainly need to pay for premium fonts

 

Verdict: If you can pull off the colour background approach and still end up with an inspiring design you shouldn’t have any problems with loading times or device optimisation. Your challenge is to create something that says a lot with very limited resources, but if you can make it work you’re off to a great start with designing a lightweight site that works on every device.

 

Pattern backgrounds

Back in May WebDesignerDepot ran this article on the rise of pattern backgrounds, including this design at Jam3.com. In this case we have a geometric animated pattern, using HTML5 canvas and javascript, which interacts with mouse or trackpad movements.

 

Pros:

  • They look great, like the work of a true master designer
  • Highly immersive and powerful for brand image
  • Backgrounds have never been so diverse and advanced

 

Cons:

  • As backgrounds become more complex they also become more resource heavy (especially animations)
  • Canvas performance on mobile is still particularly poor

 

Verdict: These background animations look unreal on devices that have enough power behind them – especially on HD displays. Performance on mobile is a big issue though, but you can always use a standard CSS background pattern for mobile and save the fancy stuff for more powerful machines.

 

Layout Trends

A number of layout trends have also taken hold this year as designers explore new ways to cater for multiple devices and break free from the lingering constraints of the desktop-only days.

 

Full-width layouts

Screenshot 2015-07-24 at 13.16.06

You don’t need to speak French to see Jardins Poudriere has adopted a full-width design that sets just about everything to 100%. Using high-quality images, minimal content and slick scrolling to round off an immersive widescreen experience, this full-width layout looks great on just about any device.

 

Pros:

  • Very clean HTML and CSS, at least in terms of layout and basic styles
  • Takes almost no work to optimise this layout for multiple devices
  • Lends perfectly to scrolling, parallax and minimal designs

 

Cons:

  • Not ideal if you have a lot of written content to organise
  • The same could be said if you need a very structured layout

 

Verdict: This super clean approach is one of the best options for device independent design – something we should all strive for as technology provides users with new ways to browse the web.

 

Split screens

Screenshot 2015-07-24 at 14.22.10Peugeot is is one of many brands using a split screen design on their hompage this year, allowing them to promote two messages at once or combine visuals to convey deeper meaning. In this case Peugeot uses the divide to capture two marketing messages – the product on the left and the emotional appeal to its right.

 

Pros:

  • A fairly new concept that stands out from the traditional hero space concept
  • Gives designers two canvases to work with on the same screen
  • Lends well to visual content

 

Cons:

  • More content for users to digest
  • Danger of having too much going on at once
  • Too much choice can also be a conversion killer

 

Verdict: There’s a great opportunity here to split or combine marketing messages in a very short space of time, in a fresh design concept that really stands out. In this case though, five actions between the navigation and CTA buttons, plus two independent image sliders may be overdoing it – especially for first-time users.

 

“No chrome”

No, nothing to do with the browser developed by Google, but rather a design term for sites that ditch the default header-container-footer structure. Typically, you’ll see a lot of centred content or a horizontal hierarchy, starting with the most important content on the left, working its way right (the direction users tend to scan a page). The result is less elements on the page to distract user attention, placing further emphasis on the content and its message.

 

Pros:

  • A very clean, sleek approach
  • Strips websites of unnecessary divs and sections
  • Ideal for luxury products like watches or perfume

 

Cons:

  • Breaks from user expectations
  • Could result in less semantic code
  • Footers are a useful navigation tool

 

Verdict: Removing the header and footer from a design puts all focus on the content, brand or product you’re designing for. It’s a great way to remove distractions and add emphasis to your message, as long it’s not at the expense of user experience. People shouldn’t have to figure out how to navigate a site; it should be obvious, while footers are also a great navigational tool to stop users leaving once they reach the bottom of a page.

 

Parallax

Screenshot 2015-07-24 at 18.54.38

Parallax was possibly the trend of 2014, but the common theme was bad parallax scrolling as many designers put their own creativity ahead of user experience. Thankfully, parallax has matured a lot over the last year and we’re starting to enjoy some jaw-dropping scrolls that don’t compromise on usability.

 

Pros:

  • Done well, parallax can look incredible
  • And highly immersive too
  • Comes with all that cutting edge feel brands want to be associated with

 

Cons:

  • It still asks a lot from browsers and internet connections – especially on mobile
  • The line between impressive visuals and awful user experience is perilously thin
  • Success is determined as much by code as the design – be wary of plugins

 

Verdict: It’s a trend that’s certainly coming of age and knows how to make an impression. The trick is making sure it’s a positive one and not the kind of impression that causes a headache for users.

 

Typography & Buttons

Typography plays its biggest role yet in web design for 2015 and those all-important call to action buttons have been given a facelift too.

 

Oversized typography

Big, bold, oversized type was a trend from last year and, if anything, it’s grown even bigger for 2015. Typically, a single message is spread across the screen in jumbo text, or you’ll find a contrast of size between headline and subheading.

 

Pros:

  • Quite literally makes a bold statement
  • Quick message, instantly understood by visitors
  • Works beautifully with full-screen background images, patterns or video

 

Cons:

  • Leaves little space for other elements or content
  • Can limit the amount of information in the first view

 

Verdict: If you have a short, bold message to get across and you want an imposing design then oversized type is a strong option. Chances are you won’t have much space left for more than a headline, subheading and call to action, but this isn’t necessarily a bad thing if you have a very focused marketing message.

 

Skinny, elegant type overlays

Screenshot 2015-07-24 at 18.11.30

On the flipside of font trends this year we have skinny, elegant typefaces overlaying hi-res images and video backgrounds in abundance. Much like this design from Urban Influence you’ll see narrow lines above and below skinny headings in white or very light colours over a darkened backgrounds.

 

Pros:

  • Sits wonderfully on top of darkened, semi-transparent images or video
  • Has a natural flair for sophistication
  • Works wonderfully with bold text

 

Cons:

  • No cons with skinny type itself; more a question of how you use it

 

Verdict: The more elegant approach to typography this year is a refreshing break from its oversized cousin – particularly if you want a refined look that lets the background do more of the talking. The side-effect, of course, is your text and its message could take a back seat – which isn’t necessarily as bad thing, as long as that’s what you’re going for.

 

Ghost buttons

Screenshot 2015-07-24 at 18.23.16

If there’s a call to action button designed in 2015 there’s every chance it will be a ghost button. These hollow buttons come dressed in little more than text and an outline, like the example above from Big Drop. In fact, you’ll see plenty more of these if you look back at the trends we’ve already covered in this article – they’re everywhere!

 

Pros:

  • Sleek design and a much needed progression from web 2.0-style buttons
  • Work wonders with simple CSS hover styles
  • Fit in to just about any design
  • Great for creating subtle contrast between other buttons or links

 

Cons

  • They’re already on the verge of overuse
  • They can sometimes get lost in background images
  • Or even steal attention away from other parts of a design

 

Verdict: Ghost buttons are a great concept, but their shortcomings pretty much all come down to overuse. This is where trends quickly turn into fads as designers simply opt for the obvious choice, rather than focusing on the best solution for each given project.

 

Mobile Design Trends

And of course we can’t leave out a section for mobile design trends in the year that Google officially announced mobile searches outnumber desktop (as if we didn’t already know). So what have been the biggest trends this year for internet users on the go?

 

Mobile only design

Screenshot 2015-07-24 at 19.20.21

That’s right – forget responsive and forget mobile-first, because the latest design trend for the smallest devices in our lives is mobile only. The likes of Starbucks, Zappos, Sephora and other brands are exploring ways to create a universal experience across devices, that starts with and prioritises mobile.

 

Pros:

  • Creates a consistent experience across all devices
  • Puts the needs of mobile users and device limitations at the heart of the design process

 

Cons:

  • Perhaps moves from not enough emphasis on mobile to overemphasis – people still use other devices after all
  • Keeps us locked in this bubble of designing for one device or another, when we should be creating concepts that work irrespective of the device users choose

 

Verdict: There’s certainly merit to creating a consistent user experience across all devices and mobile generally should be the priority, based on its limitations and sheer number of users. However, the sooner we stop coming up with new ways to design for mobile and start working towards a device independent approach, the sooner we’ll crack web design for a multi-device world.

 

Navigation

Screenshot 2015-07-24 at 19.44.57Last year I ran an article looking at the use of hamburger icons for mobile navigation and why I’m not a fan. Topping the list of concerns is that a large number of people still don’t understand what these three lines mean. We can get away with this on Web Designer Hub, because our target audience knows very well what this symbol represents – but this doesn’t mean your clients’ audiences will. Once again it’s an example of opting for the easy answer instead of trying to solve the underlying problem of navigation on small screens and it’s good to see some alternatives surface this year.

 

Pros:

  • This navigation is always visible, on every device
  • Saves clicks every time a user wants to navigate

 

Cons:

  • The problem with this design is the text disappears for smaller displays
  • Symbols are ambiguous which leads to confusion – it would be clearer to have text-only on mobile and add the icons for larger screens

 

Verdict: Mobile navigation is still way behind the times. If we’ve really moved on from responsive design, beyond mobile-first and into “mobile only,” it’s interesting that we haven’t been able to come up with a better way to navigate on smaller screens yet.

 

So which trends from 2015 are for keeps?

We see many trends come and go, others outstay their welcome and even some that make the web a better place for all of us. So which trends from 2015 do you think are for keeps and how do you see things developing in 2016?