46

Web Design Book of Trends 2013-2014

Embed Size (px)

DESCRIPTION

Only serious design trends with carefully picked examples, amazing enough make their own title. A must-have companion for every designer for wireframing, prototyping, mockuping and other product development stages.

Citation preview

Page 1: Web Design Book of Trends 2013-2014
Page 2: Web Design Book of Trends 2013-2014

Full Version DOWNLOAD

WEB DESIGN BOOK OF TRENDS

2013-2014

Marcin Treder, Robert Warych and Sebastian Witman

WEB DESIGN BOOK OF TRENDS

2013-2014

Marcin Treder, Robert Warych and Sebastian Witman

WEB DESIGN BOOK OF TRENDS

2013-2014

Marcin Treder, Robert Warych and Sebastian Witman

Page 3: Web Design Book of Trends 2013-2014

Design is the mirror of culture. Changes in society, technology and art are always reflected in the current state of design.

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.

PREFACE

Page 4: Web Design Book of Trends 2013-2014

Today, design is different. Users are finally in the center of the process and you can literally feel this while browsing through the web. 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.

PREFACE

Page 5: Web Design Book of Trends 2013-2014

Progress couldn’t exist without 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’re hoping that this collection will fill you with inspiration and reflection on the direction web design is heading in.

PREFACE

Page 6: Web Design Book of Trends 2013-2014

1. The Era of Content 2. Storytelling 3. Responsive Websites 4. Flat Design 5. Parallax Scrolling 6. Video Background 7. Non-Standard Navigation 8. Fixed Navigation 9. Metro Grid 10. Mix-and-Match Typography 11. Clarity and Simplicity 12. Cookies Warnings

INDEX

Page 7: Web Design Book of Trends 2013-2014

“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.

1. THE ERA OF CONTENT

Page 8: Web Design Book of Trends 2013-2014

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!

1. THE ERA OF CONTENT

Page 9: Web Design Book of Trends 2013-2014

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

Page 10: Web Design Book of Trends 2013-2014

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

Page 11: Web Design Book of Trends 2013-2014

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

Page 12: Web Design Book of Trends 2013-2014

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

Page 13: Web Design Book of Trends 2013-2014

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

Page 14: Web Design Book of Trends 2013-2014

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

Page 15: Web Design Book of Trends 2013-2014

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

Page 16: Web Design Book of Trends 2013-2014

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

Page 17: Web Design Book of Trends 2013-2014

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

Page 18: Web Design Book of Trends 2013-2014

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

Page 19: Web Design Book of Trends 2013-2014

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

Page 20: Web Design Book of Trends 2013-2014

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

Page 21: Web Design Book of Trends 2013-2014

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

Page 22: Web Design Book of Trends 2013-2014

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

Page 23: Web Design Book of Trends 2013-2014

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

Page 24: Web Design Book of Trends 2013-2014

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

Page 25: Web Design Book of Trends 2013-2014

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

Page 26: Web Design Book of Trends 2013-2014

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

Page 27: Web Design Book of Trends 2013-2014

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

Page 28: Web Design Book of Trends 2013-2014

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

Page 29: Web Design Book of Trends 2013-2014

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

Page 30: Web Design Book of Trends 2013-2014

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

Page 31: Web Design Book of Trends 2013-2014

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

Page 32: Web Design Book of Trends 2013-2014

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

Page 33: Web Design Book of Trends 2013-2014

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

Page 34: Web Design Book of Trends 2013-2014

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

Page 35: Web Design Book of Trends 2013-2014

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

Page 36: Web Design Book of Trends 2013-2014

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

Page 37: Web Design Book of Trends 2013-2014

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

Page 38: Web Design Book of Trends 2013-2014

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

Page 39: Web Design Book of Trends 2013-2014

CONTINUE READING

1. The Era of Content 2. Storytelling 3. Responsive Websites 4. Flat Design 5. Parallax Scrolling 6. Video Background 7. Non-Standard Navigation 8. Fixed Navigation 9. Metro Grid 10. Mix-and-Match Typography 11. Clarity and Simplicity 12. Cookies Warnings

Page 40: Web Design Book of Trends 2013-2014

READ OUR FREE E-BOOK

11 trends that make today's avant-garde and tomorrow's leaders

165 eye-candy examples of remarkable web design

As every companion should be: inspiring, timesaving and handy

DOWNLOAD

Page 41: Web Design Book of Trends 2013-2014

MORE FREE E-BOOKS

http://uxpin.com/knowledge.html !

Thank you

Mobile Design Book of Trends 2014

The User Experience Guide Book For Product Managers

UX Design for Startups

& More

Page 42: Web Design Book of Trends 2013-2014

ABOUT UXPIN

Page 43: Web Design Book of Trends 2013-2014

157

The UX Design Platform

Complete Prototyping Framework for Web, Mobile and Wearable

Built for Teams

www.uxpin.com

157

The UX Design Platform

Complete Prototyping Framework for Web, Mobile and Wearable

Built for Teams

www.uxpin.com

157

The UX Design Platform

Complete Prototyping Framework for Web, Mobile and Wearable

Built for Teams

www.uxpin.com

157

The UX Design Platform

Complete Prototyping Framework for Web, Mobile and Wearable

Built for Teams

www.uxpin.com

Page 44: Web Design Book of Trends 2013-2014

157

The UX Design Platform

Complete Prototyping Framework for Web, Mobile and Wearable

Built for Teams

www.uxpin.com

900+ Elements From Popular Libraries

Page 45: Web Design Book of Trends 2013-2014

http://uxpin.com/knowledge.html !

Thank you

Responsive Breakpoints

157

The UX Design Platform

Complete Prototyping Framework for Web, Mobile and Wearable

Built for Teams

www.uxpin.com

Page 46: Web Design Book of Trends 2013-2014

http://uxpin.com/knowledge.html !

Thank you

Work Together

157

The UX Design Platform

Complete Prototyping Framework for Web, Mobile and Wearable

Built for Teams

www.uxpin.com