Web Design Trends For 2013

1. The Metro Look

Microsoft’s mobile operating system, Windows Phone 7 introduced a fresh approach to content organization and UX. This is simply a style designers can not ignore for long especially with Windows 8 on the market. With more designers and developers working with the Windows platform we'll see more sites take on a more metro-like approach with an emphasizes on content as the interface.

Windows-Phone-Metro-Design

2. Vertical Navigation

Website navigation menus generally come in one of two orientations: vertical and horizontal. Horizontal navigation menus display items side by side. Vertical navigation menus stack items on top of one another. Riot Industries is a perfect example of how one can implement a vertical navigation.

3. Responsive & Content Heavy

Big, responsive and content heavy is the name of the game here. The redesign of technology news sites last year have paved the way for a new wave of redesigns that takes the old blog format and transform it into a full-screen, app-like experience featuring multiple columns, fixed position and a global navigation bar. Content heavy sites such as The Next Web and Stop Press are examples of this emerging trend.

4. Large type

Large type is definitely on the rise. With the increase in screen resolution serif fonts will become a more popular choice among web designers as the increase in resolution makes these fonts more readable then they have been. Large type will also be popular among content heavy sites especially when it comes to headlines.

5. The Retina Web

High-resolution displays, largely thanks to Apple’s Retina push, means the web will have to evolve to take advantage of that development. Add in the emergence of SVG and CSS-based graphics, and the web becomes significantly more responsive. Adobe also recently embraced Retina displays in it's latest release of Photoshop and Illustrator.

6. The HTML5 Standard

HTML5 will, hopefully, become the default standard in a couple of years. Currently many web developers and designers alike can get their hands dirty with HTML elements such as: <canvas>, which can be used for complex animations and graphics, <video>, which works similarly to the <img> tag, allowing for natively embedded video without 3rd party plugins like Flash, and <audio>. Look for HTML5 to slowly replace flash as the rich multimedia content.

7. Icon Fonts

The core idea is to take a set of icons or pictograms that would normally be implemented as an image or vector file and then convert it into a font. Why should we do that? According to Pictonic, an icon font can load as much as 14% faster than images and can to be as much as 90% smaller in comparison to SVG files.

8. Full Page Backgrounds

The popular trend of full page backgrounds will continue into 2013. Expect to see websites using high quality photographs or artwork to create the “eye-candy” impression which would leave a long lasting visual impact.

9. Parallax Scrolling

The word ‘Parallax’ has been derived from a Greek word ‘Parallaxis’, which means ‘alteration’. The parallax effect is an amazing effect in which different elements scroll along different lines on a website. This effect creates a fascinating faux-3D effect.

jQuery Scroll Path