18 pivotal web design trends for 2014

What web design trends do you think we'll see in 2014? I'm betting on more simplicity, more cleanliness, and more focus on smaller screen sizes, among other things.

This collection is largely based on observation, vaguely educated guesswork, waving a finger in the air, and a bunch of other posts I've compiled in recent months. As such, some of these predictions may be more accurate than others!

No doubt I have missed all manner of trends, so do share your own thoughts and predictions in the comments section below.

1. Flat UI will continue to grow

As a fan of sans serif fonts I am happy to report that clean currently beats fancy. Windows 8 was really influential in this regard, and then Apple ditched skeuomorphism when it launched iOS7. I think flat design has a lot of legs left in it.

Windows 8

Apple iOS7

Skibuddy

2. 'Mobile first'

Smartphone and tablet usage has skyrocketed in recent years, and is overtaking desktop traffic for many websites. In 2014 mobile devices will continue to dominate, forcing designers to rethink the user experience for smaller screens (they should think about bigger ones too). The need to adapt to a growing mobile-enabled user base can make a company more agile, driving innovation within organisations.

Of course the reality - for most firms - is that 'mobile first' doesn't really apply. It is still very much 'mobile second', at least for now, but for those that embrace responsive and / or adaptive design, the ROI can be nothing short of majestic.

3. Yet more scrolling

I explored scrolling websites back in 2012, when it was a relatively nascent trend. It has grown a lot since then. Partly I think it is because scrolling is easy enough to execute, and partly it's because designers are thinking about mobile and tablet devices, and about how to design with the swipe in mind.

Parallax scrolling, horizontal scrolling, column-based scrolling and infinite scrolling are all things that we'll probably see more of in 2014 and beyond. There are a few things to be wary of though, particularly around infinite scrolling.

4. More HTML5 goodness

Rather than listening to me bang on about the joys of HTML5 I suggest that you visit Codepen and play around with some of the examples, to see what's possible. Alternatively, check out a few of these rather creative agency websites, which blend dollops of HTML5 with sprinklings of CSS3 and jQuery.

For example, if your sexy new website starts off with a one minute wait then you're doing it wrong, no matter how slick your 'please wait' loading icon is. Waiting always sucks, and I'm with Brad Frost: performance is design.

The return of Flash-era showiness and ego over a pristine user experience is something I hope doesn't happen at any kind of scale.

7. Less text

The web seems to becoming a lot less text-heavy, and some apps and websites have almost no visible text, instead relying on images and icons to convey information to the user.

In some cases this works really well, but in others I think the absolute avoidance of text is unhelpful. For example, the Snapchat homepage, which contains less than 10 words, and requires visitors to watch a video to make sense of things.

Medical dashboard concept

ELI - this kind of display makes sense for portfolio sites

Snapchat

8. Minimalist navigation

Stripped-down navigation is a trend that looks set to grow in popularity. Partly influenced by the need to design condensed navigation for mobile, we're seeing a lot more focus on icons, rolldowns, and navigation that shrinks as you start to scroll down the page.

Medium

Smart Home

9. CSS replaces images

Why use an image as an icon when you can use CSS? Who wouldn't want a set of lovely CSS checkboxes on their website?

10. Video / moving backgrounds

This is definitely something I think we'll be seeing a lot more of. The Guardian's 'Firestorm' provides a good example, and I reckon more brands - rather than content sites - will make the most of dynamic backgrounds in 2014.

12. Making the most of one page

More and more sites avoid loading new pages, preferring instead to present additional content on the current page. Lightboxes, overlays, and expanding / repositioned tiles can all reduce the amount of clicks in an average user journey.

Stories by H&M

13. Varied typography

Web fonts are on the rise, designers are favouring bigger font sizes than ever, and mix and match is proving to be very popular. In addition, responsive typography should become a bigger part of responsive web design.

14. Monochromatic design

Why use three colours when two - and shades thereof - will do? I've seen some lovely monochromatic palettes recently...

Qatar Airways

15. Hypercolour

Then again, why use two colours when the whole rainbow is available? A multicoloured approach doesn't need to be garish, or distracting, and it seems to work particularly well with flat design.

17. Bigger, better imagery

Massive pictures and background images - as opposed to patterns for texture - seem to be increasingly popular, and they certainly look nice on retina displays. Take a look at the recent Awwwards 'Site Of The Day' gallery and you'll see what I mean.

18. Fixed position content / navigation

This is when you scroll down and the navigation (or some other content unit) stays on the page. Sometimes the navigation will reduce in height into a narrow bar, or a small icon that can be expanded (as per point eight). This is now becoming fairly commonplace among freshly-designed websites, and let's stick with Awwwards for an example.

Agree? Disagree? What other design trends do you think we'll see in 2014? Do share your thoughts below...

Comments (86)

Comment

Send me notifications of follow up comments

Save or Cancel

Stuart McMillan, Deputy Head of Ecommerce at Schuh

some great inspirational examples there Chris, thanks!

This year I would expect to be seeing further integration of mobile hardware directly into web pages, for example, camera's being accessible and able to be used for scanning without the need for an app.

Great post Stuart. Much of the finer details you covered I find you'll see in most 'new' designs available for purchase in-market. For example, browsing some of the more popular WordPress designs in the open-markets, I found almost every point you touched one was an attribute of these popular designs....so yes, I think you're right on the mark with these points.

I too had launched my CV portfolio over the holidays and took into account most of the key UX design elements and aesthetics you pointed out, especially the sticki-navigation, parallex effects, large imagery and CSS iconage usage.

Thank you for the post. It is very good to have an article like this and use it as a proof especially when it comes to convincing web design clients to opt for a newer, more modern web design as opposed to something that "looks more pretty to me" . I mean businesses (especially small business owners) are sometimes very close-minded when it comes to the way their websites are supposed to look like.

almost 3 years ago

Matt

For #10, I saw my first full video home page just today. http://www.any.do Very cool.

Some very interesting points, particularly in relationship to mobile first and infinity scrolling which we're seeing a lot more of. The latter being frequently employed in e-commerce environments very successfully.

Only point of concern is the manner in which html 5 is being utilised to create Flash type sites that really are extremely painful.

We've seen a quite a few of these of late, and it does take you back a few years rather than forward. It's a shame, but I do think this will become one of the major talking point of 2014.

There is without a doubt some great insights as to where web design is going in 2014 and beyond. But my eye caught a comment from another here who made reference to the small business website owner who is as they say close minded. I would also like to add that unfortunately for that small business website owner this could also be down to the web developer not being skilled enough to implement the design techniques mentioned here.

Just the other day I heard from a website owner that their web developer said you could not implement a zoom facility into the new website they were having built and yet there were a number of plug-ins that were even open to the developer.

I also think those site owners who have good budgets for both development and marketing, then this is where we will see there sites flourish with what has been highlighted in this article but many a small business owner site will still fall far behind, because I constantly see corners being cut here and people not willing to invest properly in their website project in order to make it fly properly.

Great article, you can't beat econsultancy, it is as close as we can get to a voice setting industry standards.

almost 3 years ago

Glaf Cole, Owner at Small Business Marketing Professional

Always good to keep up on trend in this industry. Strategy is paramount however in the context of presentation 'what am I actually looking to achieve with this?' Having said that fixed position content I find quite striking - I am yet to use it though. Perhaps the need will arise soon.

I too love this post, most of these trends are already starting to be very visible. I also launched my CV portfolio website just before Christmas and I'm using Parallax Scrolling, the static menu at the top of the page, clear and concise text (but not too much) as well as the large background images.

The Reg write:
> Windows 8/8.1 does not appear to be being picked up by consumers or businesses... One reason for this is Metro, the hated interface that tore both users and devs away from the familiar desktop user experience and usual way of building apps.

I think these are pretty safe predictions. Not meaning that the designs are necessarily safe, but that as an extension of the work emerging in 2013, it covers those elements that seem to have some longevity, based on adoption. There is some evidence here that 2014 is another year with the potential for web design to entirely eat itself, such that the convergence of trends leaves us with only the blank canvas as the artefact. But then, that's a pretty stupid thing to say. So I'll avoid it.
Thanks, as usual, for collating these examples and providing your commentary.

I am hanging my hat on Video Backgrounds becoming an ever increasing trend during the next 6 months. Saying that, in order for it to work successfully, it requires some seriously good quality, engaging video, and you don't see too much of this outside of the content produced by top brands.

almost 3 years ago

Neil Charlton, Director at Plug and Play Design - Moorgate

Plan mobile, Think mobile, Do mobile, Everything mobile. If the design fits a mobile or tablet scenario then it's worth considering, otherwise many of the 16 will not take off or be relevant.
Neil
http://goo.gl/UvTRUc

There are some great examples here of just how effective websites can be, as with many others I love the moving video background. There are a lot of factors you have mentioned above that are likely to be the way forward in 2014 and I think some, if not most will be changes due to mobile designs; things like colours used, font sizes, infinity scrolling. Statistics show that more and more people are using mobile technology to search the web and as such we are all going to have to adjust to this by integrating what we know about web design on the smaller screens.

> I am hanging my hat on Video Backgrounds becoming an ever increasing trend during the next 6 months.

Since my job is trying to helping sites make their sites faster, for best user experience - I can't help wondering if Video Background could take us backwards in that regards.

Any anyway - if it's in the background .... doesn't that by definition mean it will be ignored? Ok sure: once in a while some people will notice it. Probably more of the arty/creative types who may or may not be representive of your audience.

After all - does any of our uses notice the background images behind our sites?

If video content is worth generating at a good quality: then putting it in the background seems poor use of it?

But i think that you should mention about 'Infographic'. We can't ignore it as a web design trend. I have seen that there has been a huge demand of infographic design in the year 2013 and i believe that it will remain appealing in 2014 also. Most businesses and even individual adopt infographic in order to present vast amounts of data or information in a clean, organized and logical manner. People love to read interactive infographic rather than reading a page with bunch of texts.

I've read a lot of very trashy design trend forecasts this year. This is a refreshing exception with great examples and reasoning. I hope your speculation is accurate, should make for an aesthetically pleasing 2014. Good article.

almost 3 years ago

Yekeen

Not a fan of No 18 - Fixed content position. The minimized content can be fairly annoying if it takes much space on the site especially on content heavy site. User would need to scroll more and it doesn't make the best use of screen space.

I would suggest that it should be rarely used on content heavy sites or should at least be small enough not to be a nuisance. Or with an option for the user to hide it.

I agree with you on the points though. Great read, I thoroughly enjoyed it.

almost 3 years ago

Dawesi

none of these are new trends, especialy flat, that was 2012 for android and windows phone, now apple jumped on the party train late and completely screwed ios7's usability by misusing it #fail

#1 - Firstly mobile web browsing is still only 20% of all browsing. It's not dominating anything... yet.

#4 - jQuery is slow. use something fast like Sencha if you need a framework this is fast.

Apple's Parallex - Worst feature introduced to UI since the blink tag! That is such a bad tip.

People are turning this feature off in droves on apple devices as it makes people sick, no really.

You also have not mentioned the super tablet at all? This is another massive change to UI, now we have phone, phablet, tablet and super tablet - all completely different paradigms design wise.

Nice overview and some great examples to illustrate each point! Well, I am not a big fan of most scrolling websites, I often find the menu takes up too much of the page but they can be pulled off well in some cases. Flat design for 2014!

Really great, on the nail post on web design, and certainly very inspirational. Everybody hates Apple's UX except me, it seems.
Nevertheless, it will influence design in some way, perhaps only by it's prevalence and nothing else!

I have already seen some of the unique designs and trends that have emerged in the late 2013. Windows 8 design is amazing and the iPhone design trends are the most influential according to me. I am always in a search for the new design patterns for my current & the future website designs. Really a WOW!! post on web design trends for 2014.

Thanks for the great article! I love these 18 website trends for 2014. My favorites are less text, large images for the background and fixed position navigation. These 3 and the other trends are all designed to enhance the user experience. I personally enjoy using sites that incorporate the features you mentioned.

I am deeply humbled to web designers who are able to do their creativity without compromising the simplicity, functionality and the uniqueness of each webpages they are working on. Sometimes its not the color, the background, or even fonts of each letters that are being used to make the website very attractive and excellent, It's got to be the relevance of how each and every concepts matches the expectation of each person to the site. That I believe is something that every web designer should work on to and always put into consideration.
By the way, I love every content that is in this post. Had a great time reading it Chris! =D

The trends for Web are a little disheartening to me. It seems that the trend of aesthetics has been substituted for well, blah. Content is very important and if your site is utilitarian at its core, then by all means, content away. But where do you draw the line? It would seem that these new trends are like throwing the baby out with the bath water. UX means "user experience." What kind of "experience" can be had by going to 10 different sites and all the user experiences is, "Oh...look. Another site with a white background, flat colors, and a bunch of text. Looks like Windows 8. What an experience...yay...next." Is this the new "trend" that can be expected from all of this? When did the trend go from artistic expression via design to just making it work by using a bunch of canned content?

@Dave - I know, I know! We have redesigned the blog, and it will be responsive when we launch it in March (or thereabouts).

@Minit - Totally with you on the UX front, but there are aesthetic trends, and trends driven by technology, which will all determine how websites might look in the future. That they should work beautifully goes without saying, but some of these trends are indeed dubious from a UX front. Beware dragons.

@Dawesi - Yup, and that's why the article is headlined 'trends' (as opposed to 'predictions'). Trends need a history in order to see where they might be going, and as referenced above I covered some of this stuff two years ago.

@Deri - Some of these backgrounds look pretty good, whereas others distract and should be filed under 'frippery'. However I suspect it is one of those things that might be here to stay.

@Alicia - Personally I'm not a fan of circular pictures for avatars, or passport photos for that matter, but it is something that I've seen on a bunch of sites. Not quite sure it is a full blown trend though.

Flat designs will earn more popularity as it gives prominence to the content. At a time when search engines are also giving preference to the contents rather than the number of links, these designs will certainly get higher rankings if filled with relevant contents

Flat icons and UI is a revolution of different operating systems, such as Windows 8 and iOS 7. I have to say, it looks quite beautiful. The other web design trends and changes are also very remarkable. Thanks for this great post.

almost 3 years ago

Helen

I am a small business owner and about to commission an e-commerce only website. I am neither interested or capable when it comes to SEO or in fact anything to do with computers, website design or technology! However, I absolutely know that I can't run my new business venture without this aspect being given the highest priority. In fact I am even hoping the SEO provider I use will produce the website first and then the designers will be required to tart it up. What is the point of a visually stunning site if no-one can find it? Hence I find myself at this post and I am VERY grateful for it.
I will be able to go into meetings with potential SEO providers without having the wool completely pulled over my eyes.
See us small business owners are not all backward :)

A very big thank you!

almost 3 years ago

Yigal Carmy, Co-Founder, Co-CEO at http://www.justdo.mobi/

Great article.
It's hard to find something that I learn from and agree with at the same time :-)
I didn't understand if you're into moving backgrounds or just saying it's a trend. It is and I hate it. It takes too much attention.
Anyway, I think good web apps will take their place in mobile web design, so that mobile users will finally get the UX of a native app.

I'm not crazy about anything that makes a page heavier, unless there's a great aesthetic or functional trade-off. So that's the first thing to get right.

If the execution is done well, and if the moving backgrounds add something to the experience, then sure. I've seen examples that work well. But you're not wrong... they can distract too. As ever, there's no one rule.

I think many brands and publishers should have mobile apps *and* mobile-optimised websites, whether that's RWD or adaptive, or some combination of both approaches. For example, airlines could have apps or adaptive sites that specifically cater to the actual travel experience, as opposed the pre-travel, booking tools seen on their legacy websites.

Does anyone have other specific URL examples of #8? Minimalist Navigation ... This intrigues me working for a B2B. Most businesses just follow basic design trends and expect major navigation, so the minimalist idea intrigues me.

Wow that was unusual. I just wrote an really long comment but after I
clicked submit my comment didn’t appear. Grrrr… well I’m not writing
all that over again. Regardless, just wanted to say fantastic
blog!

Great post. The images given in the post along with the information are making the post easy to understand the exact point. The trends you have mentioned should be considered by all the designers while making the new designs.

Information in the post is really good for all web designers and web developers. I think relevant and attractive images are the important part of the websites now a days. So one should focus on it while cresting the user interface.

@'Website Development Company' - Your comment has been placed into the spam filter, probably because you're using such the clearly sketchy and very outdated tactic of changing the link text for SEO. You do know that links like this on our site don't count, right?

almost 3 years ago

web development Company, SEO at Virinchi Software Pvt. Ltd.

Thanks for sharing your great post! Awesom! You do great work, and it is always super helpful to see a behind-the-scenes look of how something is created.

almost 3 years ago

jayshree mane, web designer at Mastercomputech

Information in the post is really superior for all web designers and web developers Thanks for sharing your great post! The images specified in the post together with the information are making the post easy to understand the exact point

almost 3 years ago

Muhammad Owais, Web designer at mowais.com

That is the precise weblog for anybody who needs to search out out about this topic. You realize a lot its virtually exhausting to argue with you. You definitely put a brand new spin on a subject thats been written about for years. Great stuff, just great!

I was extremely pleased to discover this website. I wanted to thank you for your time just for this wonderful read!! I definitely really liked every part of it and I have you saved to fav to check out new stuff on your blog.

Those four elements are interconnected. A web designer will not be able to create a balanced website design without thinking of proportion and unity. Similarly, the designer will not finish a coherent website without thinking of the other three elements.

Images need to be arranged in a coherent and organized manner so the web page’s readers will not find it complex to go along with the navigating directions. One way of presenting a visually pleasant and simultaneously useful webpage layout is to divide the space.

This strategy demonstrates the visitors that each area of the layout provides unified data. It is the proper application of those four layout aspects that aid the visitors to understand the layout completely.

Site visitors always see one whole web design each time they click a homepage’s web address. So it is truly needed to guarantee that all the four fundamentals are properly shown. Or else, the design will not only seem visually disturbing but also less practical. It may be hinted too that aesthetics can’t be separated from functionality.
http://www.fcprop.net

about 2 years ago

Chirag Shivalker, An Offshore Software Development Company at Hi-Tech ITO - Custom Software Development Company

Thanks Chris,

This is the great article about website design trend in 2014.

For #2 I always prefer for this trend because now the trend of mobile in recent years is increase day by day.

Creatrix Digital is a trusted partner to numerous companies as they provide effective website design and development services. Every project is dealt with accordingly that starts with understanding your company’s goals and needs so as to be able come up with an effective yet closely related design for your business site. You can talk to a representative about what you need and we’ll do our best to create a great design and develop your website. For more info just visit http://www.wearecreatrix.com/web-design.html

almost 2 years ago

Atilla Bor, ICT at ITC

I did not like this tile fashion at all. A few huge tile covering large porsion of the screen. I don;t know how internet falling into such stupid fashion.

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Daily Pulse newsletter. Each weekday, you
ll receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.