Trends

The Best & Worst Web Design Trends of 2015

We cover a handful of the worst and some of the best design trends in web design that we’ve seen during 2014.

Share on FacebookTweet about this on TwitterPin on PinterestShare on RedditShare on LinkedIn

As 2015 draws to a close, I’ve begun to consider a handful of design trends that have emerged these past twelve months. Some are new, some are old but have grown and developed with new ideas. For the most part these trends are very interesting and beneficial to the design community – but not all of them.

I’ll be covering a handful of the most propagated design trends that I’ve noticed frequently during 2015. These examples are some of the best and some of the worst I could find. I hope to share not just my own opinion, but a view that can open up discussion about these trends to get a broader picture of the design landscape.

The Best Trends

To start I’d like to cover a few trends which aren’t brand new ideas, but have newfound success reaching out from 2015. Implementation is a big part of what makes a trend in web design. The construction of a great layout is always changing but adaptation occurs around a central nucleus of popular ideas, trends, and concepts.

Minimalist Flat Design

Surely most designers are familiar with flat design. By default it has a very minimalist attitude which makes the design process so much easier. Over 2015 I’ve seen hundreds of freebies including flat icon sets, flat UI kits, and flat design styles like Google Material Design.

inky minimalist flat homepage layout design

As websites get more simple, all of the elements simplify nicely. This obviously includes graphics, but also colors and typography. Since content is the most important part of a webpage it can truly thrive in a minimalist environment.

The popularity of Bootstrap and iOS 8 has ushered new concepts like flat buttons with outlines. Many websites now style button links to have an outer border and no internal background color. As this trend becomes simpler more styles will grow and this should provide interesting results.

Improved Web Fonts

CSS3 has naturally become a big topic for its advanced media queries and transition animations. But CSS3 also offers a set of rules for including custom font families with @font-face. Over 2015 I’ve run into countless websites that utilize their own self-hosted fonts and other 3rd party resources like Google Web Fonts.

design sponge custom typography design homepage

Online magazines and blogs have benefitted tremendously. It’s now possible for blog/magazine designers to mimic newspapers with more direct font choices. But aside from blogs everyone can benefit from a series of fonts catering towards a certain design style. I’d expect to see a lot more of this in the future.

Fullscreen Backgrounds

Lots of plugins and code snippets are free on the web to assist designers with the process of creating a fullscreen background. Both images and video have become popular choices because they can embed at high resolutions and scale naturally with the browser.

broken twill fullscreen photo background homepage

But another popular trend I’ve seen is the inclusion of multiple images in a rotator. The background switches between slides that may or may not include content, and the user often has access to arrows that switch between images. Fullscreen backgrounds have come a long way and I find them in dozens of modern websites.

Just keep in mind that not every project will benefit from a fullscreen background, so it’s important to have an idea of what should be in the background and how that will come across to visitors.

Improved Responsive Design

Everyone has grown accustomed to mobile smartphones which have become much more than just phones. It’s surprising how many people visit websites on touchscreen devices. But this means designers and developers have been forced to adapt their skills by creating websites that work at any resolution.

koga bikes responsive website design

The largest growth I’ve seen is with mobile responsive navigation. Like with the KOGA Bikes website, dropdown navigation has become specialized for smaller screens. Also remember that touchscreens react differently than mouse commands. This has fostered a range of plugins supporting touchscreen image rotators, video players, and accordion menus.

Mobile web browsers have never felt so loved.

The Worst Trends

Now moving onto some ideas that perhaps wouldn’t be awarded with smiley face stickers in grade school. Although these ideas have been around for a while I feel they really don’t belong in the modern era of web design. Perhaps these trends can be implemented and work great in some layouts, but I find they really don’t work in most layouts and should be primarily avoided.

Modal Window Promos

If you’re unfamiliar with the terminology, modal windows behave like popups that appear on top of the screen. Most of the time they’ll darken the website and force you to close the window before you can interact with the actual page. This is beyond annoying from a UX perspective when somebody just wants to access a website but is blocked with a nagging newsletter signup message.

Let me clarify that not all modal windows are bad. In fact it’s a much more reasonable solution to separate windows. However modals should only open at the request of a user clicking on something(image gallery, video, signup form, etc). I get peeved when just visiting a website causes a modal window to appear.

buddytv modal window promo popup screenshot

It can be somewhat acceptable if the window is small and clicking on the darkened area outside the window closes the modal quickly. But even in this situation it feels like a desperate salesman pushing their product when you haven’t even had time to digest what it’s about.

Andy Beaumont created a website named Tab Closed; Didn’t Read which covers this phenomena. It showcases screenshots from various websites guilty of this trend. Sometimes these unprompted modals can drive users to convert – but more often than not they’re annoying, and the modal content would probably do better in the sidebar.

Social Media Overload

With dozens of cool social networks the ability to share has become much more prominent. And with the opportunity of large traffic spikes through social media there’s plenty of reason to use sharing badges on a blog post or website. However there is a limit, and that limit comes at the point when sharing badges get in the way of browsing the website.

marginal revolution social media sharing badges

One such example on the Marginal Revolution homepage places sharing badges underneath each post. When you hover onto the green “share this” badge a modal window appears. Normally this effect should be reserved for clicking, but a hover time of 1-2 seconds is enough to set off the script.

 

Perpetual Loading Screens

This is a minor trend, so I won’t explain too much of why it’s annoying because, well, it should be obvious. Internet connection speeds have increased dramatically and nobody wants to wait around for slow websites. Loading screens were originally popular on Flash websites – a trend that kicked the bucket years ago.

Some modern websites do use a pre-loader on their homepage which can be acceptable. If there are a lot of resources or animations that need to load before rendering then I can accept that. Not awesome, but I can accept it. Perpetual loading screens feel hackneyed and just plain unnecessary.

 

Customized Scrollbars

This is another trend which carried over from Flash websites that used customized scrollbars instead of the browser default. Now with jQuery and other libraries it’s easy to customize the actual scrollbar of a webpage.

When it comes to internal page sections this can be alright. Take for example jQuery Custom Scrollbar which affects internal page content, but not the browser scrollbar itself. In my opinion this is fine because the scrolling speed doesn’t change so everything still feels normal. But often times a customized browser scrollbar will affect the scroll speed which can become laggy and frustrating.

fcbotiga megastore custom scrolling parallax website

The parallax example from FCBotiga Megastore is a very strange combination of parallax section scrolling which then changes into a scrollbar. At the very top of the page there is no browser scrollbar at all. I like having the option and it’s weird to assume users would be okay with only customized scrolling.

I’ve only covered my personal collection of trends which jump out vehemently against similar ideas. The past year has been interesting with so many cool new resources for designers. As flat design grows more popular, I expect other styles to rise up in popularity as well.

 

Featured image: Colba


About the Author Jake Rocheleau

Jake is a passionate web designer and social media entrepreneur, and is frequently researching the latest trends in digital design and new-age Internet ideas. Jake tweets at @jakerocheleau.