SlideShare a Scribd company logo
1 of 93
Download to read offline
WEB DESIGN
BOOK OF TRENDS
2013-2014

Marcin Treder, Robert Warych

and

Sebastian Witman
Preface
Design is the mirror of culture. Changes in society, technology and art are
always reflected in the current state of design. Designers are stretching
the limits of matter and self expression in the constant endeavor to build
something meaningful. This effort cannot be separated from the world - the
ultimate source of design inspiration.
Web Design is by far the most dynamic member of the design family.
Trends come and go quickly. Each year, though, seems to be more mature
and the progress is easily visible.
In recent years we went through a massive interest in skeuomorphism, a robust usage of large typography, vintage websites, hand written fonts, wood
patterns, big headers, enormous footers, etc.
Today, design is different. Users are finally in the center of the process and
3
you can literally feel this while browsing through the web. Content never
mattered more. The adaptation of websites to different screen sizes has
become a standard. The visual side of web design leans towards simplicity
and balance. Web Design has never been more mature and sane.
And yes, though the madness of flash has died, we can still witness a lot of
craziness. Designers are stretching the limits of technology with Web GL,
very popular video backgrounds and twisted variations of web navigation.
Without experiments, though, there would be no progress.
Progress couldn’t exist without constant learning from each other as well.
That’s why we’ve decided to analyze thousands of websites to look for the
trends that are repeated by the best designers. We’ve found very popular
patterns in 2013 and emerging trends that most probably will be very popular in 2014.
We’ve singled out 11 trends and chosen 15 amazing examples for each one.
Trend no. 12 was forced on designers by the EU - the infamous “cookie
warnings” that flooded the web come with 4 examples (more would be
simply boring).
We’re hoping that this collection will fill you with inspiration and reflection
on the direction web design is heading in.
Have fun!

4
1. THE ERA OF CONTENT
“Content is King” said Bill Gates back in 1996 and we waited quite a long
time to fully feel the wisdom of these words in web design.
Today, finally, web design has become content-centric. Great text, amazing
photographs and videos are the center of the modern website. The content
rises above the layout and ornaments, or in other words - design creates
the context for content.
Visitors don’t come to our website to admire the layout and overall design.
Visitors come to a website to achieve their goals. In most cases content is
the road to the goal and it has to be clear.
The layout and design of the website attract visitors but it works only when
you have relevant, useful and catchy content.
The 15 websites that we’ve chosen represent magnificent abilities to present
content in an engaging way. Enjoy!

5
1948 London | 1948 London http://www.1948london.com/

6
Agence Web et Communication Culturelle | Kahuna Webstudio http://www.kahuna-webstudio.fr/

7
D’Angelico Guitars | A Legend is Reborn http://dangelicoguitars.com/

8
TED-Ed | Clubs http://ed.ted.com/

9
Find Your Way to Oz | Disney’s Oz The Great and Powerful http://www.findyourwaytooz.com/

10
TCM Summer Under the Stars 2013 http://summer.tcm.com/

11
Le Tour de France - 100 ans de Tour http://100ansdetour.fr/

12
Polygon http://www.polygon.com/

13
BBC http://www.bbc.co.uk/

14
GOOD | Ideas and Tools for Progress http://www.good.is/

15
This is true. http://www.truedigital.co.uk/

16
The Verge http://www.theverge.com/

17
National Academy Museum http://www.nationalacademy.org/

18
GSF2013 https://www.googlesciencefair.com/

19
Magazine mode : Glamour http://www.glamourparis.com/

20
2. STORYTELLING
Storytelling is a powerful method of communication. In The Psychological
Power of Storytelling, author Pamela Brown Rutledge says “when organizations, causes, brands or individuals identify and develop a core story, they
create and display authentic meaning and purpose that others can believe,
participate in, and share.” Storytelling is the road to efficient web communication and in 2013 designers seem to have finally grasped this concept.
The fact that storytelling is used not only by major brands to tell their stories, but also by non-profits to create an emotional response to important
problems is all worth respect. After all persuasion is a big part of this design
idea and nobody said it cannot be used for a good cause.
In 2013 designers mastered storytelling and I’m pretty sure it will be a major
trend in 2014. This is the kind of fashion we’d love to be ruled by, isn’t it?
Brace yourself. You’ll be amazed by our 15 best storytelling websites on the
next pages.

21
Dadaab Stories http://www.dadaabstories.org/

22
Browser Awareness Day http://www.browserawarenessday.com/

23
NASA: Prospect http://nasaprospect.com/

24
How Far is it to Mars? http://www.distancetomars.com/

25
mediaBOOM | Web Design CT | Award Winning Web Development CT http://mediaboom.com/

26
Orange history http://orange.com/sirius/histoire/en/

27
The Power Inside http://www.insidefilms.com/en/

28
Snipcart | Effortless Shopping Cart for new or existing websites using any CMS https://snipcart.com/

29
Black In History http://blackinhistory.tumblr.com/

30
Your Tour http://yourtour.withgoogle.com/

31
Inception Explained - An interactive animated infographic http://www.inception-explained.com/

32
You Waste A Lot Of Time At Work https://www.atlassian.com/time-wasting-at-work-infographic

33
These Are Things - Home of the Modern World Map http://www.thesearethings.com/

34
Reverend Danger http://www.reverenddanger.com/

35
Black Ram http://www.blackramwhisky.com/

36
3. RESPONSIVE WEBSITES
Three years have passed since Ethan Marcotte coined the term “Responsive
Web Design”. Once a revolutionary fresh idea, has in the year 2013 been
transformed into a commodity. Responsive Web Design (RWD) is not a
mere trend anymore, it’s the reality of design expression.
I’d even go so far as to say that responsive web design will soon be as
obvious as the separation of css and html for semantic reasons. It’s not
a question of whether to use it or not. It’s a question of whether you can
implement it properly.
We live in the post pc era. Mobile devices (and soon wearable computers)
are growing in importance and today we have no other choice than to
accept the fact that our websites need to provide an exceptional experience
for different screen resolutions. In 2013 25% of the Internet traffic will come
from Smartphones and Tablets. More than 25% of TVs sold in 2012 were
Smart TVs with Internet connectivity. Only responsive web design will let
you easily serve all these devices and their owners

37
Northbound Design™ http://www.northbounddesign.com/

38
Café Evoke // Coffee, Wine, Beer, Eats, and Catering in Edmond & Oklahoma City http://cafeevoke.com/

39
Trent Walton http://trentwalton.com/

40
Breaking News, Analysis, Politics, Blogs, News Photos, Video - TIME.com http://www.time.com/time/

41
This Is Responsive http://bradfrost.github.io/this-is-responsive/

42
Skinny Ties | Nothing but skinny ties. http://skinnyties.com/

43
Custom Suits & Mens Suits | Indochino http://www.indochino.com/

44
United Pixelworkers http://www.unitedpixelworkers.com/	

45
Five Simple Steps http://www.fivesimplesteps.com/

46
Justin Aguilar - Designer http://www.justinaguilar.com/

47
Teehan+Lax - Defining Experience http://www.teehanlax.com/

48
MRY | A creative and technology agency that makes brands remarkable http://mry.com/en/

49
Welcome to BEAM http://www.beamland.com/

50
Build a Website — Squarespace http://www.squarespace.com/stories/

51
HubSpot | All-in-one Inbound Marketing Software http://www.hubspot.com/

52
4. FLAT DESIGN
To say that “Flat design is extremely popular” is to say nothing. Flat
design took over the design world. Microsoft (since 2010), Google and
Apple (iOS7) adapted flat design to some extent and thousands of designers
followed. 2013 was the year of flat design and 2014 won’t be any different.
Flat design will stay with us for a long time.
Some designers, though, tend to see it as the beginning of the revolution:
“I believe that the flat design trend is a symptom of growing maturity in the
field of web and interface design. This maturity applies to our designers –
who are getting better at making interfaces that encourage interactivity and
engagement – as well as to our users.” /Marci Ikeler, Designer & Founder of
Little Arrows
“In essence, the flat era of design has narrowed the constraints but surprisingly expanded our approach towards design. Skeuomorphic design was
not a trend, it was necessary for technology to be adopted. Now that it is,
flat design is another necessary step that will facilitate the exploration of
new design techniques that will take the industry to new heights” /Damian
Madray
If they are right – there’s hardly a way back. The flat revolution will unify
53
the digital world under a single rule. Whatever is different aesthetically
will be judged as an oddity. While all the big brands are switching to flat,
this view might be truer than ever.
Take a look at the 15 best flat design examples and be inspired!

54
SpellTower http://www.spelltower.com/

55
The Smartphone Reinvented Around You http://www.windowsphone.com/

56
Buffalo - Web Development, E-Commerce & Web Design - Brighton UK http://builtbybuffalo.com/

57
TheIssland. We are brand builders. http://www.theissland.com/

58
I think I might - http://ithinkimight.com/

59
Interactive Advent Calendar | It’s a Shape Christmas http://itsashapechristmas.co.uk/

60
TVLcorps Technologies http://www.tvlcorp.com/

61
Invoisse http://invoisse.com/

62
Coloured Lines http://www.colouredlines.com.au/

63
The Ecology Center http://theecologycenter.org/

64
Numbrs - One app. Every bank. https://www.numbrs.com/uk

65
Palace – An exceptional design studio http://palace.co/

66
Video Hosting for Business http://wistia.com/

67
PSD to HTML, WordPress, Drupal, Magento & others – PSD2HTML® http://www.psd2html.com/

68
Playground Inc. http://playgroundinc.com/

69
5. PARALLAX SCROLLING
Parallax scrolling in web design (previously popular in cartoons and video
games) has been around for quite some time. Do you remember RGA’s
website “Nike Better World”? It set the design world on fire. Suddenly
everyone wanted to play with moving backgrounds and in 2013 the trend
is simply obvious. Countless websites mesmerize users with a background
illusion.
The parallax effect is the difference in the apparent position of an object
viewed along different lines of sight. It leads to a certain illusion of 3D and
creates an engaging environment for presenting content.
If it’s not overused it’s a powerful weapon in the hands of a crafty designer.
You can experience that by watching the 15 websites that we’ve chosen.

70
Lets Yep! Create instant meetings with fun people http://letsyep.com/en/

71
Tinké | Take The Tour http://www.zensorium.com/tinke/

72
MoreSleep http://www.moresleep.net/

73
Quechua – Look Book Spring Summer 13 http://www.quechua.com/campaigns/lookbook-spring-summer/

74
Mahédine Yahia Portfolio http://www.mahedineyahia.fr/

75
SHADOW | Community of Dreamers http://www.discovershadow.com/

76
Welcome - LOFT City Church | Richardson, Dallas & beyond http://loftcitychurch.com/

77
Gramercy Park Hotel New York | A NYC boutique hotel http://gramercyparkhotel.com/

78
Sløret – Paper & Paint by Flügger http://www.paperandpaint.dk/

79
Andrew McCarthy - Interactive product designer http://andrevv.com/

80
KILFISH http://www.kilfish.com/v6

81
Pi’s Epic Journey - LIFE OF PI on Digital HD http://journey.lifeofpimovie.com/

82
Andreas Kleiberg http://www.andreaskleiberg.no/

83
Every Last Drop – An Interactive Website about Water Saving http://everylastdrop.co.uk/

84
Madwell | A Tiny Little Giant Agency http://www.madwellnyc.com/

85
6. VIDEO BACKGROUND
HTML5 made it extremely easy to creatively use media on a website. The
method that became particularly popular in 2013 is the video background the trick of setting a large video as the background of a site.
A video background completely changes the visual appearance and adds a
dynamic to the whole experience. While it might be inappropriate for e.g. a
complex eCommerce website (as it might be distractive) it’s great for sites
that are focused on telling the story.
The goal of a video background is twofold: endorsement of the user engagement and creation of an unforgettable, emotional, message.
As you will certainly notice on many of our exemplary websites designers
know what to do to use video background efficiently.
I assume this trend will be even stronger in 2014.

86
HKI™ http://hellohikimori.com/

87
Whiteboard | We empower visionaries to lead meaningful brands. http://whiteboard.is/

88
Joe San Clothing - Worn to be loved http://www.joe-san.com/

89
Sonia by Sonia Rykiel Fall Winter 2013 http://www.soniaby.com/

90
JOBS : le film - le 21 août au cinéma http://www.jobsisfree.com/

91
Trask Industries http://www.trask-industries.com/

92
Brand Toolkit | MojoTech - Providence & New York http://www.mojotech.com/toolkit

93

More Related Content

Viewers also liked (6)

Jims Book Review Web Design Power Point V2
Jims Book Review Web Design Power Point V2Jims Book Review Web Design Power Point V2
Jims Book Review Web Design Power Point V2
 
Introduction to Alfresco
Introduction to AlfrescoIntroduction to Alfresco
Introduction to Alfresco
 
Html5 security
Html5 securityHtml5 security
Html5 security
 
An introduction to Struts 2 and RESTful applications
An introduction to Struts 2 and RESTful applicationsAn introduction to Struts 2 and RESTful applications
An introduction to Struts 2 and RESTful applications
 
Threading in c#
Threading in c#Threading in c#
Threading in c#
 
Ebook2
Ebook2Ebook2
Ebook2
 

More from Asphri457

аудитория интернета
аудитория интернетааудитория интернета
аудитория интернета
Asphri457
 
ICO. МАРКЕТИНГ ПРОЕКТОВ НА СТАДИИ ПРОДАЖИ ТОКЕНОВ
ICO. МАРКЕТИНГ ПРОЕКТОВ НА СТАДИИ ПРОДАЖИ ТОКЕНОВICO. МАРКЕТИНГ ПРОЕКТОВ НА СТАДИИ ПРОДАЖИ ТОКЕНОВ
ICO. МАРКЕТИНГ ПРОЕКТОВ НА СТАДИИ ПРОДАЖИ ТОКЕНОВ
Asphri457
 
Децентрализованная блокчейн рекламная экосистема Papyrus
Децентрализованная блокчейн рекламная экосистема PapyrusДецентрализованная блокчейн рекламная экосистема Papyrus
Децентрализованная блокчейн рекламная экосистема Papyrus
Asphri457
 
gmd2015 Tsuprikov google mobile_081215_app_promo
gmd2015 Tsuprikov google mobile_081215_app_promogmd2015 Tsuprikov google mobile_081215_app_promo
gmd2015 Tsuprikov google mobile_081215_app_promo
Asphri457
 
Gmd2015 mikhail geysherik_mobile_longterm_strategy
Gmd2015 mikhail geysherik_mobile_longterm_strategyGmd2015 mikhail geysherik_mobile_longterm_strategy
Gmd2015 mikhail geysherik_mobile_longterm_strategy
Asphri457
 
Gmd 2015 christian vigne - app promotion - final !!!
Gmd 2015   christian vigne - app promotion - final !!!Gmd 2015   christian vigne - app promotion - final !!!
Gmd 2015 christian vigne - app promotion - final !!!
Asphri457
 
gmd2015 pawel_matkowski_how to track for insights in the data points (web, mw...
gmd2015 pawel_matkowski_how to track for insights in the data points (web, mw...gmd2015 pawel_matkowski_how to track for insights in the data points (web, mw...
gmd2015 pawel_matkowski_how to track for insights in the data points (web, mw...
Asphri457
 
oracle srm refresher training and new functionality including dark posts
oracle srm refresher training and new functionality including dark postsoracle srm refresher training and new functionality including dark posts
oracle srm refresher training and new functionality including dark posts
Asphri457
 

More from Asphri457 (20)

аудитория интернета
аудитория интернетааудитория интернета
аудитория интернета
 
Обзор рынка мессенджеров
Обзор рынка мессенджеровОбзор рынка мессенджеров
Обзор рынка мессенджеров
 
Influencer marketing tutorial_ru
Influencer marketing tutorial_ruInfluencer marketing tutorial_ru
Influencer marketing tutorial_ru
 
Suvorov tseh 2017_final
Suvorov tseh 2017_finalSuvorov tseh 2017_final
Suvorov tseh 2017_final
 
Strategy garnier coloration
Strategy garnier colorationStrategy garnier coloration
Strategy garnier coloration
 
БЛОКЧЕЙН ДЛЯ МАРКЕТИНГА
БЛОКЧЕЙН ДЛЯ МАРКЕТИНГА БЛОКЧЕЙН ДЛЯ МАРКЕТИНГА
БЛОКЧЕЙН ДЛЯ МАРКЕТИНГА
 
ICO. МАРКЕТИНГ ПРОЕКТОВ НА СТАДИИ ПРОДАЖИ ТОКЕНОВ
ICO. МАРКЕТИНГ ПРОЕКТОВ НА СТАДИИ ПРОДАЖИ ТОКЕНОВICO. МАРКЕТИНГ ПРОЕКТОВ НА СТАДИИ ПРОДАЖИ ТОКЕНОВ
ICO. МАРКЕТИНГ ПРОЕКТОВ НА СТАДИИ ПРОДАЖИ ТОКЕНОВ
 
Децентрализованная блокчейн рекламная экосистема Papyrus
Децентрализованная блокчейн рекламная экосистема PapyrusДецентрализованная блокчейн рекламная экосистема Papyrus
Децентрализованная блокчейн рекламная экосистема Papyrus
 
Менеджмент для дизайнеров
Менеджмент для дизайнеровМенеджмент для дизайнеров
Менеджмент для дизайнеров
 
gmd2015 Tsuprikov google mobile_081215_app_promo
gmd2015 Tsuprikov google mobile_081215_app_promogmd2015 Tsuprikov google mobile_081215_app_promo
gmd2015 Tsuprikov google mobile_081215_app_promo
 
Gmd2015 mikhail geysherik_mobile_longterm_strategy
Gmd2015 mikhail geysherik_mobile_longterm_strategyGmd2015 mikhail geysherik_mobile_longterm_strategy
Gmd2015 mikhail geysherik_mobile_longterm_strategy
 
Gmd 2015 yuri berchenko app_m_site
Gmd 2015 yuri berchenko app_m_siteGmd 2015 yuri berchenko app_m_site
Gmd 2015 yuri berchenko app_m_site
 
Gmd 2015 mark bennett
Gmd 2015 mark bennettGmd 2015 mark bennett
Gmd 2015 mark bennett
 
Gmd 2015 ilya fedotov digital_content
Gmd 2015 ilya fedotov digital_contentGmd 2015 ilya fedotov digital_content
Gmd 2015 ilya fedotov digital_content
 
Gmd 2015 dmitri martynov
Gmd 2015 dmitri martynovGmd 2015 dmitri martynov
Gmd 2015 dmitri martynov
 
Gmd 2015 christian vigne - app promotion - final !!!
Gmd 2015   christian vigne - app promotion - final !!!Gmd 2015   christian vigne - app promotion - final !!!
Gmd 2015 christian vigne - app promotion - final !!!
 
Gmd ilya sidorov - mobile app promo
Gmd   ilya sidorov - mobile app promoGmd   ilya sidorov - mobile app promo
Gmd ilya sidorov - mobile app promo
 
gmd2015 pawel_matkowski_how to track for insights in the data points (web, mw...
gmd2015 pawel_matkowski_how to track for insights in the data points (web, mw...gmd2015 pawel_matkowski_how to track for insights in the data points (web, mw...
gmd2015 pawel_matkowski_how to track for insights in the data points (web, mw...
 
gmd 2015 dmitry kuznetsov
gmd 2015 dmitry kuznetsovgmd 2015 dmitry kuznetsov
gmd 2015 dmitry kuznetsov
 
oracle srm refresher training and new functionality including dark posts
oracle srm refresher training and new functionality including dark postsoracle srm refresher training and new functionality including dark posts
oracle srm refresher training and new functionality including dark posts
 

Recently uploaded

Call Girls in Delhi, Escort Service Available 24x7 in Delhi 959961-/-3876
Call Girls in Delhi, Escort Service Available 24x7 in Delhi 959961-/-3876Call Girls in Delhi, Escort Service Available 24x7 in Delhi 959961-/-3876
Call Girls in Delhi, Escort Service Available 24x7 in Delhi 959961-/-3876
dlhescort
 
Call Girls In Majnu Ka Tilla 959961~3876 Shot 2000 Night 8000
Call Girls In Majnu Ka Tilla 959961~3876 Shot 2000 Night 8000Call Girls In Majnu Ka Tilla 959961~3876 Shot 2000 Night 8000
Call Girls In Majnu Ka Tilla 959961~3876 Shot 2000 Night 8000
dlhescort
 
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
dollysharma2066
 
Chandigarh Escorts Service 📞8868886958📞 Just📲 Call Nihal Chandigarh Call Girl...
Chandigarh Escorts Service 📞8868886958📞 Just📲 Call Nihal Chandigarh Call Girl...Chandigarh Escorts Service 📞8868886958📞 Just📲 Call Nihal Chandigarh Call Girl...
Chandigarh Escorts Service 📞8868886958📞 Just📲 Call Nihal Chandigarh Call Girl...
Sheetaleventcompany
 
Call Now ☎️🔝 9332606886🔝 Call Girls ❤ Service In Bhilwara Female Escorts Serv...
Call Now ☎️🔝 9332606886🔝 Call Girls ❤ Service In Bhilwara Female Escorts Serv...Call Now ☎️🔝 9332606886🔝 Call Girls ❤ Service In Bhilwara Female Escorts Serv...
Call Now ☎️🔝 9332606886🔝 Call Girls ❤ Service In Bhilwara Female Escorts Serv...
Anamikakaur10
 
Call Girls Electronic City Just Call 👗 7737669865 👗 Top Class Call Girl Servi...
Call Girls Electronic City Just Call 👗 7737669865 👗 Top Class Call Girl Servi...Call Girls Electronic City Just Call 👗 7737669865 👗 Top Class Call Girl Servi...
Call Girls Electronic City Just Call 👗 7737669865 👗 Top Class Call Girl Servi...
amitlee9823
 
The Abortion pills for sale in Qatar@Doha [+27737758557] []Deira Dubai Kuwait
The Abortion pills for sale in Qatar@Doha [+27737758557] []Deira Dubai KuwaitThe Abortion pills for sale in Qatar@Doha [+27737758557] []Deira Dubai Kuwait
The Abortion pills for sale in Qatar@Doha [+27737758557] []Deira Dubai Kuwait
daisycvs
 

Recently uploaded (20)

RSA Conference Exhibitor List 2024 - Exhibitors Data
RSA Conference Exhibitor List 2024 - Exhibitors DataRSA Conference Exhibitor List 2024 - Exhibitors Data
RSA Conference Exhibitor List 2024 - Exhibitors Data
 
PHX May 2024 Corporate Presentation Final
PHX May 2024 Corporate Presentation FinalPHX May 2024 Corporate Presentation Final
PHX May 2024 Corporate Presentation Final
 
Call Girls in Delhi, Escort Service Available 24x7 in Delhi 959961-/-3876
Call Girls in Delhi, Escort Service Available 24x7 in Delhi 959961-/-3876Call Girls in Delhi, Escort Service Available 24x7 in Delhi 959961-/-3876
Call Girls in Delhi, Escort Service Available 24x7 in Delhi 959961-/-3876
 
Call Girls Service In Old Town Dubai ((0551707352)) Old Town Dubai Call Girl ...
Call Girls Service In Old Town Dubai ((0551707352)) Old Town Dubai Call Girl ...Call Girls Service In Old Town Dubai ((0551707352)) Old Town Dubai Call Girl ...
Call Girls Service In Old Town Dubai ((0551707352)) Old Town Dubai Call Girl ...
 
Call Girls In Majnu Ka Tilla 959961~3876 Shot 2000 Night 8000
Call Girls In Majnu Ka Tilla 959961~3876 Shot 2000 Night 8000Call Girls In Majnu Ka Tilla 959961~3876 Shot 2000 Night 8000
Call Girls In Majnu Ka Tilla 959961~3876 Shot 2000 Night 8000
 
SEO Case Study: How I Increased SEO Traffic & Ranking by 50-60% in 6 Months
SEO Case Study: How I Increased SEO Traffic & Ranking by 50-60%  in 6 MonthsSEO Case Study: How I Increased SEO Traffic & Ranking by 50-60%  in 6 Months
SEO Case Study: How I Increased SEO Traffic & Ranking by 50-60% in 6 Months
 
Malegaon Call Girls Service ☎ ️82500–77686 ☎️ Enjoy 24/7 Escort Service
Malegaon Call Girls Service ☎ ️82500–77686 ☎️ Enjoy 24/7 Escort ServiceMalegaon Call Girls Service ☎ ️82500–77686 ☎️ Enjoy 24/7 Escort Service
Malegaon Call Girls Service ☎ ️82500–77686 ☎️ Enjoy 24/7 Escort Service
 
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
 
Katrina Personal Brand Project and portfolio 1
Katrina Personal Brand Project and portfolio 1Katrina Personal Brand Project and portfolio 1
Katrina Personal Brand Project and portfolio 1
 
Chandigarh Escorts Service 📞8868886958📞 Just📲 Call Nihal Chandigarh Call Girl...
Chandigarh Escorts Service 📞8868886958📞 Just📲 Call Nihal Chandigarh Call Girl...Chandigarh Escorts Service 📞8868886958📞 Just📲 Call Nihal Chandigarh Call Girl...
Chandigarh Escorts Service 📞8868886958📞 Just📲 Call Nihal Chandigarh Call Girl...
 
Call Now ☎️🔝 9332606886🔝 Call Girls ❤ Service In Bhilwara Female Escorts Serv...
Call Now ☎️🔝 9332606886🔝 Call Girls ❤ Service In Bhilwara Female Escorts Serv...Call Now ☎️🔝 9332606886🔝 Call Girls ❤ Service In Bhilwara Female Escorts Serv...
Call Now ☎️🔝 9332606886🔝 Call Girls ❤ Service In Bhilwara Female Escorts Serv...
 
Call Girls Zirakpur👧 Book Now📱7837612180 📞👉Call Girl Service In Zirakpur No A...
Call Girls Zirakpur👧 Book Now📱7837612180 📞👉Call Girl Service In Zirakpur No A...Call Girls Zirakpur👧 Book Now📱7837612180 📞👉Call Girl Service In Zirakpur No A...
Call Girls Zirakpur👧 Book Now📱7837612180 📞👉Call Girl Service In Zirakpur No A...
 
Call Girls Ludhiana Just Call 98765-12871 Top Class Call Girl Service Available
Call Girls Ludhiana Just Call 98765-12871 Top Class Call Girl Service AvailableCall Girls Ludhiana Just Call 98765-12871 Top Class Call Girl Service Available
Call Girls Ludhiana Just Call 98765-12871 Top Class Call Girl Service Available
 
Famous Olympic Siblings from the 21st Century
Famous Olympic Siblings from the 21st CenturyFamous Olympic Siblings from the 21st Century
Famous Olympic Siblings from the 21st Century
 
Mysore Call Girls 8617370543 WhatsApp Number 24x7 Best Services
Mysore Call Girls 8617370543 WhatsApp Number 24x7 Best ServicesMysore Call Girls 8617370543 WhatsApp Number 24x7 Best Services
Mysore Call Girls 8617370543 WhatsApp Number 24x7 Best Services
 
Cracking the Cultural Competence Code.pptx
Cracking the Cultural Competence Code.pptxCracking the Cultural Competence Code.pptx
Cracking the Cultural Competence Code.pptx
 
(Anamika) VIP Call Girls Napur Call Now 8617697112 Napur Escorts 24x7
(Anamika) VIP Call Girls Napur Call Now 8617697112 Napur Escorts 24x7(Anamika) VIP Call Girls Napur Call Now 8617697112 Napur Escorts 24x7
(Anamika) VIP Call Girls Napur Call Now 8617697112 Napur Escorts 24x7
 
Call Girls Electronic City Just Call 👗 7737669865 👗 Top Class Call Girl Servi...
Call Girls Electronic City Just Call 👗 7737669865 👗 Top Class Call Girl Servi...Call Girls Electronic City Just Call 👗 7737669865 👗 Top Class Call Girl Servi...
Call Girls Electronic City Just Call 👗 7737669865 👗 Top Class Call Girl Servi...
 
Falcon Invoice Discounting: The best investment platform in india for investors
Falcon Invoice Discounting: The best investment platform in india for investorsFalcon Invoice Discounting: The best investment platform in india for investors
Falcon Invoice Discounting: The best investment platform in india for investors
 
The Abortion pills for sale in Qatar@Doha [+27737758557] []Deira Dubai Kuwait
The Abortion pills for sale in Qatar@Doha [+27737758557] []Deira Dubai KuwaitThe Abortion pills for sale in Qatar@Doha [+27737758557] []Deira Dubai Kuwait
The Abortion pills for sale in Qatar@Doha [+27737758557] []Deira Dubai Kuwait
 

Web design book_of_trends_2013-2014part_001

  • 1.
  • 2. WEB DESIGN BOOK OF TRENDS 2013-2014 Marcin Treder, Robert Warych and Sebastian Witman
  • 3. Preface Design is the mirror of culture. Changes in society, technology and art are always reflected in the current state of design. Designers are stretching the limits of matter and self expression in the constant endeavor to build something meaningful. This effort cannot be separated from the world - the ultimate source of design inspiration. Web Design is by far the most dynamic member of the design family. Trends come and go quickly. Each year, though, seems to be more mature and the progress is easily visible. In recent years we went through a massive interest in skeuomorphism, a robust usage of large typography, vintage websites, hand written fonts, wood patterns, big headers, enormous footers, etc. Today, design is different. Users are finally in the center of the process and 3
  • 4. you can literally feel this while browsing through the web. Content never mattered more. The adaptation of websites to different screen sizes has become a standard. The visual side of web design leans towards simplicity and balance. Web Design has never been more mature and sane. And yes, though the madness of flash has died, we can still witness a lot of craziness. Designers are stretching the limits of technology with Web GL, very popular video backgrounds and twisted variations of web navigation. Without experiments, though, there would be no progress. Progress couldn’t exist without constant learning from each other as well. That’s why we’ve decided to analyze thousands of websites to look for the trends that are repeated by the best designers. We’ve found very popular patterns in 2013 and emerging trends that most probably will be very popular in 2014. We’ve singled out 11 trends and chosen 15 amazing examples for each one. Trend no. 12 was forced on designers by the EU - the infamous “cookie warnings” that flooded the web come with 4 examples (more would be simply boring). We’re hoping that this collection will fill you with inspiration and reflection on the direction web design is heading in. Have fun! 4
  • 5. 1. THE ERA OF CONTENT “Content is King” said Bill Gates back in 1996 and we waited quite a long time to fully feel the wisdom of these words in web design. Today, finally, web design has become content-centric. Great text, amazing photographs and videos are the center of the modern website. The content rises above the layout and ornaments, or in other words - design creates the context for content. Visitors don’t come to our website to admire the layout and overall design. Visitors come to a website to achieve their goals. In most cases content is the road to the goal and it has to be clear. The layout and design of the website attract visitors but it works only when you have relevant, useful and catchy content. The 15 websites that we’ve chosen represent magnificent abilities to present content in an engaging way. Enjoy! 5
  • 6. 1948 London | 1948 London http://www.1948london.com/ 6
  • 7. Agence Web et Communication Culturelle | Kahuna Webstudio http://www.kahuna-webstudio.fr/ 7
  • 8. D’Angelico Guitars | A Legend is Reborn http://dangelicoguitars.com/ 8
  • 9. TED-Ed | Clubs http://ed.ted.com/ 9
  • 10. Find Your Way to Oz | Disney’s Oz The Great and Powerful http://www.findyourwaytooz.com/ 10
  • 11. TCM Summer Under the Stars 2013 http://summer.tcm.com/ 11
  • 12. Le Tour de France - 100 ans de Tour http://100ansdetour.fr/ 12
  • 15. GOOD | Ideas and Tools for Progress http://www.good.is/ 15
  • 16. This is true. http://www.truedigital.co.uk/ 16
  • 18. National Academy Museum http://www.nationalacademy.org/ 18
  • 20. Magazine mode : Glamour http://www.glamourparis.com/ 20
  • 21. 2. STORYTELLING Storytelling is a powerful method of communication. In The Psychological Power of Storytelling, author Pamela Brown Rutledge says “when organizations, causes, brands or individuals identify and develop a core story, they create and display authentic meaning and purpose that others can believe, participate in, and share.” Storytelling is the road to efficient web communication and in 2013 designers seem to have finally grasped this concept. The fact that storytelling is used not only by major brands to tell their stories, but also by non-profits to create an emotional response to important problems is all worth respect. After all persuasion is a big part of this design idea and nobody said it cannot be used for a good cause. In 2013 designers mastered storytelling and I’m pretty sure it will be a major trend in 2014. This is the kind of fashion we’d love to be ruled by, isn’t it? Brace yourself. You’ll be amazed by our 15 best storytelling websites on the next pages. 21
  • 23. Browser Awareness Day http://www.browserawarenessday.com/ 23
  • 25. How Far is it to Mars? http://www.distancetomars.com/ 25
  • 26. mediaBOOM | Web Design CT | Award Winning Web Development CT http://mediaboom.com/ 26
  • 28. The Power Inside http://www.insidefilms.com/en/ 28
  • 29. Snipcart | Effortless Shopping Cart for new or existing websites using any CMS https://snipcart.com/ 29
  • 30. Black In History http://blackinhistory.tumblr.com/ 30
  • 32. Inception Explained - An interactive animated infographic http://www.inception-explained.com/ 32
  • 33. You Waste A Lot Of Time At Work https://www.atlassian.com/time-wasting-at-work-infographic 33
  • 34. These Are Things - Home of the Modern World Map http://www.thesearethings.com/ 34
  • 37. 3. RESPONSIVE WEBSITES Three years have passed since Ethan Marcotte coined the term “Responsive Web Design”. Once a revolutionary fresh idea, has in the year 2013 been transformed into a commodity. Responsive Web Design (RWD) is not a mere trend anymore, it’s the reality of design expression. I’d even go so far as to say that responsive web design will soon be as obvious as the separation of css and html for semantic reasons. It’s not a question of whether to use it or not. It’s a question of whether you can implement it properly. We live in the post pc era. Mobile devices (and soon wearable computers) are growing in importance and today we have no other choice than to accept the fact that our websites need to provide an exceptional experience for different screen resolutions. In 2013 25% of the Internet traffic will come from Smartphones and Tablets. More than 25% of TVs sold in 2012 were Smart TVs with Internet connectivity. Only responsive web design will let you easily serve all these devices and their owners 37
  • 39. Café Evoke // Coffee, Wine, Beer, Eats, and Catering in Edmond & Oklahoma City http://cafeevoke.com/ 39
  • 41. Breaking News, Analysis, Politics, Blogs, News Photos, Video - TIME.com http://www.time.com/time/ 41
  • 42. This Is Responsive http://bradfrost.github.io/this-is-responsive/ 42
  • 43. Skinny Ties | Nothing but skinny ties. http://skinnyties.com/ 43
  • 44. Custom Suits & Mens Suits | Indochino http://www.indochino.com/ 44
  • 46. Five Simple Steps http://www.fivesimplesteps.com/ 46
  • 47. Justin Aguilar - Designer http://www.justinaguilar.com/ 47
  • 48. Teehan+Lax - Defining Experience http://www.teehanlax.com/ 48
  • 49. MRY | A creative and technology agency that makes brands remarkable http://mry.com/en/ 49
  • 50. Welcome to BEAM http://www.beamland.com/ 50
  • 51. Build a Website — Squarespace http://www.squarespace.com/stories/ 51
  • 52. HubSpot | All-in-one Inbound Marketing Software http://www.hubspot.com/ 52
  • 53. 4. FLAT DESIGN To say that “Flat design is extremely popular” is to say nothing. Flat design took over the design world. Microsoft (since 2010), Google and Apple (iOS7) adapted flat design to some extent and thousands of designers followed. 2013 was the year of flat design and 2014 won’t be any different. Flat design will stay with us for a long time. Some designers, though, tend to see it as the beginning of the revolution: “I believe that the flat design trend is a symptom of growing maturity in the field of web and interface design. This maturity applies to our designers – who are getting better at making interfaces that encourage interactivity and engagement – as well as to our users.” /Marci Ikeler, Designer & Founder of Little Arrows “In essence, the flat era of design has narrowed the constraints but surprisingly expanded our approach towards design. Skeuomorphic design was not a trend, it was necessary for technology to be adopted. Now that it is, flat design is another necessary step that will facilitate the exploration of new design techniques that will take the industry to new heights” /Damian Madray If they are right – there’s hardly a way back. The flat revolution will unify 53
  • 54. the digital world under a single rule. Whatever is different aesthetically will be judged as an oddity. While all the big brands are switching to flat, this view might be truer than ever. Take a look at the 15 best flat design examples and be inspired! 54
  • 56. The Smartphone Reinvented Around You http://www.windowsphone.com/ 56
  • 57. Buffalo - Web Development, E-Commerce & Web Design - Brighton UK http://builtbybuffalo.com/ 57
  • 58. TheIssland. We are brand builders. http://www.theissland.com/ 58
  • 59. I think I might - http://ithinkimight.com/ 59
  • 60. Interactive Advent Calendar | It’s a Shape Christmas http://itsashapechristmas.co.uk/ 60
  • 64. The Ecology Center http://theecologycenter.org/ 64
  • 65. Numbrs - One app. Every bank. https://www.numbrs.com/uk 65
  • 66. Palace – An exceptional design studio http://palace.co/ 66
  • 67. Video Hosting for Business http://wistia.com/ 67
  • 68. PSD to HTML, WordPress, Drupal, Magento & others – PSD2HTML® http://www.psd2html.com/ 68
  • 70. 5. PARALLAX SCROLLING Parallax scrolling in web design (previously popular in cartoons and video games) has been around for quite some time. Do you remember RGA’s website “Nike Better World”? It set the design world on fire. Suddenly everyone wanted to play with moving backgrounds and in 2013 the trend is simply obvious. Countless websites mesmerize users with a background illusion. The parallax effect is the difference in the apparent position of an object viewed along different lines of sight. It leads to a certain illusion of 3D and creates an engaging environment for presenting content. If it’s not overused it’s a powerful weapon in the hands of a crafty designer. You can experience that by watching the 15 websites that we’ve chosen. 70
  • 71. Lets Yep! Create instant meetings with fun people http://letsyep.com/en/ 71
  • 72. Tinké | Take The Tour http://www.zensorium.com/tinke/ 72
  • 74. Quechua – Look Book Spring Summer 13 http://www.quechua.com/campaigns/lookbook-spring-summer/ 74
  • 75. Mahédine Yahia Portfolio http://www.mahedineyahia.fr/ 75
  • 76. SHADOW | Community of Dreamers http://www.discovershadow.com/ 76
  • 77. Welcome - LOFT City Church | Richardson, Dallas & beyond http://loftcitychurch.com/ 77
  • 78. Gramercy Park Hotel New York | A NYC boutique hotel http://gramercyparkhotel.com/ 78
  • 79. Sløret – Paper & Paint by Flügger http://www.paperandpaint.dk/ 79
  • 80. Andrew McCarthy - Interactive product designer http://andrevv.com/ 80
  • 82. Pi’s Epic Journey - LIFE OF PI on Digital HD http://journey.lifeofpimovie.com/ 82
  • 84. Every Last Drop – An Interactive Website about Water Saving http://everylastdrop.co.uk/ 84
  • 85. Madwell | A Tiny Little Giant Agency http://www.madwellnyc.com/ 85
  • 86. 6. VIDEO BACKGROUND HTML5 made it extremely easy to creatively use media on a website. The method that became particularly popular in 2013 is the video background the trick of setting a large video as the background of a site. A video background completely changes the visual appearance and adds a dynamic to the whole experience. While it might be inappropriate for e.g. a complex eCommerce website (as it might be distractive) it’s great for sites that are focused on telling the story. The goal of a video background is twofold: endorsement of the user engagement and creation of an unforgettable, emotional, message. As you will certainly notice on many of our exemplary websites designers know what to do to use video background efficiently. I assume this trend will be even stronger in 2014. 86
  • 88. Whiteboard | We empower visionaries to lead meaningful brands. http://whiteboard.is/ 88
  • 89. Joe San Clothing - Worn to be loved http://www.joe-san.com/ 89
  • 90. Sonia by Sonia Rykiel Fall Winter 2013 http://www.soniaby.com/ 90
  • 91. JOBS : le film - le 21 août au cinéma http://www.jobsisfree.com/ 91
  • 93. Brand Toolkit | MojoTech - Providence & New York http://www.mojotech.com/toolkit 93