The Big Web Design Trends for 2015

article

#1

Originally published at: http://www.sitepoint.com/big-web-design-trends-for-2015/

When thinking about web design, you must consider the full spectrum of possibilities that the internet presents. Done boldly, designers can push the limits of human interaction and imagination on a global scale – as is often seen with edgier industries, such as creative agency websites.

In this article, we’ll boil down some of the most prominent web design trends emerging in 2015. It is here that we can find true innovation and new opportunities – a few of which may completely change our understanding of a “modern website”.

1. Make it big

Big Experiences

Website via Born

“Make it big” seems to be the single most important principle of web design today. Yet for many people, it’s hardly acceptable that the homepage – specifically above the fold – consists of just a few words overlaid on an image or a video. Sometimes, even the navigation is removed or (at the very least) is hidden as a small icon.

The two flavors of this web design trend can be labeled as “Cinematic” and “Book Cover”. The first has been inspired by movies and TV ads, while the second enhances the classic concept of printed book and catalogue covers.

Void and Form

Book cover. Website via Void and Form.

The reasons for this trend are both visual and pragmatic. You’re able to give users maximum impact as soon as they land on your site and it’s easier to code, so it works well on mobiles and desktop computer monitors (the same layout remains unchanged despite the display device size).

Full screen images came into vogue last year (as we noted in our 2014 web design trends article), but with growing access to high quality images and speedier technology we’re seeing websites take these “Book Cover” layouts to the next level.

Bellroy site -- using falling snow

Inspired by movies and TV. Website via bellroy.

The “Cinematic” trend relies on fullscreen (or almost fullscreen) video with a few words and/or elements overlaid on top of it. We initially referenced this style in our article,”Web design trends for 2013,” when it was seen on a few agency websites.

Now the trend is picking up fast. Only last year Paypal updated its homepage with a fullscreen video background – a landmark move that has helped bring this concept into the mainstream.

2. The multimedia experience

Jack Daniels
Jack Daniel’s offers an impressive example of the modern “multimedia experience”

The multimedia concept is quite dated. The word itself has been so used and abused that it’s nearly lost its meaning. Nonetheless, armies of designers and programmers are constantly fighting to create increasingly engaging multimedia experiences.

A while back, Flash was the platform for these experiments. Presently it’s the HTML5 <canvas> element that will eventually allow you to create almost any visual effect on the website.

The DNA project by j.viewz

Website via The DNA project by j.viewz

Another noteworthy example of an interface built with HTML Canvas is community-driven DNA project by Brooklyn-based musician Jonathan Dagan (aka j.viewz). Opening with a highly visual background video, j.viewz tells us how he plans to build his new musical album through his personal experiments (which users can download) and other collaborators’ uploaded videos, music and feedback.

raisetheriver.org

Website via Raise the River

Raise the River’s website is yet another fantastic example not only because of its apt visual metaphor, but also its presentation. The pace of animation and inability to scroll almost forces the user to take a breath and adjust to the page timeline.

While designing interfaces, we usually do everything to enable users. This website shows that disabling users for a certain amount of time may sometimes enable a better experience.

3. The Parallax effect mutations

Parallax has evolved into many different mutations that have one thing in common: designers use page scrolling or mouse movement to animate elements or properties of the page. If you look carefully, most of the websites showcased in this article use this logic. Here are some additional examples.

Scroll events and hand drawn animation

Use_of_Java_Script

Website via Mint Design Company.

It’s easy to appreciate Mint Design Company’s creative use of an old CSS sprite technique. The result is an engaging and unique take on an otherwise straightforward company website.

Innovative scrolling

Innovative scrolling

Website via QUO+

The QUO+ headset page takes you on a wild, maze-like journey through their site with vertical and horizontal scrolling – along with an interesting section where you “scroll” through their product colors too.

4. Animated storybook

Animated Storybook - Boldking

Website via Boldking

In this type of page, similar to the first example, an animation sequence starts when a user reaches a certain scroll position. Often, it is just a few elements that slide into the page or use a fade-in effect to appear.

The Boldking product page (above) uses lightweight SVG and Java Script to present a visual metaphor describing the way their product works. Not only is the idea and animation amazing, but equally notable is the fact that it was achieved within 1.5 MB total page weight. Sometimes a single JS library has this size. One of the animated sequences is even interactive.

Colin and Dewi

Website via Colin and Dewi

Colin and Dewi’s wedding website is a simple yet effective way to keep the user focused while reading a story. You are presented with one fragment of the story at a time. To see the next part, you need to scroll to it.

It sounds like generic scroll functionality, but 3D CSS animation – as well as hiding and revealing text fragments – makes the story much more engaging.

Header and page parallax effect caused by mouse movement

HABITAT

Website via HábitatWeb

This effect is used to create the illusion of a 3-dimensional space and works well when fit into the visual narration of the page, such as Habitat Web (above) or Archéologie de la Grande Guerre.

When used tastefully, this effect can have impressive result – although we predict that it will probably not become too common. If it were to be widely popular, it could just as easily be perceived as cheesy and annoying.

5. Flat design

Flat Design

Website via Colin and Dewi

During the last three years, flat design has been hailed the “king” many times over. It’s still doing great and is going to stay for good – especially in smaller elements such as icons, menus and illustrations.

Not only do these elements look good (way better than those glossy web 2.0 icons covering nearly every website a few years ago), but they are easily scaleable and manageable, thanks to icon font technology. icomoon.io is an example of one online service allowing everyone to create their own icon fonts easily for free.

Lab21

Lab 21 turns flat design into “origami design”.

It is worth noting, though, that flat design is not always so flat. Designers often incorporate subtle gradients, textures and photos to achieve the “wow” effect. In our opinion, the best part of flat design is not the flatness of the ink, but how it opens us up to creative visual metaphors.

Rather than imitating objects with skeuomorphic techniques (where a notepad icon looks like real life notepad made of paper and bound in leather), flat design tries to convey the idea of a notepad through a synthetic, catchy and fun visual that works well in varied sizes.

We predict that this trend will become more collage-like and mix with other visual styles, similar to the HábitatWeb website featured earlier in this article.

Continue reading this article on SitePoint


#2

Extra, extra!

Kids caught re-canning Mystery Meat, and selling it with new labels!

Read all about it!


#3

I hate this so much and almost every website is starting to do it. It makes me feel like I'm being punished for using a Dekstop instead of mobile.


#4

Mats, we've been picking and re-publishing one article a month from 99d for two years now (as they do with one of ours). It says so at the bottom. Not sure why this one is different.


#5

Agreed. Pet hate. It was interesting when a small number of sites were using it, but today I normally grit my teeth as it loads. Really? I have to feel around and try menus?

I think the thing that annoys me the most with this technique is, if you're going to present a page with a very small amount of centered text, you're giving that text HUGE focus.

So, say something REALLY, REALLY clever with that copy. Be smart. Funny. Wise. Crazy. Whatever. Find a really good copywriter.

So many designs simply put a logo or an instantly forgettable line like "We are a {insert city} digital agency", and a 'Read more' button.


#6

As with every trend - at some point it becomes cliché, and doesn't taste fresh.
In this case I think there are two basic reasons why "Make It Big" trend continues (and probably will continue) to be popular:

  1. Having 100% of the screen at the designers disposal helps to create "visual impact" - whether this impact is good or bad depends upon the quality of the designer and the personal taste/preference of the recipient.

  2. This type of layout almost always works in each resolution without having to put much work in fine tuning resolution depending on design versions. Implementing (I mean basically writing CSS) these designs is a breeze when compared to more complex layouts that need exceptional amount of work and CSS expertise to assure fine result in all devices.

Using or not using this concept is IMO a matter of application.
Agencies strive to make a "visual impression" in agreement with the famous quote "A picture is worth a thousand words". It certainly doesn't excuse the lack of imagination in overall concept of a brand or putting the "instantly forgettable line" on the frontpage.


#7

This type of layout almost always works in each resolution without having to put much work in fine tuning resolution depending on design versions. Implementing (I mean basically writing CSS) these designs is a breeze when compared to more complex layouts that need exceptional amount of work and CSS expertise to assure fine result in all devices.

Good point, @JKK.

I think the fact that it's built into the base structure of things like Ghost and Skeleton means a lot of mediocre layouts use the 'huge background/small text layout' as their starting point.

Obviously you can easily change the default templates for these things, but people often stick with defaults. The thinking is "There's a big picture area here. What picture should I use?" rather than "Should I use a big picture here?".


#8

Not to disagree with you at all. Your point is true and needs to be stated. However...

There is only so much 'freshness' matters. Especially at the lower end of the market where businesses only have so much resourcing to provide to design. And by "resourcing" I mean attention span and room to think, as much as I mean money.

Many businesses care less about originality and cutting edge design then they do about other things. I hear these things often:

  • "Make it Look Good. No, I don't know what Look Good means."

  • "I want my site to look like That One Over There. It's got a Nice Big Thing something something"

  • "Move that thing over there and that other thing over there"

Don't get me wrong: I'm totally not knocking on the clients I hear this from. They've simply got priorities and want things done their way.

I anticipate that a possible response to this is "you are the designer and therefore should lead. express your authority".And I totally agree with that as well. I like being the Design Stalinist.

But some companies simply don't have time for it. And interested parties don't have the headspace to accept the leadership and education that is neccessary for delivery of a superior product. They just want things done their way.

In these all-to-common cases following common design trends (ie, Design Patterns that work well) is perfect.


#9

Make it Big sites strike me as a misinterpretation of "mobile first" as "mobile only" and, as several of you have commented, it's easier and less costly up front to use one design. But the downside in user retention on larger devices could be even more costly. Just a few days ago Nielsen Norman Group published an article on why the page fold still matters (http://www.nngroup.com/articles/page-fold-manifesto/). Big is super for some sites, but definitely not for all.


#10

"Make it big" is easy to get completely wrong. If it's just a large image with a couple of random words then many visitors who hit the page just leave because they do not realize that there is actual content on the page! This is especially true for mobile where they do not see a scrollbar and the menu (if it's on the page at all) collapses into a tiny button. It works for landing pages that also display a well-defined call-to-action (like a register/login form or simply one big "Buy" button or maybe even "Scroll down to see content") but otherwise just causes confusion and drops your conversion rate.


#11

By doing this, it really makes the website look more beautiful, neat, and relaxing.

This is a good idea, but aren't we sacrificing the overall visibility of the website by minimizing it's content specially in the homepage?


#12

Nope, you misunderstand.
My comment was referring to the content of the article, not the writer(s).

"Mystery Meat" is the old, already existing, name for this way of building webpages.

If i arrive to a page, and all i see is "bla bla bla" in the middle of a 2560x1440 pixels huge blurry image of someone drinking a cappuccino (or whatever).
Am I then supposed to start hunting around to find out if there is some kind of hidden navigation, or more hidden content on the page, or any more pages on the site?

Of course not.
I usually just leave.

This is a moronic design fad.

Either you want people to find your content, so you don't hide it.
Or you want people to NOT find your content, so you hide it.


#13

Two trends to lose.

  1. All those gigantic heroes. They are really no different that the "Welcome" screen of the 90s - for flash and static websites. Big heroes just for a fad are pointless. (Somewhat) Big heroes that are useful are a bit more compelling: https://www.digitalocean.com/ or https://www.optimizely.com/

  2. Giant sticky headers and navigation bars.


#14

Sorry, @MatsSvensson. You're right. I missed your context.


#15

I'm torn on whether this design trend is good or bad. I agree that it's poor design when the user is left wondering what the site is about and where to click next to get some content. But it doesn't have to be that way. Some sites do this very tastefully, creating a nice atmosphere that invites more exploration, while still making it clear what they are about and how to navigate the site.


#16

Bootstrap sure made all websites look the same with huge background photos and 3-4 word text overlaid on top of them. That being said we can't put all the blame on Bootstrap. People are too lazy to make unique websites nowadays. They get templates and frameworks and don't even bother customizing them. I'm not against the use of templates at all but I think people should make a bit of effort to make their websites stand out. Here is what Jason Fried said about the modern web design trends:

Most of these designs can be described like this: First, you see a huge photo with some text over it. Then, as you scroll down, the background slides away and another big photo with more text on it pops up. And so on.... Maybe you've seen this style--it's starting to crop up everywhere. To a designer's eye, it looks good, and it's technically impressive, but I'm not sure it says anything meaningful about the companies using it. Worse (for those companies), it's created a new kind of clutter: Too many companies look the same--all style and not enough substance.

I totally agree with him. The written content is still what draws people in. Without a good copy you won't be able to attract potential clients/customers no matter how good the visuals are.


#17

I guess if there's 'x' amount of web design, then only 'x/10' -- the top 10% -- of it will be excellent.

The bottom half will -- by definition -- be mediocre to bad. So the only question is exactly how that bottom half executes mediocrity. 10 years ago that would have almost certainly meant a 'header bar and three column layout' because that was the easiest, most common way to create a mediocre design.

Today the 'Big background and Big centered text' is that vehicle.

So, I guess I'm saying, you could force a mediocre design team into using a different format, but chances are the results would probably be just as uninspired. They'd just be ordinary in a new and different way.

Perhaps Big Text is a better template for so-so designers to stick to than most templates?

#just thinkingoutloud


#18

I'd be happy with that one. I'm rather glad the days of having to squint even to read a site's intro text are largely behind us. smile


#19

Good collection but some of the sites have amazing design but wasn't easy to consume the content. I could be wrong. But thanks for compiling it was definitely refreshing to see some creative stuff in one place.


#21

I hate the make it big trend. Look at the LA Times website. I used to love to read the news there and was a very active commentator and I enjoyed reading the comments. Now I avoid that site completely. It is awful. You get bounced out of the articles you click, you cannot easily comment or see the comments anymore and it takes over your entire screen with big glossy photos I could care less about. I READ the news online. I do not read it in magazines, photographers portfolio websites or watch TV news. I do not even watch news videos. I read my news quietly. This make it big trend is totally annoying to me.
I like to get to a site, see a normal menu, search bar and find articles or content without what they think is fancy and artistic.