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...
4
you can literally feel this while browsing through the web. Content never
mattered more. The adaptation of websites to d...
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 w...
61948 London | 1948 London http://www.1948london.com/
7Agence Web et Communication Culturelle | Kahuna Webstudio http://www.kahuna-webstudio.fr/
8D’Angelico Guitars | A Legend is Reborn http://dangelicoguitars.com/
9TED-Ed | Clubs http://ed.ted.com/
10Find Your Way to Oz | Disney’s Oz The Great and Powerful http://www.findyourwaytooz.com/
11TCM Summer Under the Stars 2013 http://summer.tcm.com/
12Le Tour de France - 100 ans de Tour http://100ansdetour.fr/
13Polygon http://www.polygon.com/
14BBC http://www.bbc.co.uk/
15GOOD | Ideas and Tools for Progress http://www.good.is/
16This is true. http://www.truedigital.co.uk/
17The Verge http://www.theverge.com/
18National Academy Museum http://www.nationalacademy.org/
19GSF2013 https://www.googlesciencefair.com/
20Magazine mode : Glamour http://www.glamourparis.com/
21
2. STORYTELLING
Storytelling is a powerful method of communication. In The Psychological
Power of Storytelling, author ...
22Dadaab Stories http://www.dadaabstories.org/
23Browser Awareness Day http://www.browserawarenessday.com/
24NASA: Prospect http://nasaprospect.com/
25How Far is it to Mars? http://www.distancetomars.com/
26mediaBOOM | Web Design CT | Award Winning Web Development CT http://mediaboom.com/
27Orange history http://orange.com/sirius/histoire/en/
28The Power Inside http://www.insidefilms.com/en/
29Snipcart | Effortless Shopping Cart for new or existing websites using any CMS https://snipcart.com/
30Black In History http://blackinhistory.tumblr.com/
31Your Tour http://yourtour.withgoogle.com/
32Inception Explained - An interactive animated infographic http://www.inception-explained.com/
33You Waste A Lot Of Time At Work https://www.atlassian.com/time-wasting-at-work-infographic
34These Are Things - Home of the Modern World Map http://www.thesearethings.com/
35Reverend Danger http://www.reverenddanger.com/
36Black Ram http://www.blackramwhisky.com/
37
3. RESPONSIVE WEBSITES
Three years have passed since Ethan Marcotte coined the term “Responsive
Web Design”. Once a rev...
38Northbound Design™ http://www.northbounddesign.com/
39Café Evoke // Coffee, Wine, Beer, Eats, and Catering in Edmond & Oklahoma City http://cafeevoke.com/
40Trent Walton http://trentwalton.com/
41Breaking News, Analysis, Politics, Blogs, News Photos, Video - TIME.com http://www.time.com/time/
42This Is Responsive http://bradfrost.github.io/this-is-responsive/
43Skinny Ties | Nothing but skinny ties. http://skinnyties.com/
44Custom Suits & Mens Suits | Indochino http://www.indochino.com/
45United Pixelworkers http://www.unitedpixelworkers.com/
46Five Simple Steps http://www.fivesimplesteps.com/
47Justin Aguilar - Designer http://www.justinaguilar.com/
48Teehan+Lax - Defining Experience http://www.teehanlax.com/
49MRY | A creative and technology agency that makes brands remarkable http://mry.com/en/
50Welcome to BEAM http://www.beamland.com/
51Build a Website — Squarespace http://www.squarespace.com/stories/
52HubSpot | All-in-one Inbound Marketing Software http://www.hubspot.com/
53
4. FLAT DESIGN
To say that “Flat design is extremely popular” is to say nothing. Flat
design took over the design world...
54
the digital world under a single rule. Whatever is different aesthetically
will be judged as an oddity. While all the bi...
55SpellTower http://www.spelltower.com/
56The Smartphone Reinvented Around You http://www.windowsphone.com/
57Buffalo - Web Development, E-Commerce & Web Design - Brighton UK http://builtbybuffalo.com/
58TheIssland. We are brand builders. http://www.theissland.com/
59I think I might - http://ithinkimight.com/
60Interactive Advent Calendar | It’s a Shape Christmas http://itsashapechristmas.co.uk/
61TVLcorps Technologies http://www.tvlcorp.com/
62Invoisse http://invoisse.com/
63Coloured Lines http://www.colouredlines.com.au/
64The Ecology Center http://theecologycenter.org/
65Numbrs - One app. Every bank. https://www.numbrs.com/uk
66Palace – An exceptional design studio http://palace.co/
67Video Hosting for Business http://wistia.com/
68PSD to HTML, WordPress, Drupal, Magento & others – PSD2HTML® http://www.psd2html.com/
69Playground Inc. http://playgroundinc.com/
70
5. PARALLAX SCROLLING
Parallax scrolling in web design (previously popular in cartoons and video
games) has been around...
71Lets Yep! Create instant meetings with fun people http://letsyep.com/en/
72Tinké | Take The Tour http://www.zensorium.com/tinke/
73MoreSleep http://www.moresleep.net/
74Quechua – Look Book Spring Summer 13 http://www.quechua.com/campaigns/lookbook-spring-summer/
75Mahédine Yahia Portfolio http://www.mahedineyahia.fr/
76SHADOW | Community of Dreamers http://www.discovershadow.com/
77Welcome - LOFT City Church | Richardson, Dallas & beyond http://loftcitychurch.com/
78Gramercy Park Hotel New York | A NYC boutique hotel http://gramercyparkhotel.com/
79Sløret – Paper & Paint by Flügger http://www.paperandpaint.dk/
80Andrew McCarthy - Interactive product designer http://andrevv.com/
81KILFISH http://www.kilfish.com/v6
82Pi’s Epic Journey - LIFE OF PI on Digital HD http://journey.lifeofpimovie.com/
83Andreas Kleiberg http://www.andreaskleiberg.no/
84Every Last Drop – An Interactive Website about Water Saving http://everylastdrop.co.uk/
85Madwell | A Tiny Little Giant Agency http://www.madwellnyc.com/
86
6. VIDEO BACKGROUND
HTML5 made it extremely easy to creatively use media on a website. The
method that became particula...
87HKI™ http://hellohikimori.com/
88Whiteboard | We empower visionaries to lead meaningful brands. http://whiteboard.is/
89Joe San Clothing - Worn to be loved http://www.joe-san.com/
90Sonia by Sonia Rykiel Fall Winter 2013 http://www.soniaby.com/
91JOBS : le film - le 21 août au cinéma http://www.jobsisfree.com/
92Trask Industries http://www.trask-industries.com/
93Brand Toolkit | MojoTech - Providence & New York http://www.mojotech.com/toolkit
94Langtidsmodnet.no http://langtidsmodnet.no/
95Tool of North America http://www.toolofna.com/
96L’attrape rêve | Galerie – Ateliers – Artstore http://www.lattrapereve.fr/
97Staring = Caring http://staringiscaring.nl/
98W Eyewear http://www.weyewear.com/
99Prettybird http://www.prettybirdus.com/
100sketchin - evolutive experience design http://www.sketchin.ch/
101Precision is my Inspiration by RAYMOND WEIL Genève http://inspiration.raymond-weil.com/
102
7. NON-STANDARD NAVIGATION
Navigation is among the most important pieces of every single website.
No content would be ...
103Vespillo le film http://www.vespillo-lefilm.com/
104Cascade Brewery Co – Brew by Feel http://www.cascadebreweryco.com.au/
105adidas Group Retail Careers http://www.adidasretailjobs.com/
106H6 http://beoplay.com/Products/BeoplayH6
107CO3, la science dans ton chez toi ! CO3.lemouv.fr http://co3.lemouv.fr/
108Diesel Home Collection http://www.diesel.com/collection-diesel-home
109Nerval / Pierre Georges, interaction designer. http://nerval.ch/
110Interactive Ear tool showing how the ear works by Amplifon http://www.amplifon.co.uk/interactive-ear/
111LE ROCKWOOD - ROCK WITH US http://www.lerockwood.com/
112Experience Designers | Online Department http://onlinedepartment.nl/
113World Baking Day - 19th May 2013 http://worldbakingday.com/
114Design Embraced - Anthony Goodwin http://www.designembraced.com/
115Hot Dot http://hotdot.pro/
116Oakley Airbrake MX // A Revolution In Impact Protection http://moto.oakley.com/
117ELI http://weareeli.dk/
118
8. FIXED NAVIGATION
Setting a position fixed for the navigation bar isn’t something new. It’s
doable since CSS2 introdu...
119DesignTAXI - Driving you to bright ideas for the past 10 years http://designtaxi.com/
120theoriginalclassybroad.com http://theoriginalclassybroad.com/
121UXPin - Blog http://blog.uxpin.com/
122The Secret Handshake - Solutions to help you go pro http://learnthesecrethandshake.com/
123Derek Boateng http://derekboateng.com/
124LOOP. Wonderful digital things. http://www.agentur-loop.com/
125The Kings of Summer, Now Playing in Select Cities http://thekingsofsummermovie.com/
126Octave & Octave recrute 5 talents enthousiastes http://www.octaveoctave.com/jobs
127Carlos Molina http://yolive.me/
128Interactive design studio | Lyon | REZO ZERO http://www.rezo-zero.com/
129Adam Rudzki - Graphic Designer & Art Director http://adamrudzki.com/
130ONY AGENCY http://en.ony.ru/
131Iedereen DubbelFrisss http://www.dubbelfrisss.nl/
132Case 3D http://www.case-3d.com/
133Carrera - Racing Since 1956 http://carreraworld.com/
134
9. METRO GRID
The Metro UI name has been officially buried because of a possible trade-
mark dispute. Microsoft offered “...
135Kitchen http://www.kitchenprague.com/
136UGSMAG http://ugsmag.com/
137Web Apps, Web Technology Trends, Social Networking and Social Media – ReadWrite http://readwrite.com/
138The Gadget Flow | Cool gadgets - Gadget gift ideas - Home gadgets http://thegadgetflow.com/
139Juliana Bicycles | The Original Women’s Mountain Bike http://www.julianabicycles.com/
140Mustafa Demirkent :: Portfolio Website http://mustafademirkent.com/
141Pulco - La vie à la Fresh ! http://laviealafresh.com/
142Ale De Carvalho / Art Direction http://a-d-c.net/
143Control Films - Production Company in Paris http://controlfilms.tv/
144Escape Flight http://escapeflight.com/
145We make apps | Etch http://etchapps.com/
146VISIT | University of Coimbra http://visit.uc.pt/en/
147Hommard Cashmere Sweaters and more http://hommard.com/
148Hommard Cashmere Sweaters and more http://hommard.com/
149MVA - SPACE SHOWER MUSIC VIDEO AWARDS http://mva.jp/
150
10. MIX-AND-MATCH TYPOGRAPHY
2013 popularized a typography style that we previously knew rather from
fancy t-shirts th...
151Forefathers Group | The New Design Frontier http://forefathersgroup.com/
152Ermenegildo Zegna official website http://www.zegna.com/
153Welcome to the Skybox | Conceptual Design | http://www.skybox.org/
154Chris Wilhite | Chris Wilhite Design http://chriswilhitedesign.com/
155Timmy Tompkins’ Awesome Fantasy Comic Book Superhero Adventure http://timmytompkinsapp.com/
156BTL Brands - Do Better http://www.btlbrands.com/
157Fontwalk http://fontstage.de/
158Jacksonville Art Walk | I Love Art Walk http://jacksonvilleartwalk.com/
159Wicked Palate - Burnsville, MN http://archive.coryetzkorn.com/wicked-palate/
160The Production Kitchen http://www.jacquico.com/
161Introducing CIRQ. Kosta Browne winemaker, Michael Browne. http://cirq.com/
162Cast Iron Design Company | A Boulder Colorado Graphic Design Studio http://www.castirondesign.com/
163Barrelhouse Flat http://thebarrelhouseflat.com/
164Wild Blue http://wildbluetech.com/
165Al Taglio | Pizza au poids et à la coupe http://www.altaglio.fr/
166
11. CLARITY AND SIMPLICITY
Clarity and Simplicity are always in fashion. In 2013 however this became a
major trend. Co...
167B-Reel http://www.b-reel.com/
168Haraldur Thorleifsson http://haraldurthorleifsson.com/
169Carolina Herrera’s “The House” http://www.carolinaherrera.com/the-house/en/
170Grafik. Web Design + Development. Wellington, New Zealand http://grafik.co.nz/
171Windows of New York | A weekly illustrated atlas http://www.windowsofnewyork.com/
172Harry’s - Great Shave. Fair Price. Simple. http://www.harrys.com/
173Rdio http://www.rdio.com/
174Spektrum Media http://spektrummedia.com/
175Borgo 27 http://www.borgo27.it/
176Eduardo Nunes – Cross-Media Designer http://www.eduardonunes.me/
177Cédric Marteau Portfolio, Developer front end & UX Designer http://www.cedricmarteau.com/
178Rosebud http://www.rosebud-ad.com/
179AÃRK Collective http://aarkcollective.com/
180Shun Cutlery http://shun.kaiusaltd.com/
181Substrakt - Branding, Print, Design, Digital Web & Mobile. Birmingham & London http://substrakt.co.uk/
182
12. COOKIES WARNINGS
The European Union gave designers a huge headache in 2013. Cookie warn-
ings are now obligatory f...
183Home - this is true. http://www.truedigital.co.uk/
184Lexus Cars Europe | Hybrid Cars | New and Used Lexus Cars http://www.lexus.eu/index.tmex
185Satorisan - Live By The Walk http://satorisan.com/en/home
186
Conclusion
2013 is the year of smart, aesthetic and simple design. 2014 will be no
different. Responsive web design wil...
187
Everything in the design is meant to serve its general purpose. Don’t get
caught in the trap of unnecessary movement i...
Web Design Book of Trend 2013 - 2014
Upcoming SlideShare
Loading in...5
×

Web Design Book of Trend 2013 - 2014

707

Published on

Web Design Book of Trend 2013 - 2014

Published in: Design, Business, Technology
2 Comments
3 Likes
Statistics
Notes
  • So impressive web design book Jessie Doan :)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • In order to make a web application to be more attractive and catchy, there should be a strong and effective. So this presentation enables the user to extract all the beneficiaries about the contemporary design techniques and tools.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
707
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
38
Comments
2
Likes
3
Embeds 0
No embeds

No notes for slide

Web Design Book of Trend 2013 - 2014

  1. 1. WEB DESIGN BOOK OF TRENDS 2013-2014 Marcin Treder, Robert Warych and Sebastian Witman
  2. 2. 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 ro- bust 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. 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 popu- lar 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. 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. 5. 61948 London | 1948 London http://www.1948london.com/
  6. 6. 7Agence Web et Communication Culturelle | Kahuna Webstudio http://www.kahuna-webstudio.fr/
  7. 7. 8D’Angelico Guitars | A Legend is Reborn http://dangelicoguitars.com/
  8. 8. 9TED-Ed | Clubs http://ed.ted.com/
  9. 9. 10Find Your Way to Oz | Disney’s Oz The Great and Powerful http://www.findyourwaytooz.com/
  10. 10. 11TCM Summer Under the Stars 2013 http://summer.tcm.com/
  11. 11. 12Le Tour de France - 100 ans de Tour http://100ansdetour.fr/
  12. 12. 13Polygon http://www.polygon.com/
  13. 13. 14BBC http://www.bbc.co.uk/
  14. 14. 15GOOD | Ideas and Tools for Progress http://www.good.is/
  15. 15. 16This is true. http://www.truedigital.co.uk/
  16. 16. 17The Verge http://www.theverge.com/
  17. 17. 18National Academy Museum http://www.nationalacademy.org/
  18. 18. 19GSF2013 https://www.googlesciencefair.com/
  19. 19. 20Magazine mode : Glamour http://www.glamourparis.com/
  20. 20. 21 2. STORYTELLING Storytelling is a powerful method of communication. In The Psychological Power of Storytelling, author Pamela Brown Rutledge says “when organiza- tions, 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 communi- cation 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 sto- ries, 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. 21. 22Dadaab Stories http://www.dadaabstories.org/
  22. 22. 23Browser Awareness Day http://www.browserawarenessday.com/
  23. 23. 24NASA: Prospect http://nasaprospect.com/
  24. 24. 25How Far is it to Mars? http://www.distancetomars.com/
  25. 25. 26mediaBOOM | Web Design CT | Award Winning Web Development CT http://mediaboom.com/
  26. 26. 27Orange history http://orange.com/sirius/histoire/en/
  27. 27. 28The Power Inside http://www.insidefilms.com/en/
  28. 28. 29Snipcart | Effortless Shopping Cart for new or existing websites using any CMS https://snipcart.com/
  29. 29. 30Black In History http://blackinhistory.tumblr.com/
  30. 30. 31Your Tour http://yourtour.withgoogle.com/
  31. 31. 32Inception Explained - An interactive animated infographic http://www.inception-explained.com/
  32. 32. 33You Waste A Lot Of Time At Work https://www.atlassian.com/time-wasting-at-work-infographic
  33. 33. 34These Are Things - Home of the Modern World Map http://www.thesearethings.com/
  34. 34. 35Reverend Danger http://www.reverenddanger.com/
  35. 35. 36Black Ram http://www.blackramwhisky.com/
  36. 36. 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. 37. 38Northbound Design™ http://www.northbounddesign.com/
  38. 38. 39Café Evoke // Coffee, Wine, Beer, Eats, and Catering in Edmond & Oklahoma City http://cafeevoke.com/
  39. 39. 40Trent Walton http://trentwalton.com/
  40. 40. 41Breaking News, Analysis, Politics, Blogs, News Photos, Video - TIME.com http://www.time.com/time/
  41. 41. 42This Is Responsive http://bradfrost.github.io/this-is-responsive/
  42. 42. 43Skinny Ties | Nothing but skinny ties. http://skinnyties.com/
  43. 43. 44Custom Suits & Mens Suits | Indochino http://www.indochino.com/
  44. 44. 45United Pixelworkers http://www.unitedpixelworkers.com/
  45. 45. 46Five Simple Steps http://www.fivesimplesteps.com/
  46. 46. 47Justin Aguilar - Designer http://www.justinaguilar.com/
  47. 47. 48Teehan+Lax - Defining Experience http://www.teehanlax.com/
  48. 48. 49MRY | A creative and technology agency that makes brands remarkable http://mry.com/en/
  49. 49. 50Welcome to BEAM http://www.beamland.com/
  50. 50. 51Build a Website — Squarespace http://www.squarespace.com/stories/
  51. 51. 52HubSpot | All-in-one Inbound Marketing Software http://www.hubspot.com/
  52. 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 surpris- ingly 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. 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. 54. 55SpellTower http://www.spelltower.com/
  55. 55. 56The Smartphone Reinvented Around You http://www.windowsphone.com/
  56. 56. 57Buffalo - Web Development, E-Commerce & Web Design - Brighton UK http://builtbybuffalo.com/
  57. 57. 58TheIssland. We are brand builders. http://www.theissland.com/
  58. 58. 59I think I might - http://ithinkimight.com/
  59. 59. 60Interactive Advent Calendar | It’s a Shape Christmas http://itsashapechristmas.co.uk/
  60. 60. 61TVLcorps Technologies http://www.tvlcorp.com/
  61. 61. 62Invoisse http://invoisse.com/
  62. 62. 63Coloured Lines http://www.colouredlines.com.au/
  63. 63. 64The Ecology Center http://theecologycenter.org/
  64. 64. 65Numbrs - One app. Every bank. https://www.numbrs.com/uk
  65. 65. 66Palace – An exceptional design studio http://palace.co/
  66. 66. 67Video Hosting for Business http://wistia.com/
  67. 67. 68PSD to HTML, WordPress, Drupal, Magento & others – PSD2HTML® http://www.psd2html.com/
  68. 68. 69Playground Inc. http://playgroundinc.com/
  69. 69. 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. 70. 71Lets Yep! Create instant meetings with fun people http://letsyep.com/en/
  71. 71. 72Tinké | Take The Tour http://www.zensorium.com/tinke/
  72. 72. 73MoreSleep http://www.moresleep.net/
  73. 73. 74Quechua – Look Book Spring Summer 13 http://www.quechua.com/campaigns/lookbook-spring-summer/
  74. 74. 75Mahédine Yahia Portfolio http://www.mahedineyahia.fr/
  75. 75. 76SHADOW | Community of Dreamers http://www.discovershadow.com/
  76. 76. 77Welcome - LOFT City Church | Richardson, Dallas & beyond http://loftcitychurch.com/
  77. 77. 78Gramercy Park Hotel New York | A NYC boutique hotel http://gramercyparkhotel.com/
  78. 78. 79Sløret – Paper & Paint by Flügger http://www.paperandpaint.dk/
  79. 79. 80Andrew McCarthy - Interactive product designer http://andrevv.com/
  80. 80. 81KILFISH http://www.kilfish.com/v6
  81. 81. 82Pi’s Epic Journey - LIFE OF PI on Digital HD http://journey.lifeofpimovie.com/
  82. 82. 83Andreas Kleiberg http://www.andreaskleiberg.no/
  83. 83. 84Every Last Drop – An Interactive Website about Water Saving http://everylastdrop.co.uk/
  84. 84. 85Madwell | A Tiny Little Giant Agency http://www.madwellnyc.com/
  85. 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 en- gagement 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. 86. 87HKI™ http://hellohikimori.com/
  87. 87. 88Whiteboard | We empower visionaries to lead meaningful brands. http://whiteboard.is/
  88. 88. 89Joe San Clothing - Worn to be loved http://www.joe-san.com/
  89. 89. 90Sonia by Sonia Rykiel Fall Winter 2013 http://www.soniaby.com/
  90. 90. 91JOBS : le film - le 21 août au cinéma http://www.jobsisfree.com/
  91. 91. 92Trask Industries http://www.trask-industries.com/
  92. 92. 93Brand Toolkit | MojoTech - Providence & New York http://www.mojotech.com/toolkit
  93. 93. 94Langtidsmodnet.no http://langtidsmodnet.no/
  94. 94. 95Tool of North America http://www.toolofna.com/
  95. 95. 96L’attrape rêve | Galerie – Ateliers – Artstore http://www.lattrapereve.fr/
  96. 96. 97Staring = Caring http://staringiscaring.nl/
  97. 97. 98W Eyewear http://www.weyewear.com/
  98. 98. 99Prettybird http://www.prettybirdus.com/
  99. 99. 100sketchin - evolutive experience design http://www.sketchin.ch/
  100. 100. 101Precision is my Inspiration by RAYMOND WEIL Genève http://inspiration.raymond-weil.com/
  101. 101. 102 7. NON-STANDARD NAVIGATION Navigation is among the most important pieces of every single website. No content would be reachable without properly designed navigation that answers the questions “where am I?” and “where can I go from here?”. We got used to either a top, left or right menu. They’re patterns used since the beginning of the web. Something changed in 2013 though. Designers started to play with the concept and come up with really creative solutions. Some of them are more usable (bottom navigation), some less (usage of a keyboard in navigating through a website), but all in all this is an interesting and popular trend that’s changing the way the Internet looks. Take a look at the 15 best examples of non-standard navigation elements.
  102. 102. 103Vespillo le film http://www.vespillo-lefilm.com/
  103. 103. 104Cascade Brewery Co – Brew by Feel http://www.cascadebreweryco.com.au/
  104. 104. 105adidas Group Retail Careers http://www.adidasretailjobs.com/
  105. 105. 106H6 http://beoplay.com/Products/BeoplayH6
  106. 106. 107CO3, la science dans ton chez toi ! CO3.lemouv.fr http://co3.lemouv.fr/
  107. 107. 108Diesel Home Collection http://www.diesel.com/collection-diesel-home
  108. 108. 109Nerval / Pierre Georges, interaction designer. http://nerval.ch/
  109. 109. 110Interactive Ear tool showing how the ear works by Amplifon http://www.amplifon.co.uk/interactive-ear/
  110. 110. 111LE ROCKWOOD - ROCK WITH US http://www.lerockwood.com/
  111. 111. 112Experience Designers | Online Department http://onlinedepartment.nl/
  112. 112. 113World Baking Day - 19th May 2013 http://worldbakingday.com/
  113. 113. 114Design Embraced - Anthony Goodwin http://www.designembraced.com/
  114. 114. 115Hot Dot http://hotdot.pro/
  115. 115. 116Oakley Airbrake MX // A Revolution In Impact Protection http://moto.oakley.com/
  116. 116. 117ELI http://weareeli.dk/
  117. 117. 118 8. FIXED NAVIGATION Setting a position fixed for the navigation bar isn’t something new. It’s doable since CSS2 introduced absolute, relative and fixed positions for html elements. However, in 2013 fixing the navigation has been rediscovered in a twofold way: • responsive websites often use fixed navigation bars to improve the navigation capabilities on a small screen; • fixed navigation bars with additional transitions add a dynamic feeling to the website. The progress of technology (larger screens and bigger resolutions) has justified the fixed position of the navigation and honestly we’re hoping it will become a standard in 2014. Enjoy 15 great websites that are leading the fixed revolution!
  118. 118. 119DesignTAXI - Driving you to bright ideas for the past 10 years http://designtaxi.com/
  119. 119. 120theoriginalclassybroad.com http://theoriginalclassybroad.com/
  120. 120. 121UXPin - Blog http://blog.uxpin.com/
  121. 121. 122The Secret Handshake - Solutions to help you go pro http://learnthesecrethandshake.com/
  122. 122. 123Derek Boateng http://derekboateng.com/
  123. 123. 124LOOP. Wonderful digital things. http://www.agentur-loop.com/
  124. 124. 125The Kings of Summer, Now Playing in Select Cities http://thekingsofsummermovie.com/
  125. 125. 126Octave & Octave recrute 5 talents enthousiastes http://www.octaveoctave.com/jobs
  126. 126. 127Carlos Molina http://yolive.me/
  127. 127. 128Interactive design studio | Lyon | REZO ZERO http://www.rezo-zero.com/
  128. 128. 129Adam Rudzki - Graphic Designer & Art Director http://adamrudzki.com/
  129. 129. 130ONY AGENCY http://en.ony.ru/
  130. 130. 131Iedereen DubbelFrisss http://www.dubbelfrisss.nl/
  131. 131. 132Case 3D http://www.case-3d.com/
  132. 132. 133Carrera - Racing Since 1956 http://carreraworld.com/
  133. 133. 134 9. METRO GRID The Metro UI name has been officially buried because of a possible trade- mark dispute. Microsoft offered “Windows 8-style UI” instead but the design world somehow refused to use it (sounds like product placement, doesn’t it?). It didn’t kill the trend though. Together with the pinterest-like grids, metro grid has become extremely popular in 2013 and certainly will remain pop- ular in 2014. Designers started to love websites and web applications full of nicely crafted boxes. Appealing, simple aesthetics almost dominated the Internet. Choosing 15 nice implementations of the “Metro Grid” wasn’t an easy task, but we managed to do it. Enjoy!
  134. 134. 135Kitchen http://www.kitchenprague.com/
  135. 135. 136UGSMAG http://ugsmag.com/
  136. 136. 137Web Apps, Web Technology Trends, Social Networking and Social Media – ReadWrite http://readwrite.com/
  137. 137. 138The Gadget Flow | Cool gadgets - Gadget gift ideas - Home gadgets http://thegadgetflow.com/
  138. 138. 139Juliana Bicycles | The Original Women’s Mountain Bike http://www.julianabicycles.com/
  139. 139. 140Mustafa Demirkent :: Portfolio Website http://mustafademirkent.com/
  140. 140. 141Pulco - La vie à la Fresh ! http://laviealafresh.com/
  141. 141. 142Ale De Carvalho / Art Direction http://a-d-c.net/
  142. 142. 143Control Films - Production Company in Paris http://controlfilms.tv/
  143. 143. 144Escape Flight http://escapeflight.com/
  144. 144. 145We make apps | Etch http://etchapps.com/
  145. 145. 146VISIT | University of Coimbra http://visit.uc.pt/en/
  146. 146. 147Hommard Cashmere Sweaters and more http://hommard.com/
  147. 147. 148Hommard Cashmere Sweaters and more http://hommard.com/
  148. 148. 149MVA - SPACE SHOWER MUSIC VIDEO AWARDS http://mva.jp/
  149. 149. 150 10. MIX-AND-MATCH TYPOGRAPHY 2013 popularized a typography style that we previously knew rather from fancy t-shirts than websites - mixing and matching several styles of fonts. The complex art of choosing the right font is stretched to the extreme in this trend. Neck-breaking typography aerobatics will certainly be with us in the near future. It’s too powerful a brand-shaping tool to disappear. Watch the 15 best examples of Mix-and-Match Typography and be amazed!
  150. 150. 151Forefathers Group | The New Design Frontier http://forefathersgroup.com/
  151. 151. 152Ermenegildo Zegna official website http://www.zegna.com/
  152. 152. 153Welcome to the Skybox | Conceptual Design | http://www.skybox.org/
  153. 153. 154Chris Wilhite | Chris Wilhite Design http://chriswilhitedesign.com/
  154. 154. 155Timmy Tompkins’ Awesome Fantasy Comic Book Superhero Adventure http://timmytompkinsapp.com/
  155. 155. 156BTL Brands - Do Better http://www.btlbrands.com/
  156. 156. 157Fontwalk http://fontstage.de/
  157. 157. 158Jacksonville Art Walk | I Love Art Walk http://jacksonvilleartwalk.com/
  158. 158. 159Wicked Palate - Burnsville, MN http://archive.coryetzkorn.com/wicked-palate/
  159. 159. 160The Production Kitchen http://www.jacquico.com/
  160. 160. 161Introducing CIRQ. Kosta Browne winemaker, Michael Browne. http://cirq.com/
  161. 161. 162Cast Iron Design Company | A Boulder Colorado Graphic Design Studio http://www.castirondesign.com/
  162. 162. 163Barrelhouse Flat http://thebarrelhouseflat.com/
  163. 163. 164Wild Blue http://wildbluetech.com/
  164. 164. 165Al Taglio | Pizza au poids et à la coupe http://www.altaglio.fr/
  165. 165. 166 11. CLARITY AND SIMPLICITY Clarity and Simplicity are always in fashion. In 2013 however this became a major trend. Connected to the “content centric” approach and the flat de- sign, the clarity and simplicity of an interface become a complete, powerful thing. It’s design at its best. Thoughtful, efficient and...simple. Enjoy!
  166. 166. 167B-Reel http://www.b-reel.com/
  167. 167. 168Haraldur Thorleifsson http://haraldurthorleifsson.com/
  168. 168. 169Carolina Herrera’s “The House” http://www.carolinaherrera.com/the-house/en/
  169. 169. 170Grafik. Web Design + Development. Wellington, New Zealand http://grafik.co.nz/
  170. 170. 171Windows of New York | A weekly illustrated atlas http://www.windowsofnewyork.com/
  171. 171. 172Harry’s - Great Shave. Fair Price. Simple. http://www.harrys.com/
  172. 172. 173Rdio http://www.rdio.com/
  173. 173. 174Spektrum Media http://spektrummedia.com/
  174. 174. 175Borgo 27 http://www.borgo27.it/
  175. 175. 176Eduardo Nunes – Cross-Media Designer http://www.eduardonunes.me/
  176. 176. 177Cédric Marteau Portfolio, Developer front end & UX Designer http://www.cedricmarteau.com/
  177. 177. 178Rosebud http://www.rosebud-ad.com/
  178. 178. 179AÃRK Collective http://aarkcollective.com/
  179. 179. 180Shun Cutlery http://shun.kaiusaltd.com/
  180. 180. 181Substrakt - Branding, Print, Design, Digital Web & Mobile. Birmingham & London http://substrakt.co.uk/
  181. 181. 182 12. COOKIES WARNINGS The European Union gave designers a huge headache in 2013. Cookie warn- ings are now obligatory for all European websites. That’s an unwanted trend that will certainly be very popular in the next couple of years. Nothing we can do about it apart from...getting used to it.
  182. 182. 183Home - this is true. http://www.truedigital.co.uk/
  183. 183. 184Lexus Cars Europe | Hybrid Cars | New and Used Lexus Cars http://www.lexus.eu/index.tmex
  184. 184. 185Satorisan - Live By The Walk http://satorisan.com/en/home
  185. 185. 186 Conclusion 2013 is the year of smart, aesthetic and simple design. 2014 will be no different. Responsive web design will be even more powerful. Flat Design will be even more popular (since the arrival of iOS7). The clarity and simplic- ity of content-centric websites will be all over the place. Who knows, maybe this is the golden age of the Internet. The design of 2013 is mature, focused on its purpose and certainly rewarding for the eyes of users. The only thing that can destroy 2014 for all of us is the growing popularity of transitional interfaces. While CSS transitions are great and in the hands of talented designers can add much desired interactivity to the UI, it’s easy to overdose them.
  186. 186. 187 Everything in the design is meant to serve its general purpose. Don’t get caught in the trap of unnecessary movement in the interface and the de- sign will be fine. 2014 - can’t wait to see what it’ll bring to the world of web design. Marcin Treder UXPin CEO Follow me on Twitter

×