Unless you’ve been living under a rock for the past year or so, I am sure everyone is aware of the Bokeh effect. This article will showcase the Bokeh effect in web design from bright and bold backgrounds to the subtle black and white. Some even go as far as to make the Bokeh effect animated, which looks really awesome. :)
The thing that struck me was that I could remember (or so I thought) seeing a lot of website designs that utilized this effect, yet when I actually went scouring the web for them – there really weren’t that many. I hope you enjoy them and find some inspiration through them.
Frisk Design ↓
Sebcreation ↓
Squarespace ↓
Vogue ↓
Designed by Dave ↓
Newism ↓
Designphunk ↓
Crush Lovely ↓
Portable Light ↓
Lisa Maya ↓
Webunder ↓
Tierra Virtual ↓
KLAR ↓
Sattom Media ↓
Shawn Leslie ↓
Envato ↓
Zeemi Design ↓
72 Thinking ↓
Bravura ↓
Moonit ↓
PSD 2 Ecommerce ↓
Masérnicka ↓
RiteBrainr ↓
Onvo Media ↓
Constantin Potorac ↓
Roxanne Labajo ↓
DIV Playes ↓
Traffik ↓
Eighty8Four ↓
Unuidesign ↓
Want to make your own Bokeh Design?
Below are links to two tutorials from the awesome Abduzeedo website that show you how to make this effect in both pixelmator and photoshop. The process is actually pretty simple and it turns out some really great results for web designs.
And for those of you DIY-ers interested in creating this effect manually:
What do you think? You think the bokeh effect is overused or one that could be utilized a bit more in the future? Let us know in the comments.
70-642 sample questions by testking provide you exact review of real exam so that you can easily pass your 220-701 and 640-822 exams.
It must be my photography background but I love bokeh in web design. Something about it just makes me happy. Good post.
I recently completed my website and attempted to use this effect, I’m not that great at it just yet, I need a bit more practice!
I recently completed my website and attempted to use this effect, I’m not that great at it just yet, I need a bit more practice! http://www.pixelpleasure.co.za/
Nice collection of Bokeh website designs – my favourite is the Envato design. We also used this style on a recent redesign for Piccadilly Backpackers ( http://www.piccadillyhotel.net )
great collection, thank you.
Found another example: http://new-startups.com/
Awesome collection! Sephora is using the Bokeh effect right now too for their Sephora Claus giveaway website: http://www.sephoraclaus.com/
I really like the effect, i think it’s awesome, however i’ve noticed that without ALOT of attention to detail it’s hard to stand out from another site using the same effect.
Great collection! Love this effect.
@Josh – I like your site design. the wood seems a bit out of place, but other than that, it’s a really clean design. I like it.
@Leon – I like that design and I love the fact that you have the bg stationary when scrolling. Nice job.
@Jay & Sara – thanks for the links. Always love looking at more sites like that.
@Everyone else – Thanks for the comments :) Glad you guys/girls liked the post.
Excellent Collection….
Thank you for the feedback, I’ve been thinking the same thing, I will try something different!
I was expecting to see makephotoshopfaster.com on that list somewhere.
I saw this link on twitter and was hoping I’d see my portfolio listed here and was pleased to see that it was! Great list and thanks for the recognition!
How about this site. Its a very simple website but we used this effect to get some kind of additional design effect for the same.
http://www.forefrontchurch.org.uk/
Sathish Sampath
I happen to drop by this page from a link in SM. Really love this design show case so I guess I’ll be visiting this site again fairly often. Keep up the good job!! :]
Also another one ===> http://www.headup.com
try changing your browser’s width
I didn’t know of the Bokee-effect. Thanks for sharing and enlighten me. :)
I love the oink one with the “K”. That’s also the picture, that catched my eye on Smashing Mag and send me here to investegate that “Bokee-effect” ;)
hi Saram thx for the
http://www.sephoraclaus.com/ realy nice ….
thanks
Mohamed rafi.B
inspiring collection of websites….thanks
Bokeh when used innovatively can produce amazing output and this becomes obvious in the pictures above.
Colors, shade and effects around it comes out so fantastic that it seems more than real sometimes which is worth the effort :)
I particularly liked the friskdesign one, it is so attractive !
Maybe My site can make the next list like this one :) … Thanks for the post!!
Great use of boken effect. Love this collection
I didn’t realise this effect had a name. Thanks for sharing.
Here is another example : http://www.nanetteworkman.com/
A new term today in the work of web development. cheers.
Great examples. Thanks for sharing.
@ Sathish Sampath
I thought I recognised that Bokeh from somewhere, I minimised my browser and BAM there it was! It’s my desktop background which I downloaded from Deviant Art….. http://-kol.deviantart.com/art/Bokeh-116165739 it is one of the wallpapers in the download pack…..
I’m not sure if the artist gave you permission to use it but either way you should at least give the artist credit.
Really beautiful collection – thanks!
No time to read up to see if it’s already been posted, but one of tumblr’s themes uses bokeh!
http://safe.tumblr.com/theme/preview/979
Obviously I’m living under a rock. Guess what: I do NOT need to have to know anything and everything that happens on the web ;)
Alas, still a nice looking thing, but nothing totally new. o2 is using that style for their CI for years now – and in the 70s, this kind of design pattern was rather loved.
cu, w0lf.
I think this style of imagery is fantastic, it adds great colour to our format. However, there are examples here where it just doesn’t seem to work in context which makes a strange, instant semiotics clash in my head without even analysing the website properly.
It’s getting really popular, I see
Nice list, made me think about this one : http://www.charliegentle.co.uk/
Great collection…I impress…..You give best design.i like your picture so much to make good web design.thanks
Here’s another good one:
http://www.razoo.com/
Great collection, I am a big fan of this effect.
Keep up the good work.
really awessome effects. great exemples but where are the tutorials?? i cant’t find them!
Cool post thanks for all the sites, is this not getting cliched to use? but as you say quite hard to find them, guess that’s just perception vs reality!
Yes, it became a trend unfortunatelly…
awesome list! however, Bokeh is getting WAY over used at this point. Design trends are silly and show a lack of original creativity imo. Thanks for doing the leg work on this one though!
Nice collection! Man I am a fan of your site now !
Thanks Mike for sharing such a wonderful collection :)
I think this effect was awsome, but now it’s a litlle bit overused. I’ve used it in some designs and I have seen it in many others (great colection u have here) and my conclusion is that the better way to continue using it is in a moderate way, like this example that u posted:
http://newism.com.au/
There, the effect is much blur than others. I like it.
Thanks for the post. Jon Rivas.
Good collection for inspiration!
Excellent showcase !
Great collection of designs. These could really help on choosing the best web design. Personally I still help from professional. Will this be easier for beginners?
Outstanding web designs, this is the type of illustration that inspire you into creating new ideas.
I just love bokeh :) It looks so amazing in webdesigns. Makes a website look great without being to much. Thanks for sharing these beautiful examples.
Can’t believe I just now came across this post! My favorite is definitely Roxanne Labajo’s site…what a great portfolio website!
Great collection. I’m having difficulty implementing something similar on my site.
Thanks guys. I’ve designed a new version of Sebcreation.com for the 5th anniversary :)
JS Rocks !
Good collection mate , @Afam what is the exact problem you are facing .. leave a message may be some one among of us would be able to solve it
Great post. Excellent sites!
Great collection…