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 2014. 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 Web Design Trends 2014
To start I’d like to cover a few trends which aren’t brand new ideas, but have newfound success reaching out from 2014. 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 2014 I’ve seen hundreds of freebies including flat iconsets, flat UI kits, and flat design styles like Google Material Design.
As websites get simpler 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 2014 I’ve run into countless websites that utilize their own self-hosted fonts and other 3rd party resources like Google Web Fonts.
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.
Full screen Backgrounds
Lots of plugins and code snippets are free on the web to assist designers with the process of creating a full screen background. Both images and video have become popular choices because they can embed at high resolutions and scale naturally with the browser.
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.
The largest growth I’ve seen is with mobile responsive navigation. Like with theKOGA 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
Unlikely best web design trends 2014, we are 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.
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.
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.
The blog design for Quirky Chrissy is another example which I feel has too many social links. Looking over the design itself everything seems fine, but those grey buttons at the bottom of each post feel very unnecessary. In fact having so many in one place dissuades me from sharing at all. So keep this in mind when adding social badges to a website – make them accessible but don’t overload the page.
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 preloader 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 like on Anata Jewelry feel hackneyed and just plain unnecessary.
Every time you click a new page the loading graphic will appear. It lasts for a few seconds, which feels like an eon, and when it finishes loading it feels like nothing extra was loaded. It seems like there’s almost no need for the preloader yet it appears on every page. Please don’t do this!
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.
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.
Granted this trend isn’t terrible and I don’t run into it all that often. But when I do it almost completely ruins the layout. One bad apple spoils the bunch and in this scenario the proverb seems more truthful than ever.
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. And even though 2014 has offered a lot it is merely a page in the history of web design as we move transiently into 2015.