Jessica Kriklewicz Team : Design Tags : Web Design

Blurred Backgrounds in Web Design

Jessica Kriklewicz Team : Design Tags : Web Design

Full size background image sites have been popular within the web design community for a while now as the speed of our internet connection goes up.

But there is an increasingly popular style that is emerging, if done right then can have profound effect on the design.

It is the very large blurred background image. You see more and more of these sites popping up every day.

Partnered with bold typography or selected focus on a particular object, this style can help the aesthetics of the site. 

When combining typography and photography, blurring the image will increase the readability of the text. Here are couple of techniques to help when combining large background images with content.

  1. Don’t Take Away from the Content 
  2. Apply a Slight Vignette 
  3. Mix of Fixed and Liquid Graphics: Parallax Effect 

 

These are a few good examples of how web designers use blurred backgrounds effectively in their web designs:

 

https://do.com/

 

http://hipstamatic.com/ 

http://www.awwwards.com/web-design-awards/smoking-takes-lives 

http://noe-interactive.com/