+44 (0) 845 260 0726

Pixl8

You are:

  • Home
  • Blogs
  • The 8 web design trends you need to know about in 2013
  • | Share

The 8 web design trends you need to know about in 2013

The 8 web design trends you need to know about in 2013

Jonathan McLellan   Posted: 13 February 2013

Can you believe we're half way into February already!?  2013 is certainly whizzing past at a rate of knots and isn’t showing any signs of slowing down, just like the ever changing landscape of the web design world.  Because of this, it can be a real challenge to keep up with the latest trends.  This is why we thought it useful to list out some of the coolest and most innovative website design features we’ve come across recently (yes, we need to take heed too)

1. Single page design
 

SIngle page web design exampleNavigating around websites with loads of sections can be frustrating, especially when the content on every other page adds up to merely a few lines of text.  This is where the genius method of single page design comes in.  Rather than splitting a section’s content over multiple pages, a section instead has only one page, which is split horizontally into content areas.  Clever use of anchors ensures users can easily navigate around.

Single page web design examples:

- cageapp.com

- pitch.csspiffle.com  

 

2. Fixed navigation
 

Fixed navigation web design exampleWhen reading a long blog post or browsing a single page design (as explained above), it can be a real pain having to scroll all the way to the top to continue navigating around the website.  Not to worry, this problem is easily solved through the use of a fixed navigation bar.  This way the primary navigation is always subtly accessible on the screen no matter how far down the page you’ve ventured!

Fixed navigation examples:

- happycog.com

- hardgraft.com

 

 

3. Lazy loading / infinite scrolling
 

Lazy loading web design exampleMaking your audiences wait for pages to load not only ruins the user experience of a site, but will also negatively affect your SEO efforts (due to the introduction of Google Panda which takes load speed into consideration when ranking your website).  So what do you do when you want to display a long list of content with images?  Content could be split across tabbed pages, forcing users to click repeatedly to browse.  Although a better alternative is to implement lazy loading:  So a given number of items is displayed, when browsing to the bottom, a new set loads automatically below. 

Lazy loading examples:

- Pinterest.com 

- Soup.io 

4. Mega drop down menus
 

Mega drop down web design examplePrimary navigation has come a long way over the past few decades.  First vertical, then some clever clogs had the idea of making it horizontal, to provide more screen real estate for content.  Having a multiple sections made it difficult and time consuming to find what you’re looking for, so people started using drop downs enabling users to browse sub-sections on hover over.  Today see’s the rise of the ‘Mega drop down’, larger, often full width drop down panels that can provide even more information on each section such as related or featured content.

Mega drop down examples:

- renewableuk.com

- nationalgeographic.com

 

5. Oversized buttons and giant text
 

Oversized buttons and text web design exampleAs computer screens and their resolutions have increased, so too has the space that websites are able to utilise.  This has meant that text can now be larger with more line spacing and increased padding between images.  These changes allow content to breathe, making a website more inviting by improving readability (great in terms of accessibility too).  In turn, buttons and calls to action have also been ‘supersized’, helping to increase conversion rates (and useful when it comes to responsive design considerations for mobiles with smaller screens).

Oversized buttons and text examples:

- new.myspace.com

- mailboxapp.com

 

6. Enormous photo backgrounds
 

Big photo background web design exampleThe phrase “a picture tells a thousand words” can be so true.  This is why so many organisations (especially those with consumer focused and brochure websites) are ditching bland single colour / gradient backgrounds in place of stunning, eye catching photography.  Although one needs to be careful and keep file sizes to a minimum so as to ensure fast load times, when the photography is relevant it can be extremely effective.

Enormous photo background examples:

- join.me

- cappellosglutenfree.com

 

7. Responsive design
 

Responsive web design exampleWith the evolution of smartphones and 3G technologies, users are accessing web content via mobile devices more than ever.  Responsive design allows you to have one website that is capable of recognising the size of the screen it’s being viewed upon and adapts its layout accordingly, reducing its width, making images smaller and buttons more ergonomic.  Therefore no need to host and edit two websites anymore!

Responsive design examples:

- optical.org

- docet.info

 

8. Parallax scrolling
 

Parallax scrolling web design exampleThe demise of Flash (thankfully) has given rise to the mobile friendly alternatives of HTML5 and CCS3.  With this shift have come new ways to provide fun, inspiring and animated websites.  Parallax scrolling is one of the hottest methods today:  It involves using multiple backgrounds that are cleverly overlaid so as to give the impression of animation and depth when scrolling down a page.  Unneeded use of this technique can slow down a site and seem a little naff, however when used appropriately it can make a visit to your website truly memorable.

Parallax scrolling examples:

- meethue.com

- bagigia.com

 

I think that just about covers it for now!  If you have any other web design trends you’ve come across recently and want to share or have questions on those above, don’t be shy, please comment below or drop us an email

  1. Bookmark & Share :
  2. Delicious
  3. Digg
  4. Facebook
  1. Comments (0)
  2. 11820 Views