Click me
Transcribed

Web Design Trends for 2013

Web Design Trends for 2013

an Infographic created by Enfuzed



Responsive



Responsive Web Design is a trend that carried over from 2012 and will continue to carry over for years to come. Having a website that can respond to a wide variety of screen sizes is a must with the rise of mobile web users.



84%



84% of smartphone users use their smart phone to browse the web.



There will be 1.4 Billion Smart Phones in the World by the end of 2013.



Metro



Metro is a design style created by Microsoft with the principle of focusing on content and relying less on graphics. Examples of this flat style are popping up everywhere, but the more notable places is Microsofts new OS, Windows 8, as well as the Xbox 360 dashboard.



Minimalism



Minimalism in design is a huge trend right now and goes along with the metro trend of having just the bare essentials, keeping the over the top graphics and unrelated content out of the picture.



Too Much Clutter

One of the top 10 Reasons why a person leaves a website.



keep it simple.



Typography



Bold headlines with mixed matched fonts is a hot trend right now, but picking the right fonts to mix and match is an important key.



Quick Tip:

Make sure your paragraphs are in some kind of easy to read sans-serif font. Here are a few suggestions below:

Open Sans

Shruti

Raleway

Quaver Sans

Nexa



The Key IS CREATING Excellent font combos.



What is it?

Parallax Scrolling happens when a background scrolls at a slower pace than the foreground creating a parallax effect.



Parallax



Parallax Scrolling is something that has been around since the old nintendo days. Recently though it has been a great user experience addition to websites.



Puma's Mobium Website is a great example of Parallax



Infinite Scrolling



Infinite Scrolling is a trend that has taken the web by storm. First made popular by social media giant Pinterest, infinite scrolling is a great user experience that allows content to keep loading continuously as you scroll down the page without having to reload the page.



Pinterest's Infinite Scrolling Loading Icon



All it takes is this line of CSS

header (

position: fixed;

)



Fixed Header



Have a fixed header bar with a main menu on it helps visitors to your site navigate through it quickly without having to waste time scrolling back to the top of the page.



Time Saver



Single Page



Still a going trend is single page websites. Having your entire website on one page can help reduce waiting time for page load thus helping users navigate through your website quicker. Most single page websites also section the content, giving each section it's own distinguished heading and background.



It is not recommended to use this technique if you have a website with a ton of content.



Quick Tip:

When creating a single page website, sectioning content is a good way to help users find what they're looking for.



Large Image Backgrounds



Large image backgrounds are something photographers usually use in their online portfolios. Over the past couple of years though web designers have taken that trend and incorporated it into all types of different websites.



Content First



One of the biggest mistakes web developers and designers make is building a website and then adding the content to it afterwards. Doing this can create issues down the road.



Quick Tip:

Get all the content needed for a website before you start developing it.



Using lipsum text and images as filler can help in developing around content but should only be used as a last resort. Web Design Trends for 2013 an Infographic created by Enfuzed Responsive Responsive Web Design is a trend that carried over from 2012 and will continue to carry over for years to come. Having a website that can respond to a wide variety of screen sizes is a must with the rise of mobile web users. There will be 84% of smartphone users use their smart phone to browse the web. 1.4 Billion 84% Smart Phones in the World by the end of 2013. Metro Metro is a design style created by Microsoft with the principle of focusing on content and relying less on graphics. Examples of this flat style are poping up everywhere, but the more notable places is Microsofts new OS, Windows 8, as well as the Xbox 360 dashboard. bing home social games tv & movies music apps settings BANSE 3 Play FIFA Soccer 13 Kinect Central Spertu Internet Explorer YouTube Recent The Hunger Games a Select Yject Maps 71° Minimalism Too Much Clutter One of the top 10 Reasons why a person leaves a website. Minimalism in design is a huge trend right now and goes along with the metro trend of having just the bare essentials, keeping the over the top graphics and unrelated content out of the picture. » keep it simple. Typography Bold headlines with mixed matched fonts is a hot trend right now, but picking the right fonts to mix and match is an important key. Quick Tip: Make sure your paragraphs are in some kind of easy to read sans-serif font. Here are a few suggestions below: Open Sans Shruti The Key IS CREATING Excellent font combos. Raleway Quaver Sans Nexa Parallax What is it? Parallax Scrolling is something that has been around since the old nintendo days. Recently though it has been a great user experience addition to websites. Parallax Scrolling happens when a background scrolls at a slower pace than the foreground creating a parallax effect. MENU Puma's Mobium Website The Nature of Performance MOBJUM is a great example of Parallax CONTIN A ROCEM MOBUM BUY MOBIUM Infinite Scrolling Pinterest Infinite Scrolling is a trend that has taken the web by storm. First made popular by social media giant Pinterest, infinite scrolling is a great user experience that allows content to keep loading continuously as you scroll down the page without having to reload the page. Pinterest's Infinite Scrolling Load Icon Fixed Header All it takes is this line of CSS Having a fixed header bar with a main menu on it helps visitors to your site navigate through it quickly without having to waste time scrolling back to the top of the page. header { position: fixed; } Time Saver Single Page Still a going trend is single page websites. Having your entire website on one page can help reduce waiting time for page load thus helping users navigate through your website quicker. Most single page websites also section the content, giving each section it's own distinguished heading and background. Quick Tip: When creating a single page website, sectioning content is a good way to help users find what they're looking for. It is not recommended to use this technique if 9 you have a website with a ton of content. Large Image Backgrounds home about portfolio contact hexed Interior Design Large image backgrounds are something photographers usually use in their online portfolios. Over the past couple of years though web designers have taken that trend and incorporated it into all types of different websites. Living Bedroom Kitchen 00 Content First Quick Tip: One of the biggest mistakes web developers and designers make is building a website and then adding the content to it afterwards. Doing this can create issues down the road. Get all the content needed for a website before you start developing it. text and images as filler can help in develop Usn but should only be used as a last resort. around content ! Sources Metro Microsoft and Xbox images from www.microsoft.com and www.xbox.com Parallax Puma Mobium website screenshot from www.puma.com/mobium/ Infinite Scrolling Pinterest Screen Shot from www.pinterest.com/enfuzed Large Image Background image from www.zacknoblauch.com/hexed Infographic kit vectors courtesy of www.medialoot.com and www.bluegraphic.com Mobile Statistics provided by www.abiresearch.com Enfuzed www.enfuzed.com web - graphic - print - mobile - branding - infographics - freebies - tutorials & more

Web Design Trends for 2013

shared by Enfuzed on Oct 06
8,017 views
19 shares
6 comments
A infographic featuring web design trends for 2013 created by Enfuzed. This is the original!

Publisher

Enfuzed

Tags

web design

Category

Computers
Did you work on this visual? Claim credit!

Get a Quote

Embed Code

For hosted site:

Click the code to copy

For wordpress.com:

Click the code to copy
Customize size