2013 Web Design Trends
Author: Duyen.Nguyen
Date: 18/07/2013
1. Responsive Web Design (RWD)
2. Flat Design
3. Parallax
4. Large Photo Backgrounds
5. Infinite Scrolling
2013 Web Design...
1. Responsive Web Design (RWD)
1. Responsive Web Design (RWD)
1. Responsive Web Design (RWD)
How to know if website is
Responsive Web Design?
1. Responsive Web Design (RWD)
1. Resize browser
2. Use Tool on Firefox: Web Developer > Responsive Design View
1. Responsive Web Design (RWD)
https://creativemarket.com/an
arieldesign/1247-Calisto-
Responsive-Template-
Card/live-prev...
2. Flat Design
Flat Design or Flat UI has been one of the most talked about trends in web and
user interface design this y...
2. Flat Design
Features:
1. No gradients or shadows
2. Simple Elements
3. Beautiful Typography
4. Strong focus on color
2. Flat Design
No gradients or shadows
2. Flat Design
Simple Elements
2. Flat Design
Beautiful Typography
2. Flat Design
Strong focus on color
2. Flat Design
The 5 things that people associate with flat design are:
• Simple
• Clean
• Colorful
• Modern
• Boring
2. Flat Design
We gathered different association and brought them together in the word
cloud that you see below:
2. Flat Design
http://etchapps.com/ https://coderwall.com/futureal http://www.microsoft.com/en-
gb/default.aspx
Examples:
3. Parallax
3. Parallax
3. Parallax
http://ianlunn.co.uk/plugins/jq
uery-parallax/
http://www.iutopi.com/ http://www.soleilnoir.net/believ
ein/#/f...
Parallax is good for SEO?
3. Parallax
From SEO perspective some advantages of having parallax scrolling website are
• Use HTML5/CSS3 (Google favors ...
4. Large Photo Backgrounds
4. Large Photo Backgrounds
https://squareup.com/ http://www.geo-fun.com/ http://vegas.jaysalvat.com/ http://tympanus.net/T...
5. Infinite Scrolling
5. Infinite Scrolling
5. Infinite Scrolling
http://pinterest.com/ http://www.flickr.com/explore http://images.google.com/ https://www.facebook.c...
5. Infinite Scrolling
Advantages
1. Can improve load time (page speed) for pages that have lots of content.
2. Retains vis...
THANK YOU
Upcoming SlideShare
Loading in …5
×

July 18 duyen - 10 web design trends for 2013

1,971
-1

Published on

Weekly presentation

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,971
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
31
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

July 18 duyen - 10 web design trends for 2013

  1. 1. 2013 Web Design Trends Author: Duyen.Nguyen Date: 18/07/2013
  2. 2. 1. Responsive Web Design (RWD) 2. Flat Design 3. Parallax 4. Large Photo Backgrounds 5. Infinite Scrolling 2013 Web Design Trends
  3. 3. 1. Responsive Web Design (RWD)
  4. 4. 1. Responsive Web Design (RWD)
  5. 5. 1. Responsive Web Design (RWD) How to know if website is Responsive Web Design?
  6. 6. 1. Responsive Web Design (RWD) 1. Resize browser 2. Use Tool on Firefox: Web Developer > Responsive Design View
  7. 7. 1. Responsive Web Design (RWD) https://creativemarket.com/an arieldesign/1247-Calisto- Responsive-Template- Card/live-preview http://www.anderssonwise.com/ http://2012.newadventuresconf. com/ http://www.izwebz.com/ Examples:
  8. 8. 2. Flat Design Flat Design or Flat UI has been one of the most talked about trends in web and user interface design this year.
  9. 9. 2. Flat Design Features: 1. No gradients or shadows 2. Simple Elements 3. Beautiful Typography 4. Strong focus on color
  10. 10. 2. Flat Design No gradients or shadows
  11. 11. 2. Flat Design Simple Elements
  12. 12. 2. Flat Design Beautiful Typography
  13. 13. 2. Flat Design Strong focus on color
  14. 14. 2. Flat Design The 5 things that people associate with flat design are: • Simple • Clean • Colorful • Modern • Boring
  15. 15. 2. Flat Design We gathered different association and brought them together in the word cloud that you see below:
  16. 16. 2. Flat Design http://etchapps.com/ https://coderwall.com/futureal http://www.microsoft.com/en- gb/default.aspx Examples:
  17. 17. 3. Parallax
  18. 18. 3. Parallax
  19. 19. 3. Parallax http://ianlunn.co.uk/plugins/jq uery-parallax/ http://www.iutopi.com/ http://www.soleilnoir.net/believ ein/#/fashion http://www.bagigia.com/ Examples:
  20. 20. Parallax is good for SEO?
  21. 21. 3. Parallax From SEO perspective some advantages of having parallax scrolling website are • Use HTML5/CSS3 (Google favors new technology) • Parallax website is perfect for link bait. • The parallax scrolling website has a higher level of interaction with the users • It increases page view interval and interaction. • Is known as the parallax effects and it is done using jQuery. • It looks hot and it is not using Flash, so it is even hotter. With these advantages it also has some disadvantages, which are, • A parallax site appears to Google's search engine spiders as one page. Now, that doesn't mean that you can't rank for that one page, but it's going to be difficult to target multiple keywords on just one page (THAT’S RISK) • Slow: Google favors sites that load quickly. Many parallax sites are image-heavy and take some time to load • Google is smart. Google spiders understand the structure of a page, so they can determine the importance of content by the position of content on the page-- important content at the top, less important content at the bottom. With parallax sites, you are trying to fit all the content on to one page, so the concept of the "fold" goes away and important content is very likely to be positioned at the bottom of the page. (Disable CSS to see the structure of site) NOT GREAT FOR SEO
  22. 22. 4. Large Photo Backgrounds
  23. 23. 4. Large Photo Backgrounds https://squareup.com/ http://www.geo-fun.com/ http://vegas.jaysalvat.com/ http://tympanus.net/Tutorials/C SS3FullscreenSlideshow/index.h tml Examples:
  24. 24. 5. Infinite Scrolling
  25. 25. 5. Infinite Scrolling
  26. 26. 5. Infinite Scrolling http://pinterest.com/ http://www.flickr.com/explore http://images.google.com/ https://www.facebook.com/ Examples:
  27. 27. 5. Infinite Scrolling Advantages 1. Can improve load time (page speed) for pages that have lots of content. 2. Retains visitors on one page, allowing them to view lots of content without a page refresh. 3. Template designs can benefit with more cleanness, more room for content and less distracting elements like the list of numbers for paging. Weakness 1. If not properly optimized, pages with lots of content can soak up lots of browser memory. Desktop computers as well as on mobile devices and tablets can potentially run out of memory and crash, specially when the page loads tons of images. 2. It makes it extremely difficult for users to view the footer. 3. There is no permalink to a specific section of the page.
  28. 28. THANK YOU
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×