Popular Web Design Trends for 2015

Although many designers have written on this topic, I want to share my thoughts on the future of web design as we forge ahead into 2015. The new year is always an exciting time and I love to contemplate the potential for young new web designers just entering the field.

featured image photo laptop design

I do think these trends will resonate with most web designers who have kept their pulse on the changing tides of digital interface design. But although these trends are quite noticeably gaining momentum, it’s impossible to tell with absolute certainty what the future will hold. Looking onward into 2015 I expect to see lots of growth and ingenuity from older trends, along with some newer ideas finally coming into the spotlight.

Thin Line Icons

One of the more popular emerging trends is the effect of thin line icon styles. I first noticed this meteoric rise in popularity from Dribbble posts. Flat UI design has been a popular trend growing alongside line icons. But I like to make the distinction that not all line icons must be placed into flat layouts.

What I find most appealing is the simplistic nature of these icons. Any designer regardless of his skillset should be able to learn this technique. Line icons also lend themselves to the vector world where pixel limitations are not a problem. This has become a popular adaptation with newer programs like Sketch.

w3 co web design agency line icons

The single-page design for W3.co demonstrates simple line icons in the way they were meant to be used. Each section in the page has a slew of icons which match in style, size, and color. It’s even more impressive because the site follows such a minimalist approach that each icon feels right at home.

Notice how most of these thin line icons are built around an outline. So when constructing a shape layer the fill is typically left transparent, and the stroke color is used to create the icon.

virtual insanity website interface line icons

Another cool example can be found on Virtual Insanity. It has some dynamic features for navigation based around simple line icons. This is another prime example of relying on graphics to further expand upon page content.

If you’re not the best designer it’s definitely worth following some tutorials on how to build line icons. However I understand there are developers and copywriters who wish to just build simple website layouts with existing resources. In this case check out any of the numerous freebie sets like Linea.

linea line icons freebie iconpack

All of these icons are open source and built as SVGs & PNGs. There are many different iconsets like e-commerce, music, or weather. But all of the sets can be downloaded in one big pack at the top of the page. Linea is a great iconset to start with because it contains so many examples, it’s free to use, and the styles match harmoniously.

Website Animation

Another trend with a growing popularity is the use of website animation. JavaScript has always reigned supreme in this department but CSS3 has slowly taken a chunk of the market share. In this way it’s possible to create any type of animation you desire – from button hover effects to stylized dropdown menus.

belle epoque website layout animation

The French design agency Belle Epoque uses a fantastic slew of animated effects on each part of their website. Every section on the homepage applies animation to typography, graphics, and page transitions. Even the website’s hamburger navigation menu uses a fantastic animated sliding effect.

But aside from content-focused animation I also expect to see a whole lot more animated graphics. These used to be created with Flash but have since adapted into JavaScript or even SVG animation. For example, take a peek at the homepage for Vizua studio.

vizua animated creative studio website

Each section of the page has a small vector graphic animated to expand upon the content. Visual graphics combined with text often promote the best ideas in a very solid environment. But I also really like the animation found in their top-right hamburger menu. Vizua is just another great demonstration of making a website come alive through animation.

canal tp website orange layout homepage

For a more balanced example take a look at the Canal TP website. This has a nice mix of parallax scrolling effects combined with animated imagery & colors. Their top navigation links also incorporate animation on the hover state. My only quip is with the slow-scrolling functionality which I think could be improved. But just the animation alone is simply fascinating.

Parallax Layouts

What could be said about parallax web design that hasn’t already been covered? It’s certainly popular, it has rhythm, and it uses lots of cool animation. So where could it all go from here?

It is my hope that more designers will understand the purpose of parallax design and how it can fit into a layout scheme. Not every website project should use parallax scrolling because it’s a special effect meant for special purposes. But the growing trend of parallax design is not just unavoidable, it’s incorporable.

hermes tocchetti website photography homepage

The photography portfolio of Hermes Tocchetti uses a parallax effect on each piece of the layout. Every section is split up into pieces using background images and well-managed content. I really like the design style because it feels natural and fun to use. But even more so the parallax effect is scalable for any device, which is important in today’s mobile-responsive era of web design.

smart phones dumb users website homepage

Perhaps an even better example can be found on Smart Phones Dumb Users. This is almost like a web-based infographic written and coded using a parallax style. I truly enjoy this example because it demonstrates the value of a horizontal parallax effect.

By looking at parallax design as a trend you’ll start to notice many different concepts within the parallax style. Some designers like animated elements, some like horizontal scrolling, others like dot-navigation or even fixed-sliding elements. The phrase “parallax design” has grown into a very wide interpretation of the trend as a whole. I expect this to continue well into the new year.

Flat Material Design

In late 2014 Google announced their new style language named Material Design. It combines actual design concepts with user experience effects such as touch-based motions. Material design was created for Android, but has since adopted into a full-blown design language.

Web designers who focus on flat design love this new language. Google is a company which seems to understand how trends change. Their new Material design language places heavy emphasis on flat design in regards to colors, effects, and icon styles.

materialup google material design inspiration gallery

The website MaterialUp is a dedicated inspiration gallery for flat Material design resources. The majority of entries are screenshots pulled from Dribbble built either for the web or Android apps. Many of the shots use animation constructed with After Effects.

If you’re trying to understand Material design through example then definitely take a look at MaterialUp. It’s a fantastic resource for designers who are unfamiliar with the flat style. Plus there’s a lot to be said about the unique animation and design construction of Material interfaces.

Hero & Background Images

One of my absolute favorite trends relates to the use of hero images in web design. These are specifically banners or backgrounds with large images spanning a good portion of the screen. Hero images can be photos or illustrations meant to directly into the page content.

cuppa web design agency hero image

We Are Cuppa is a fantastic example of well-styled hero image placement. The homepage photo is directly relevant to their site and their services. It brings attention to the type of work they do while adding a bit of whitespace into the overall composition.

Browsing onto other pages of their website you’ll notice each one has a smaller hero image. Although in this example it does span the entirety of the screen, this isn’t always the case. Hero images can be placed within the content or they can be used as backgrounds. The extreme position of this trend is a fullscreen background image or video.

whiteboard creative studio video background

The homepage of Whiteboard uses a large fullscreen background video effect to its fullest potential. I love their design style because it all feels very minimalist yet contemporary. Also the video content feels adeptly relevant to their studio’s portfolio. It’s an excellent example of distributed media in web design.

Both hero images along with fullscreen backgrounds are trends catching fire. They’ve already proven immensely popular throughout 2014 and I expect that popularity to continue all the way through 2015.

Powerful JavaScript FX

Along with typical web design trends there’s also a lot to consider in the realm of web development. My primary interest lies in frontend development which is a vitally important field. Regardless of how beautiful a mockup is designed, it means very little unless it can be coded into a working website.

One of the biggest trends I’ve noticed is a growing community of jQuery and JavaScript developers. I’ve seen an amazing number of plugins released over the course of 2014 with a whole lot more on the horizon.

unheap jquery plugins repository

Passionate developers are getting into the community by publishing galleries full of these outstanding jQuery plugins One such example is Unheap which catalogs numerous jQuery plugins from every category under the sun. In my opinion this helps plugin developers to bring attention to their work, and it helps general devs who need to find great plugins.

With an ever-growing market of developers I think JavaScript is going to see an enormous growth cycle in 2015. New JS libraries, new plugins, and new websites showcasing all of these features.

Final Points

In closing I hope these trends can prove useful enough to guide designers into 2015. It seems that time never slows and to stay ahead of the curve often means looking back to the past. Successful designers are able to keep up with the times by analyzing the most beloved design trends and incorporating them into future project work. I don’t hold any prescient abilities but I do hope some of these trends are proven correct as we move forward into the new year.

Tags:
0 shares
Jake is a researcher and writer on many design & digital art websites. He frequently writes on topics including UX design, content marketing, and project management. You can find more work on his portfolio and follow his latest tweets @jakerocheleau.
  1. March 9, 2015

    Hi Jake, thank you for sharing an inspiring article. The visuals and information you share are useful. I highly recommend your article to others and enjoyed reading the web design trends for 2015, which I look forward to seeing. Keep it up!

  2. March 11, 2015

    NIce. I think the trend is going to simplifying the content and limited to the essential things. UX is helping lot in interection design decisions.
    Designers are focusing on core things like typography and illustrations.

    Thanks for sharing the article. Nice read.

  3. March 12, 2015

    Super collection Jake I like Belle’s website, I would love to know how they made the logo fade-in in a particle effect?

Leave a Reply

Your email address will not be published. Required fields are marked *

35 Inspiring Website Designs for Zoos and Aquariums