Web Design Trends 2014
-
Upload
creative-spark-an-mc-saatchi-company -
Category
Design
-
view
64.195 -
download
0
Transcript of Web Design Trends 2014
![Page 1: Web Design Trends 2014](https://reader034.fdocuments.net/reader034/viewer/2022051520/58f9b372760da3da068bd647/html5/thumbnails/1.jpg)
![Page 2: Web Design Trends 2014](https://reader034.fdocuments.net/reader034/viewer/2022051520/58f9b372760da3da068bd647/html5/thumbnails/2.jpg)
• Flat design
• Large feature images
• Parallax scrolling sites
• Beautiful typography
• Responsive design
In this presentation we discuss
![Page 3: Web Design Trends 2014](https://reader034.fdocuments.net/reader034/viewer/2022051520/58f9b372760da3da068bd647/html5/thumbnails/3.jpg)
Flat Design
![Page 4: Web Design Trends 2014](https://reader034.fdocuments.net/reader034/viewer/2022051520/58f9b372760da3da068bd647/html5/thumbnails/4.jpg)
• No more “eye-popping” gradients or
shadows
• Strong focus on colour
• Flat buttons still look clickable and the
input fields still look editable
• Layouts still look interactive but without
the more exquisitely refined graphics
Flat Design
![Page 5: Web Design Trends 2014](https://reader034.fdocuments.net/reader034/viewer/2022051520/58f9b372760da3da068bd647/html5/thumbnails/5.jpg)
Apple
![Page 6: Web Design Trends 2014](https://reader034.fdocuments.net/reader034/viewer/2022051520/58f9b372760da3da068bd647/html5/thumbnails/6.jpg)
Apple
![Page 7: Web Design Trends 2014](https://reader034.fdocuments.net/reader034/viewer/2022051520/58f9b372760da3da068bd647/html5/thumbnails/7.jpg)
Large hero areas
quickly killing
simple sliders
![Page 8: Web Design Trends 2014](https://reader034.fdocuments.net/reader034/viewer/2022051520/58f9b372760da3da068bd647/html5/thumbnails/8.jpg)
• Often an image with a little amount of
text, at the top of a website
• A borrowed term from print design
• They are here to replace sliders and are
increasingly creative and elaborate
• These images can be elaborate and
illustrated or simple images which are
slightly blurred
Large Hero Areas
![Page 9: Web Design Trends 2014](https://reader034.fdocuments.net/reader034/viewer/2022051520/58f9b372760da3da068bd647/html5/thumbnails/9.jpg)
![Page 10: Web Design Trends 2014](https://reader034.fdocuments.net/reader034/viewer/2022051520/58f9b372760da3da068bd647/html5/thumbnails/10.jpg)
![Page 11: Web Design Trends 2014](https://reader034.fdocuments.net/reader034/viewer/2022051520/58f9b372760da3da068bd647/html5/thumbnails/11.jpg)
Videos in Place of Text
![Page 12: Web Design Trends 2014](https://reader034.fdocuments.net/reader034/viewer/2022051520/58f9b372760da3da068bd647/html5/thumbnails/12.jpg)
Coin
![Page 13: Web Design Trends 2014](https://reader034.fdocuments.net/reader034/viewer/2022051520/58f9b372760da3da068bd647/html5/thumbnails/13.jpg)
Manuel Rueda
![Page 14: Web Design Trends 2014](https://reader034.fdocuments.net/reader034/viewer/2022051520/58f9b372760da3da068bd647/html5/thumbnails/14.jpg)
Long Scrolling Sites
(Parallax)
![Page 15: Web Design Trends 2014](https://reader034.fdocuments.net/reader034/viewer/2022051520/58f9b372760da3da068bd647/html5/thumbnails/15.jpg)
Cyclemon
![Page 16: Web Design Trends 2014](https://reader034.fdocuments.net/reader034/viewer/2022051520/58f9b372760da3da068bd647/html5/thumbnails/16.jpg)
Sony
![Page 17: Web Design Trends 2014](https://reader034.fdocuments.net/reader034/viewer/2022051520/58f9b372760da3da068bd647/html5/thumbnails/17.jpg)
Beautiful
Typography
![Page 18: Web Design Trends 2014](https://reader034.fdocuments.net/reader034/viewer/2022051520/58f9b372760da3da068bd647/html5/thumbnails/18.jpg)
Slam Dunk History
![Page 19: Web Design Trends 2014](https://reader034.fdocuments.net/reader034/viewer/2022051520/58f9b372760da3da068bd647/html5/thumbnails/19.jpg)
London to Paris
![Page 20: Web Design Trends 2014](https://reader034.fdocuments.net/reader034/viewer/2022051520/58f9b372760da3da068bd647/html5/thumbnails/20.jpg)
Responsive Design
![Page 21: Web Design Trends 2014](https://reader034.fdocuments.net/reader034/viewer/2022051520/58f9b372760da3da068bd647/html5/thumbnails/21.jpg)
Slam Dunk History
![Page 22: Web Design Trends 2014](https://reader034.fdocuments.net/reader034/viewer/2022051520/58f9b372760da3da068bd647/html5/thumbnails/22.jpg)
Slam Dunk History
![Page 23: Web Design Trends 2014](https://reader034.fdocuments.net/reader034/viewer/2022051520/58f9b372760da3da068bd647/html5/thumbnails/23.jpg)
Creative Spark
How we fit in
![Page 24: Web Design Trends 2014](https://reader034.fdocuments.net/reader034/viewer/2022051520/58f9b372760da3da068bd647/html5/thumbnails/24.jpg)
![Page 25: Web Design Trends 2014](https://reader034.fdocuments.net/reader034/viewer/2022051520/58f9b372760da3da068bd647/html5/thumbnails/25.jpg)
![Page 26: Web Design Trends 2014](https://reader034.fdocuments.net/reader034/viewer/2022051520/58f9b372760da3da068bd647/html5/thumbnails/26.jpg)
![Page 27: Web Design Trends 2014](https://reader034.fdocuments.net/reader034/viewer/2022051520/58f9b372760da3da068bd647/html5/thumbnails/27.jpg)
• Flat design - no gradients on buttons or navigation but the call to action still looks clickable.
• We feature large hero images with small amounts of text on all pages. This immediately attracts the user’s attention, especially if the image is well photographed or creatively made.
• Although our new site has multiple pages – we have a nifty little feature on top of all pages.
• Use of beautiful typography in headings.• And of course, our website is responsive.
Web ‘pro’ prediction for 2014
![Page 28: Web Design Trends 2014](https://reader034.fdocuments.net/reader034/viewer/2022051520/58f9b372760da3da068bd647/html5/thumbnails/28.jpg)
![Page 29: Web Design Trends 2014](https://reader034.fdocuments.net/reader034/viewer/2022051520/58f9b372760da3da068bd647/html5/thumbnails/29.jpg)
• Flat design
• Large feature images
Web ‘pro’ prediction for 2014
![Page 30: Web Design Trends 2014](https://reader034.fdocuments.net/reader034/viewer/2022051520/58f9b372760da3da068bd647/html5/thumbnails/30.jpg)
![Page 31: Web Design Trends 2014](https://reader034.fdocuments.net/reader034/viewer/2022051520/58f9b372760da3da068bd647/html5/thumbnails/31.jpg)
• Flat design
• Large feature images
• Parallax scrolling sites
Web ‘pro’ prediction for 2014
![Page 32: Web Design Trends 2014](https://reader034.fdocuments.net/reader034/viewer/2022051520/58f9b372760da3da068bd647/html5/thumbnails/32.jpg)
![Page 33: Web Design Trends 2014](https://reader034.fdocuments.net/reader034/viewer/2022051520/58f9b372760da3da068bd647/html5/thumbnails/33.jpg)
![Page 34: Web Design Trends 2014](https://reader034.fdocuments.net/reader034/viewer/2022051520/58f9b372760da3da068bd647/html5/thumbnails/34.jpg)
![Page 35: Web Design Trends 2014](https://reader034.fdocuments.net/reader034/viewer/2022051520/58f9b372760da3da068bd647/html5/thumbnails/35.jpg)
![Page 36: Web Design Trends 2014](https://reader034.fdocuments.net/reader034/viewer/2022051520/58f9b372760da3da068bd647/html5/thumbnails/36.jpg)
• Flat design
• Large feature images
• Parallax scrolling sites
• Beautiful typography
Web ‘pro’ prediction for 2014
![Page 37: Web Design Trends 2014](https://reader034.fdocuments.net/reader034/viewer/2022051520/58f9b372760da3da068bd647/html5/thumbnails/37.jpg)
![Page 38: Web Design Trends 2014](https://reader034.fdocuments.net/reader034/viewer/2022051520/58f9b372760da3da068bd647/html5/thumbnails/38.jpg)
• Flat design
• Large feature images
• Parallax scrolling sites
• Beautiful typography
• Responsive design
Web ‘pro’ prediction for 2014
![Page 39: Web Design Trends 2014](https://reader034.fdocuments.net/reader034/viewer/2022051520/58f9b372760da3da068bd647/html5/thumbnails/39.jpg)