Published on February 17, 2014
1 10 webdesign trends for 2014
2 Creativity is contagious, pass it on. Albert Einstein
3 10 WEBDESIGN TRENDS FOR 2014 BY 1. MOBILITY CHANGES EVERYTHING 2. THE SCROLL AND SINGLE PAGES SITES 3. LESS BLAH BLAH BLAH 4. FOCUS ON PICTURES 5. VIDEO SPEAKS LOUDER THAN WORDS 6. FLAT DESIGN 7. FONT, WEBDESIGN STAR 8. GEOMETRIC WEBDESIGN 9. PARALLAX AND ANIMATED SITES 10. SYNCHRONISED NAVIGATION
4 1. Mobility changes everything
1. Mobility changes everything The year 2014 will be influenced by mobility MOBILITY Today, more and more people connect to the Internet whilst on the go thanks to smartphones, tablets and even « phablets » (device between a smartphone and a tablet, according to the size of the screen) 5
1. Mobility changes everything The year 2014 will be influenced by mobility MOBILE PHONES 7 BILLIONS mobile phones in the world of which 48 million in France 72% of French users browsed the Internet on their mobile phone in 2013 (against 55% in 2012 and 40% in 2011). Globally, there are more internet users browsing from mobiles than desktops. 6
1. Mobility changes everything The year 2014 will be influenced by mobility TABLETS 4 MILLIONS of french mobile owners have a tablet too. 4 TIMES FASTER The growth of tablets (still less widespread compared to mobile phones : 14% of french adults own one), is 4 times faster than the growth of mobile phones at their launch. 7
1. Mobility changes everything The year 2014 will be influenced by mobility MOBILITY = LOTS OF SCREENS Mobility demands adaptation to a variety of screen resolutions and formats: Design: to adapt to a smaller screen is a major obstacle in terms of creation for mobile, for example. Development: to adpat to all the devices demands way more optimisation in web development. Navigation: mobile touchscreen navigation and small screens challenge to rethink the websites’ ergonomy. Content: mobile users want accessible contents, faster, simpler, without the distortion of elements. 8
1. Mobility changes everything The year 2014 will be influenced by mobility MOBILITY = A GLOBAL INFLUENCE It isn’t only a matter of « adapting » or even « declining » websites’ design to mobile devices but it is now about « rethinking » the whole webdesign concept according to the influence of mobiles. Today, people require website content to be rethought and reshaped with the same evolutions as mobile sites. In 2014, the « mobile first » creation process (whereby the mobile site is created and then adapted to desktop) is becoming increasingly adopted. 9
1. Mobility changes everything The year 2014 will be influenced by mobility MOBILITY = THE CHANGES • Solutions for a design adapted to all devices • Straight-to-the point content: less text, more visuals • Simplified access for less loading time and a faster experience • Rethought ergonomics to find the correct information immediately • New « touch friendly » navigation 10
1. Mobility changes everything The year 2014 will be influenced by mobility Emergence of responsive design Responsive design adapts to all devices, this means lower costs as multiple version do not have to be developed. Responsive is a practice that consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website should automatically switch to accommodate the resolution, image size and scripting abilities. In other words, the website should have the technology to automatically respond to the user’s preferences. 11
1. Mobility changes everything The year 2014 will be influenced by mobility More visual content … to fit to a screen size where text is more complicated to read … to highlight the important information in a more attractive way http://bit.ly/1lBaqjn 12
1. Mobility changes everything The year 2014 will be influenced by mobility Rethought ergonomics for touch navigation 13
1. Mobility changes everything The year 2014 will be influenced by mobility Mobile influences desktop sites As we can see on this site Travel Alberta: its navigation is similar to tablets. The user clicks and opens various layers to instantly access the information he was looking for immediately. 14
1. Mobility changes everything The year 2014 will be influenced by mobility All the content needs to be rethought ! Check out our blog and our report about Karen McGrane’s very interesting book « Content strategy for mobile »: http://bit.ly/1bs65ur 15
16 2. Scrolling and single paged sites
2. Scrolling and single paged sites Webdesigners like scrolling and single paged sites SCROLL Still influenced by mobile and touchscreen navigation, scrolling is developed on lots of sites. With the image optimisation technics, scrolling and mobile experience, single paged sites will still be the star of the year! 17
2. Scrolling and single paged sites Webdesigners like scrolling and single paged sites SCROLL It should not be overlooked, however, that multiple paged sites are much better adapted to websites with a substantial amount of content. Single paged sites are mainly used to make the website visually more attractive and to provide a friendly surfing experience with simplified content. Useless if your site is full of information! 18
2. Scrolling and single paged sites Webdesigners like scrolling and single paged sites Examples of single scroll paged sites: http://bit.ly/1dHk9OL 19
2. Scrolling and single paged sites Webdesigners like scrolling and single paged sites Examples of single scroll paged sites: 20
2. Scrolling and single paged sites Webdesigners like scrolling and single paged sites Examples of double-scroll: Scroll isn’t only linear, it can be crooked, from left to right or doublescroll: sites are very creative. Here, the site is in double-scroll, it means that when you scroll with your mouse, the two parts scroll in the opposite directions. Try on the website to know more about what is double scroll: http://www.fadeoreddy.com/ 21
22 3. Less blah blah blah
3. Less blah blah blah Say it, but say it in a more catchy way IN 2014, WE KEEP QUIET? Yes and No! We try to be straight to the point : say less to only provide the essential information. We can say as much as usual but with more attractive elements for more comfortable reading: less text, more pictures, pictograms, illustrations, videos, datavisualization… 23
3. Less blah blah blah 24 Say it, but say it in a more catchy way IN 2014, LESS BLAH BLAH BLAH! Just look at Apple: they say as much as their competitors but they really know how to highlight their products, be straight to the point and prioritise which information to provide. They focus on design and key visuals of products to be more catchy.
3. Less blah blah blah 25 Say it, but say it in a more catchy way Content can be simplified by datavisualization Datavisualization and pictograms give life to text. It creates an attractive layout and highlights the key points of the speech. http://bit.ly/1djnwji
3. Less blah blah blah 26 Say it, but say it in a more catchy way …or pictograms Pictograms explain different steps or visually categorize text. http://bit.ly/1jwkmfU
3. Less blah blah blah Say it, but say it in a more catchy way …or pictures to explain in a more attractive way than text On this site, Android succeed in portraying the brand and the systems’ stories without having to explain it with text. Its message is conveyed mainly by the pictures of pastries that stand for the OS. Here, the brand history isn’t boring. Challenge completed. 27
28 4. Focus on pictures
4. Focus on pictures 29 Say it with images ! IMAGES: THE HEART OF WEBDESIGN Images are meaningful and attractive. This trend is fully related to trend 3 « Less blah blah blah » and the need to get staight to the point. We see more and more websites with high quality background images. This introductive image is very impressive and important on the website, it makes it very visual and refined. Not to mention Pinterest and Instagram which have a big influence and play a part in the development of the image as a way of communicating. 3D Design will also be a key player on the 2014 webdesign stage.
4. Focus on pictures 30 Say it with images ! More and more large background image websites Webdesign in 2014 will focus on large high quality images. http://bit.ly/NC94JV http://bit.ly/1aUCPjg
4. Focus on pictures Say it with images ! More and more large background image websites http://bit.ly/1okfVFr http://bit.ly/1hbDFLd http://bit.ly/1iOH6Vs 31
4. Focus on pictures Say it with images ! More and more large background image websites This site highlights the product and focusses on the printed materials of the bottle to design the entire website. 32
4. Focus on pictures Say it with images ! More and more large background image websites The site of Sagmeister Walsh is composed of random images. The menu is directly clickable in the images. 33
4. Focus on pictures Say it with images ! More and more large background image websites The menu is clickable directly in the background of the picture. 34
4. Focus on pictures Say it with images ! More and more large background image websites The site of Windshape is composed of large random images with filter effects like on Instagram. 35
4. Focus on pictures 36 Say it with images ! Blurred images trend is developing We see more and more ‘blurred design’ on these large image background websites. ‘Blurred images’ are large images with a big blur of pastel tones of colours. They bring a refined and sober atmosphere to the website. They also take less time to load because the size of the picture is smaller than standard images. http://bit.ly/1eQ21IK http://bit.ly/MbTW54
4. Focus on pictures 37 Say it with images ! Image editing and creation The images are even more meaningful when they are customised : mixed with geometric patterns, fonts, other images… It conveys a stronger message and creates a specific atmosphere. http://bit.ly/1aUELbA
38 5. Video speaks louder than words
5. Video speaks louder than words Video, added content value VIDEO: 90% OF WEB TRAFFIC IN 2017 Like images, videos occupy a more important place in webdesign for more airy, visual and attractive content. Video will make up 90% of web traffic in 2017 according to Cisco. According to Social Media Examiner, 76% of marketers plan to increase the use of videos on the internet. No need to tell you that video will be the star of 2014 to bring forward a concept and a brand product. 39
5. Video speaks louder than words Video, added content value Video in centre page We see it increasingly in the centre page of sites to animate and dynamise but equally to replace explanitory texts which take time to read. A non negligeable point about video: it allows for greater virality than text (videos are easily shareable on social networks). The Qcamera Site is animated by the video in centre page with an explanation about the product. 40
5. Video speaks louder than words Video, added content value Video in centre page The whole background of Any.do’s site is animated by a video to give a particular ambiance to the site. 41
5. Video speaks louder than words Video, added content value Video in centre page: other examples A swimming pool site with a video in centre page to « plunge » you into the universe. The site of the film Gravity to immerse the user into the film. 42
5. Video speaks louder than words Video, added content value 100% vidéo This site of Puma uses a video for its background with two other video screens in the foreground. 43
44 6. Flat design
6. Flat design 45 Sites in flat SKEUOMORPHISME IS ALREADY AWAY Skeuo-what ? ! For those that do not know, skeuomorphism is a term defining an element of design that ornamentally reproduces a necessary element of the original object. This trend was democratised by Apple’s interface designs that were reproduced in the form of physical objects to make it easier for the user to understand. The gallery of e-books, the memos in the forms of ‘post its’, metal effect buttons…. Or even in navigation that took inspiration from physical reflexes (e.g turning the page of an e-book).
6. Flat design 46 Sites in flat FLAT DESIGN IS STILL TRENDY IN 2014 Apple has often influenced artistic direction in the last few years, notably with skeuomorphism. Last year it was Windows, Apple’s competitor, with its colour blocks and simple icons: the first OS to apply ‘flat design’. Flat design takes inspiration from the 60s and wants for the design of the site to be flat by removing all the frills. No gradients, textures or drop shadows etc.
6. Flat design 47 Sites in flat FLAT DESIGN IS STILL TRENDY IN 2014 iOS6 iOS7 Evidence of the influence of flat design, Apple has abandoned its skeuomorphism to adapt to this trend for iOS 7. The interface revisits the 80s, with flash colour gradients. This change created a real controversy in 2013. Flat design will once again be a trend for webdesign in 2014!
6. Flat design Sites in flat SKEUOMORPHISM VS FLAT DESIGN 48
6. Flat design Sites in flat Know the difference between flat design and realism (skeuomorphism) This site clearly explains the difference between these two trends which went head to head in 2013: http://www.flatvsrealism.com/ 49
6. Flat design 50 Sites in flat More and more sites are being influenced by the flat http://bit.ly/1m7tUA1 http://bit.ly/1djO8ke
6. Flat design Sites in flat The long shadow design gives depth to the flat We see the appearance of the ‘long shadow’ trend which consists of simply adding a long shadow to elements which adds depth to their flat design. 51
52 7. Font, the star of webdesign
7. Font, the star of webdesign More personalised fonts FONTS, MORE THAN JUST LETTERS Gone are standard fonts, we are seeing more and more personalised fonts, made to measure, which alone can portray a whole universe and significations. 53
7. Font, the star of webdesign More personalised fonts FONTS, MORE THAN JUST LETTERS To the delight of designers, all font types are becoming compatible with browsers. Google Chrome and Firefox are constantly looking for solutions to improve the visual appearance and the display of these new fonts. Unfortunately, most browsers have sprung into action a little too late, notably Internet Explorer, the most widespread in the world. But the evolution is ongoing and soon enough the basic fonts will be sitting on the sidelines. 54
7. Font, the star of webdesign More personalised fonts Font, much more than just letters: a visual full of meaning The fonts give a more unique aspect to the creations, express their personality, positioning, their message and values. http://bit.ly/1fgkEQY http://www.valentinagallo.us/site/ 55
7. Font, the star of webdesign More personalised fonts Font, much more than just letters: a visual full of meaning http://bit.ly/1jx5EVS 56
7. Font, the star of webdesign More personalised fonts Font, much more than just letters: a visual full of meaning The font gives more dynamism to images with ‘mix and match’ (mixing numerous fonts for an artistic approach). http://bit.ly/1kBJCle http://bit.ly/N5qUEf 57
7. Font, the star of webdesign More personalised fonts Other examples of fonts: http://bit.ly/1fYSlbp http://bit.ly/MbZrR0 http://bit.ly/1eTVJ9x 58
7. Font, the star of webdesign 59 More personalised fonts http://bit.ly/MKXI58 http://bit.ly/1er05jC
7. Font, the star of webdesign More personalised fonts http://bit.ly/1aUJOIP 60
61 8. Geometric webdesign
8. Geometric webdesign Use of geometric forms in webdesign We still notice and continue to use geometric forms in webdesign, angular or rounded, the forms honour and embellish layouts of sites with reworked images. 62
8. Geometric webdesign Use of geometric forms in webdesign http://bit.ly/1m7x1rB 63
8. Geometric webdesign Use of geometric forms in webdesign 64
8. Geometric webdesign Use of geometric forms in webdesign http://bit.ly/1jx716U 65
66 9. Parallax and animated sites
9. Parallax and animated sites Giving an immersive and functional dimension The scrolling parallax made a strong entry, now 2 years ago, and is certainly set to continue in 2014. With this technique, the background images move more slowly than the images in the foreground, this gives a feeling of depth and immersion. Based on the principal of video games, this technique gives a lot of dynamism to sites. The possibilities are endless and we think that many more surprises lie ahead for this year! Parallax gives depth through moving products Rimmel’s site 67
9. Parallax and animated sites 68 Giving an immersive and functional dimension On this site of Anna Safroncik, the parallax technique has been used to dynamise reading, by scrolling, the images appear as and when to give more character to the site.
9. Parallax and animated sites Giving an immersive and functional dimension On this site of No Leath, all the products are highlighted thanks to the movement that produces the parallax, the content of the site becomes the essential for more attractive and dynamic reading. 69
9. Parallax and animated sites Giving an immersive and functional dimension Other sites do not stop at a simple parallax scroll and go as far as developing entirely animated and interactive sites. These sites have a more fun and event related purpose, their role is to completely immerse the user in an engaging experience. This draws attention to the site and encourages the user to stay on the site for longer. http://bit.ly/1hbOvB4 70
9. Parallax and animated sites Giving an immersive and functional dimension This site helps users to discover the mystical universe of Jack Daniels during the Christmas period, the site is full of animations to give total immersion into the different facets of the brand. 71
72 10. Synchronised navigation
10. Synchronised navigation A multi device experience For some years, "Google experiment" has frequently come up with new technical feats that change the web of tomorrow, and therefore inspire designers to create different models. One of the new techniques that marked this spirit is synchronised navigation on mobiles or tablets. Google Chrome presented this with their site Super Sync Sports. The idea is to scan a QR code to therefore be immediately directed to a specific URL on your smartphone, the link is automatically made and the magic starts! 73
10. Synchronised navigation A multi device experience The Adidas site– Nitrocharge your game is a digital experience where you can discover players sponsored by Adidas, admire shoes from all angles and play the multi screened game on your iPhone or on your desktop. 74
10. Synchronised navigation A multi device experience On the Justareflektor site, Arcade Fire allow you to discover their new video by interacting with the site through mobile. 75
10. Synchronised navigation A multi device experience The site Racer allows you to complete a racetrack made up of numerous smartphones and tablets (5 maximum). To accelerate you just have to touch the screen of your terminal. 76
77 Appointment in 2015 to review the progress!
Thank you for your attention Do not hesitate to get in touch Jean-Marc Liacy and his team Artistic Director firstname.lastname@example.org +352 48 90 90 226 Contact us: Benelux Jérémy Coxet email@example.com +352 48 90 90 France Xavier Lesueur firstname.lastname@example.org +331 55 33 89 00 Suisse David Pihen email@example.com +41 22 306 49 90 Solange Derrey Head of digital studies firstname.lastname@example.org +33 1 55 33 89 17 vanksen.com twitter.com/vanksen facebook.com/vanksen pinterest.com/vanksen
Vanksen’s creative team brings you 10 predictions for trends in webdesign for the year 2014. The year 2014, in web design, will focus on
source. Every year, Web design grows and so many awesome things are being published daily. I can only imagine that the best is yet to come in 2015 ...
Vanksen, Paris, has published this great Slideshare presentation, highlighting ‘their’ top 10 webdesign trends in 2014. You will hardly look for total ...
25 Best Responsive Web Design Sites for Your Inspiration With more people surfing the web from their mobile devices, designers and developers have been ...
10 Webdesign Trends for 2014 by Vanksen from Vanksen Pour résumer : 1) Mobile first, responsive design, sites desktop influencés par le mobile 2 ...
Dans le cadre de sa veille active sur différentes tendances et secteurs d’activités, Vanksen réalise des études qu’elle publie sur le web dans une ...
10 web design trends for 2014 by Vanksen: The mobile web, single pages, strong content, stunning pictures and video, flat design, typography, geometric ...