Weekly presentation

1. 2013 Web Design Trends
Author: Duyen.Nguyen
Date: 18/07/2013

2. 1. Responsive Web Design (RWD)
2. Flat Design
3. Parallax
4. Large Photo Backgrounds
5. Infinite Scrolling
2013 Web Design Trends

3. 1. Responsive Web Design (RWD)

4. 1. Responsive Web Design (RWD)

5. 1. Responsive Web Design (RWD)
How to know if website is
Responsive Web Design?

6. 1. Responsive Web Design (RWD)
1. Resize browser
2. Use Tool on Firefox: Web Developer > Responsive Design View

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. 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. 2. Flat Design
Features:
1. No gradients or shadows
2. Simple Elements
3. Beautiful Typography
4. Strong focus on color

10. 2. Flat Design
No gradients or shadows

11. 2. Flat Design
Simple Elements

12. 2. Flat Design
Beautiful Typography

13. 2. Flat Design
Strong focus on color

14. 2. Flat Design
The 5 things that people associate with flat design are:
• Simple
• Clean
• Colorful
• Modern
• Boring

15. 2. Flat Design
We gathered different association and brought them together in the word
cloud that you see below:

16. 2. Flat Design
http://etchapps.com/ https://coderwall.com/futureal http://www.microsoft.com/en-
gb/default.aspx
Examples:

17. 3. Parallax

18. 3. Parallax

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. Parallax is good for SEO?

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. 4. Large Photo Backgrounds

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. 5. Infinite Scrolling

25. 5. Infinite Scrolling

26. 5. Infinite Scrolling
http://pinterest.com/ http://www.flickr.com/explore http://images.google.com/ https://www.facebook.com/
Examples:

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. THANK YOU