july 18 duyen - 10 web design trends for 2013

2013 Web Design Trends

Author: Duyen.NguyenDate: 18/07/2013

1. Responsive Web Design (RWD)2. Flat Design3. Parallax4. Large Photo Backgrounds5. Infinite Scrolling

2013 Web Design Trends

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 browser2. Use Tool on Firefox: Web Developer > Responsive Design View

1. Responsive Web Design (RWD)

https://creativemarket.com/anarieldesign/1247-Calisto-Responsive-Template-Card/live-preview

http://www.anderssonwise.com/ http://2012.newadventuresconf.com/

http://www.izwebz.com/

Examples:

2. Flat DesignFlat Design or Flat UI has been one of the most talked about trends in web and user interface design this year.

2. Flat Design

Features:1. No gradients or shadows2. Simple Elements3. Beautiful Typography4. 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 DesignWe 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/jquery-parallax/

http://www.iutopi.com/ http://www.soleilnoir.net/believein/#/fashion

http://www.bagigia.com/

Examples:

Parallax is good for SEO?

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

4. Large Photo Backgrounds

4. Large Photo Backgrounds

https://squareup.com/ http://www.geo-fun.com/ http://vegas.jaysalvat.com/ http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/index.html

Examples:

5. Infinite Scrolling

5. Infinite Scrolling

5. Infinite Scrolling

http://pinterest.com/ http://www.flickr.com/explore http://images.google.com/ https://www.facebook.com/

Examples:

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

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

5. It makes it extremely difficult for users to view the footer.6. There is no permalink to a specific section of the page.

THANK YOU