The year 2013 and even 2012 saw several changes in trends for website design due to several large influencers. Google made several changes to their search engine algorithms in more than a few updates in past couple of years, forcing more websites to really cater to their audience in usability and content. The release of HTML5 gave designers a lot to play around with, which sometimes resulted in an overboard of animation, unfortunately. Responsive designs became much more necessary as mobile access to the web became much more prominent.
These examples are just a brief snippet of many of the changes that have influenced recent trends and that will continue to guide web design trends in 2014. Keep in mind, though, that most trends come with a downside – usually in the event of overuse. It’s also wise to remember that not every trend will be right for every single one of your clients. As a web designer or web developer, you have the responsibility of both keeping up with current trends as well as tailoring a website to your client.
So, read through some of the more popularly predicted trends below, and then decide on a client-by-client basis which of these trends to follow and which you should leave behind.
When Apple rolled out the iOS7 update, not everyone was a huge fan of the all-new flat design. Yet, Jony Ive seemed to know that it was the perfect time to let go of skeumorphism and introduce a much more minimalististic, clean, and straight-forward design. After the release of iOS7, flat designs started appearing all over the web. This year will probably be no exception in the continuing growth of flat design. It is not only mobile-friendly but also strips down a design to basics, often creating a much more organized look and feel.
While a majority of websites can certainly rock this trend, some of your clients may need to stick with a skeumorphic design or 3D elements, simply because of their image. For other clients, you may want to go flat for only a few elements, which can really help simplify a website that has lots of content.
Standing out takes a bit of customization these days. The World Wide Web is inundated with competitive brands looking for a way to capture the same target market. Unique web design elements customized for both the brand image as well as the audience have emerged quite noticeably, especially with HTML5, CSS3, jQuery, etc providing much more room for customization. Many websites are including effects on images, such as color overlays or blurred effects. One page sites with overlays, lightboxes for images, parallax scrolling, or other interactive elements are becoming quite common. And artistic fonts (see next) or even mixed and matched fonts are other ways that designers are customizing websites.
The caution in customization is to avoid overdoing it. Sometimes all you need is one simple original item to make a website stand out.
Web fonts have opened an entire world of creativity in web typography. Now, web designers are no longer limited to just a few fonts, and over the last year we have seen more and more websites emerge with creative font use. Another bonus to many web fonts is that they are also available for print use as well, so designers can easily pick one creative font to use on all of a client’s branding.
The only danger to artistic fonts is the tendency to go overboard. A fancy font may not be very readable, which is a no-go for websites with lots of text. In this case, reserve the pretty fonts for headers or other small highlights.
Long Scrolling Stories
More and more websites that include some form of a scrolling story are emerging. Often seen in single-page websites (although the trend is also becoming more common on About pages and the home page of multi-page websites), the scrolling story basically places necessary information in a story-like layout that visitors scroll down the page to view. In the past, scrolling stories usually seemed to be done in parallax, but many recently have opted out of parallax scrolling for more straight-forward text and images, mostly due to the mobile trend (see below).
Every Last Drop is an example of single page story websites created to bring awareness to a social or environmental problem and solution. While a bit overboard with too much animation, it certainly keeps visitors entertained.
In fact, some scrolling stories include more images than text, which can be both a benefit and a downside. Less text usually means less chance of getting in trouble with Google. On the flipside, it can also mean that search engines have more trouble finding a website. This is where you as a designer will have to know SEO inside and out to make excellent use of tags to squeeze in keywords for your client.
A hero area is a term borrowed from print design. Basically, this term refers to the design trend in which the top of a web page contains a large image with very little text. The idea is to grab attention, make an impression, create curiosity, and give the visitor a brief snapshot of what the website is about all in a matter of seconds. Personally, websites with hero areas are the ones that I tend to enjoy the most, probably because most of them do a great job of leaving a huge impact, and, of course, my love for stunning images probably helps this gravitation.
Even most ecommerce sites are using hero areas, and often the image they use is of a special they are running, which is a brilliant way to draw in the customer. The only danger that I foresee with this trend is if you fail to place exactly what the visitor needs to see immediately below the hero area. If users have to do more than intuitively scroll to see more of what the website has to offer, then they may get lost. If I don’t have that guidance, I usually freeze even with a navigation menu in the header and my good impression turns to frustration.
Many websites are using video rather than text to tell their story, explain their product, or provide directions for use of a product. The great thing about videos is that they really boost visibility of a site in searches, especially if all the necessary SEO elements are in place. The bad thing with videos is that you can lose some visitors if you don’t also provide an alternate text version. Some individuals would much rather take a few seconds to skim through text (with headings included for longer blocks of text, of course) than watch a 30 second to 2 minute video.
In 2014, we will see much more of an emphasis on mobile design. More than just responsive, this trend involves a web design built specifically for mobile use. So fonts are often a bit larger, long scrolling designs are used, content is organized with the use of cards, and an emphasis on social media is present. Some websites not only want to be mobile-friendly but also want to offer their website in the form of a mobile app, so you may want to teach yourself a bit about designing apps if you haven’t done so already.
There really isn’t a downside to creating a website for mobile use. I still hear way too often from my friends who only own a smart phone, not a computer, that they can’t access a certain site because it isn’t even mobile-friendly. Responsive designs, too, can have the downside of still being geared toward PC access. So, ask your client how their target audience will be accessing the site. Based on the numbers, you may want to recommend a design built for mobile use – or at the very least an app.
The minimalist design trend has been around a long time but often seen only in sites with little content. With more and more websites emphasizing usability, minimal elements have come into play for even large ecommerce websites. Many more designs with only one or two colors have been emerging. Navigation is kept clean and well-organized with drop-down menus. Images are replacing blocks of text. And many are even dropping the sidebar to give readers a more streamlined reading experience.
Most web designers already know that a minimalist design should not lack important content. Minimalism is when a design is stripped so that no unnecessary elements are included. However, you may find that a client should go minimal in certain areas, such as navigation, but needs to keep the hand-drawn illustrations with cutesy fonts to reinforce the brand image.
Websites that include interactive elements are becoming much more prominent, due to organizations looking for ways to keep visitors engaged long enough to make an emotional connection. The combination of HTML5 and CSS3 allow for some pretty sweet animation, and thankfully have eliminated the need for Flash. In fact, some could argue that the mobile trend helped to push an alternative to Flash, hence the beefy HTML5.
Games, roll-over animated buttons, scrolling animation, and more are all a part of creating an experience that users remember. Websites are using interactive elements such as a series of questions (such as the new Max on Netflix) to help users find exactly what they need or want. Just be wary of slow loading sites, which can be a problem with HTML5 heavy websites. If a client’s audience is not one that enjoys waiting (and I would argue this description fits the majority of human beings), then keep the interactive elements to a minimum.
Fixed Position Navigation Menu
One quickly emerging trend caused by usability studies is the fixed position navigation menu. This type of menu remains at the top of the page while scrolling, which can be a very hand element in long-scrolling sites, even if the menu buttons simply take you to a different section on the same page.
Not all sites need a fixed position menu. If the site contains lots of information that a visitor will want to quickly access, though, then a fixed navigation menu could be argued as a must. It is actually surprising just how many sites that should have a fixed menu (whether it be side bar or top) do not.
What are some web design trends that you predict will be a large part of website design this year? Any of the above design aspects you disagree will be trends in 2014?