Design & UX

The Big Web Design Trends for 2015

By Joanna Krenz Kurowska

When thinking about web design, you must consider the full spectrum of possibilities that the internet presents. Done boldly, designers can push the current 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.

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

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

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. is an example of one online service allowing everyone to create their own icon fonts easily for free.

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.

6. No more boxes

Web designers always love to show they can think outside of the box – in more ways than one. One could call this trend “Draw a box and prove you can break it”. A rectangle screen is the frame for every web design (as far aw we know, we don’t have circular monitors yet). Every HTML element of the page is a rectangle too.

But designers, like most people, don’t like to be constrained. There are 3 distinct strategies to prove you are not a slave to the rectangle – and all 3 seem to be on the rise.

Create page layouts as though a rectangle never existed

Menu made of circles
Menu made of circles to navigate DAN’s Instagram photos. Website via DAN Paris.

Allowed are: circles, hexagons, irregular shapes even rhombuses.

Lorenzo Bocchi
Website via Lorenzo Bocchi

Skewed horizon and website layout previews in axonometric view on Lorenzo Bocchi bring the feeling of space and movement.

The Rosa (via Pixelgrade)
Website: The Rosa (via Pixelgrade)

While looking at the Rosa restaurant homepage your senses are deceived – you can almost feel the aroma of the cookies. Use a modern version of the centuries old Trompe-l’œil technique and imitate a real desktop inside a monitor. For example, take a wooden table background and then put all layout objects on it.

Swiss Air Airbus
Website via Swiss airlines

The ultimate way of defying a rectangle is placing the user inside an infinite space where scrolling means flying, rather than, well… scrolling.

Swiss airlines challenge your understanding of website navigation. Browsing their page, you can feel how conventional our understanding of document space is. Here, instead of scrolling up or down, we dodge our way between the clouds.

7. Tiles

Tiles interface

On the other hand, if you are comfortable with rectangles, a cool way to structure your content is by creating tiles. For some reason tiles in web design sell better than the Windows 8 Metro interface. Tiles work well in responsive layouts and, at the same time, remain a cool way of forming impressive layouts.

If sticking to tiles becomes too boring, the layout may be pushed further with irregular zigzag edges, pushing objects or bringing the text across the edges.

8. Navigation widgets

The Daily Beast
The Daily Beast navigation widget shows the scroll position within the article.

Experimenting with navigation has been web designers’ favorite playground for many years. “Playing” with navigation peaked when websites were designed purely in Flash. The decline of Flash brought us quieter menus, devoid of animation or eccentric interactivity.

But edgier navigations have been on the rise again, thanks in part to new web design potential and the growing inefficiency of existing navigation models in using across multiple devices. This is made easier thanks to the wide use of Java Script through Java’s constant evolution (via frameworks and plugins) and the more consistent interpretation of modern CSS across all important browsers.

Here are a few examples of navigation experiments and trends. Some of these ideas are already widely used, while others are pushing the envelope towards a new kind of “modern” web design.

Sticky menus


This type of menu expands a relevant item’s submenu as you scroll. It works well on one-pagers with lots of content. The LESS manual page is one of the most comfortable to use “manual type” webpages we have ever encountered. Website via Less CC.

A Sticky Menu is a kind of a menu that stays glued to the top or edge of the screen while you scroll. Like it or not, it’s becoming a standard for one-pagers.

Sometimes it’s combined with a scrollspy script to create a widget accurately showing your position on the page. It’s useful, especially with long hierarchical menus.

Sticky navigation attached to all 4 corners of the screen


Website via Hum

Street view type of navigation

Oh Deer Games

Website via Oh Deer Games

Google maps, especially street view, inspired the author of Oh Deer Games to create navigation resembling a walk through Google street view. Time will tell whether this becomes a trend. For sure, this is not the only page exploring either Street View-style of navigation or the axonometric “fly over” views, better known in gaming.

Which brings us to another notable trend…

9. Integrating Google maps

Integrating maps

We mark this as a trend not only because it’s been rising for some time now (and we see it almost everywhere), but also that it’s become more and more visually interesting thanks to the well-used customization options that Google provides.

The most interesting websites following this trend build their functional and visual idea around a map concept. And certainly they use customized Google maps adjusted to the page look and feel.

10. Mashup interfaces

Website via necotrans

The persisting love for one-pagers brings challenges that can be solved in creative, user friendly and visually attractive ways. The challenge is to fit a lot of information and functionality onto one page. The page has to have a clean modern look and be easy to navigate.

The solution may be something that we call a mashup interface: a layout consisting of many “layers” that adjust to the requested functionality or content. Actually it’s not a new concept at all – it’s the very nature of desktop applications – but it has not been very popular in the mainstream Internet so far. Recently, the use of such interfaces has been on the rise, and they are becoming more and more refined and functional.

Necotrans website seems to have little content above the fold, with a singular sentence overlaid on a full-screen photo. But the small, right side menu allows access to all essential functionality within the same screen area to offer users a site search widget (with results appearing as you type), customized Google map, news widget and contact form.

11. Minimize


Website via Maemo

The classic KISS principle (“Keep It Simple, Stupid” or “Keep It Short and Simple”) has been used in the military, business and government since the 1960s. Yet, even though you might work hard to simplify your designs, there is probably some room to push this process further still.

The Maemo restaurant tells its story with irresistible strength, using the simplest language possible, and then the visitor is confronted with a single call to action (“Book a table”), and the restaurant’s name over a background of cold fog swirling over the fjord.

Scrolling down brings a few photos in a casual layout, with horizontal and vertical alignments hard to find. The themes of the photos seem casual, too. Nonetheless, browsing this page offers an intense sensual experience. Ascetic form highlights the quality of the photos, while the minimalism makes you read the few sentences they cared to share carefully, like the words of wisdom.

What can be learned here? You can keep things visually quiet (quiet!) in web design and still achieve a great look! Try minimizing the content, form and color as much as possible while adding interest through big, realistic videos.

12. World Wide Wait

Loading graphics
Examples of graphical preloaders.

You’ve probably heard this old joke. In the ’90s, when 56k modems were the primary way to access the Internet, the “WWW” acronym used to be jokingly translated to “World Wide Wait”. Fast network speed has made us nearly forget that.

Like never before, faster speeds are enabling us to create websites that would have been unthinkable just a short time ago – such as using HD video for a website background. But every step forward comes at a price and, in this case, the price is time. Specifically, the load time.

Hence, we can see a big comeback of visually engaging preloaders. Not as engaging as they used to be in the Flash days when they turned into little games, but still art pieces in their own right.

13. Designer automation

The Grid - unreadable text

A screenshot of the website reveals an error that no human being would be likely to make (unreadable black text on dark background).

This article wouldn’t be complete without taking a moment to mention “The Grid” – a catchy idea presented by “eclectic designers” that made some buzz recently. It’s an attempt to replace the designer and the coder with Artificial Intelligence. Will web designers become redundant? It is yet to be seen.

It’s not possible to test this system yet, so it’s hard to judge its usability. Their website seems to be the only demonstration of its power. Generally it performs well in most resolutions, but attempts to create artificial art seem to be the sign of the times. For instance, The Painting Fool creative software hasn’t yet wiped out paintings from art galleries.


These 13 web design trends have been creeping into popularity over the past year and are likely to heavily influence the way websites will be created in 2015. Nonetheless, if we were to summarize this year in one sentence, the most important thing to think about when designing a website would be “Content First”.

That mantra has always been true. But nowadays, an increasingly aesthetic emphasis on web design can reveal many of the mistakes made in the pre-design phases – concept, navigation flow planning, wire-framing, copy-writing, etc. As you broaden your horizons with new techniques, be sure that you don’t forget the basics.

This article was originally published at 99designs Designer Blog. Reproduced with permission.


Extra, extra!

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

Read all about it!


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.


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.


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.


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.


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?".


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.


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 ( Big is super for some sites, but definitely not for all.


"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.


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?


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.


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: or

  2. Giant sticky headers and navigation bars.


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


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.


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.


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


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


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.


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.


That was an amazing collection! Every year web designers do something fresh, different and inspiring which takes the unique place in marketing..The Born design grab all my attention at all...



Some designers just have no clue.

Surely people are buying these 40" 4K-screens, just so they can get a really really really good look at our scaled up background image and two word headline.


There are many changes occured down the years in designing.. If you planning to create an infograph , You have many online tools like. But if you have no idea on how to use them effectively you can go for Infographic services.


So where is the 8k content?



Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in Design, once a week, for free.