Menu

Excellent Examples of Using Photos in Web Design

Advertisement

Excellent Examples of Using Photos in Web Design

Using photos as a design element and central piece in a web design is a great way to get a point across to the viewers or to just add more depth into the design. We are going to look at some examples of two popular ways of using photos in a web layout: using a large photo as your background and using a photo as the central focus in the header.

Using Photos in the Background of a Web Design

Using a photo as a background can give your website an added visual element, as well as depth and space. On the other side of things, if the photo is poor quality or unappealing, it can bring down the entire look of the web page. So not every photo will work, but if you get one that does, it can really make the website stand out.

2K Games

2K Games

Alley Pfannkuchen

Alley Pfannkuchen

The Bow Valley Club

The Bow Valley Club

Change Given

Change Given

Eurostock Investimentos

Eurostock Investimentos

Firefly Photography

Firefly Photography

Because It’s There

Because It's There

joshhemsley.com

joshhemsley.com

Mission First

Mission First

PRO FOODS

PRO FOODS

Property Pass

Property Pass

Radim Kurka

Radim Kurka

Raffaele Catania Designer

Raffaele Catania Designer

Rich Brown

Rich Brown

Solegiallo

Solegiallo

thesixtyone

thesixtyone

Using Photos in the Header/Masthead of a Web Design

Another popular usage of incorporating photos in a web layout is by including them in the header/masthead section. Doing this can get across a visual element to attract people to your website, as well as give the viewer a sense of what you are trying to show them while not overwhelming them with an oversized photo. While a photo within the header probably won’t stand out as much as using it as a background, it can be a nice feature to work the rest of your website around.

AD60

AD60

Arnbäck Training

Arnbäck Training

Bethany Care Society

Bethany Care Society

Breezi

Breezi

CapGrow

CapGrow

Duchy Originals

Duchy Originals

Emerald City Guitars

Emerald City Guitars

Fezzari

Fezzari

Hurco

Hurco

HYBRIDWORKS

HYBRIDWORKS

invisibleBracelet

invisibleBracelet

Iron Fist Clothing

Iron Fist Clothing

Island Dentistry

Island Dentistry

Life’s Not Fair But… My Knickers Are!

Life's Not Fair But... My Knickers Are!

Matt Cronin

Matt Cronin

Max Tillich

Max Tillich

Nick Cates Design

Nick Cates Design

Omid for Iran

Omid for Iran

Sigma

Sigma

Deep Standard

Deep Standard

What do you think about using photos in web designs? What benefits and disadvantages does this have?

Related Content

About the Author

Tyler Denis is a part-time freelance designer from Ashland, New Hampshire. He is also the creator/writer of the design blog Denis Designs/blog, a website dedicated to bringing quality tutorials and inspiration. You can follow him on Twitter or at his personal site, Denis Designs.

This was published on May 7, 2010

48 Comments

Some fantastic examples there, I especially like Alley Pfannkuchen’s site. I think now CSS3 is creeping in and we can use transparency with just using code, full photo sites are becoming more popular and will very quickly be trending!

moabi May 07 2010

very nice article…

Askar Sabiq May 07 2010

fantastic, but full photo sites break the bandwidth..

TomPier May 07 2010

great post as usual!

Inspirationfeed May 07 2010

Nice collection!

I’d have to say it’s a great collection. I read a lot of these “lists” each day for inspiration and most of the time, it’s recycled garbage, but I’d have to say this post showing the usage of photography as the basis of your Web site design is great.

Matthew Heidenreich May 07 2010

some great examples. Thanks.

nacho279 May 07 2010

Excellent post! first time here but… not last! congrats!

Heather Villa May 07 2010

You are right on the money with this one. I have seen some really great blogs with some not so great photos and it really just kills the impact of what you are reading.

Gavin Barrett May 07 2010

See http://jabberdust.ca
Another example of a big picture approach to web design.

Kyle Pouliot May 07 2010

I respectfully disagree about “full photo sites breaking bandwidth.” There are exporting and optimization methods where you can decrease file size and present large photos as a div background.

Claudia May 07 2010

So lovely!
I like this showcase, makes me think twice about the use of photos in some websites I have to manage!

Thanks =)

This websites are very beautiful, but only for default resolutions!

Great showcase! I think using photos is a powerful way to be fresh and personal. It brings more life into your website.

Thanks for this inspiring post

Jesseca May 07 2010

I spent about more than 5 minutes browsing at these impressive websites. Thank you so much for inspiring!

Alex Flueras May 08 2010

Photography and web design goes so well together and these examples clearly shows it. Great article.

larry May 08 2010

Kyle you are one percent correct. Full photo breaks nothing! I have used JS that easily makes it wok great without a crawling issues. Great post and very inspirational. Always try to break typical thought with great design and GREAT coding. The two can go hand and hand!

larry May 08 2010

Ok 99% plus 1% = 100% LOL

Webdesign Geneve, Too Pixel May 08 2010

Hey thanks for featuring one of our creations! (cf. Arnbäck Training)

Yojen May 08 2010

Using photos as a design element is great but using a big search zone in a web design is great too. See http://yojen.com/ share your emotions as an good alternative to breaking bandwidth with a call to action for search. What does Google? Other examples are welcome!

Walter May 08 2010

Nice collection! It’s nice to see that broadband has had a huge impact on webdesign. A couple of years back we preferred tiny pictures in order to improve the site’s speed. With Google now honouring quick website speed we may go back and reduce images again…

Some of these look amazing, great inspiration.

Great article!

I think we can add this site :)
http://www.lesgalantes.com

WebDesignerDelhi May 08 2010

@ Walter : Ya quick website is good but if your site doesn’t attract the visitors then what is its use .. so i definitely go up with this post .. great work

Great inspiration source ! “One picture is worth ten thousand words”

Adrian May 08 2010

OK, one more site to add to the list :) http://citytag.com.au

pimeo May 08 2010

Most of these web sites can be seen on http://www.cssmania.com
A very good web site which includes what is made of better in web site last generation. A good resource to have for the persons who looks for of the inspiration.

Good post.

Michel-Ange May 09 2010

This website uses also pictures for its design : http://www.le-bk.fr

Jill C May 10 2010

Some great inspiration here! Definitely some unique uses of imagery!!! Thanks for the great post!

Mark James May 10 2010

Great collection of websites!

Maverick May 10 2010

these websites really look beautiful. great impact.

Dzinepress May 10 2010

as my experience most of these kind websites design in flash, because static website may heavy due to these kind of hi-res images which are using as background, but you sharing really beautiful inspirations. thanks

robert May 10 2010

WoW, Nice…Very Nice Article and some Great Inspiration

McConnell Group May 10 2010

I have been thinking of doing a large picture background for a real estate website, These are good take aways

Rochelle Dancel May 10 2010

Nice post.

A suggestion for a future post might be a how-to on best practice when it comes to implementing full screen / big photo backgrounds…?

Cheers!

Tim Read: Ripplenet May 10 2010

Yes, thanks for that. But you’ve got to watch out for different resolutions as erik says above.

Jordan Walker May 11 2010

I like the collection, image size could be a problem for DSL visitors.

Kelly May 11 2010

Great post – gets the creative juices flowing!

guci0 May 12 2010

Excellent list, great websites.
Good work! Best regards!

Kyle Pouliot May 13 2010

Absolutely, Larry…You can have an amazing design that contains great user conversion, but part of the user experience is to capture attention within the first 7-10 seconds of the visit. If it takes longer than that to load your site, you might just lose a visitor. Code your beautiful creations wisely, it’s important for usability.

Food for thought at least!

Ignacio May 16 2010

Wow, my design is here and my client never told me. This suck. I want my credits!

Nice examples. A common theme with the pictures is most are of people. I believe that helps make a personal connection and something to think of when deciding on what pictures to use.

Urviho Jul 19 2010

Nice inspiration :)

CedricSoubrie Aug 20 2010

Yeah, nice inspiration ! Omid For Iran is just stunning

ALLOVE Nov 12 2010

the pictures are simply well fit in! kip on with the good job!

Jasmin Halkić Jan 14 2011

Very nice design, great article!

Gabriel Ortiz Mar 07 2011

This type of design gives a touch of elegance to the web sites

Mohit May 01 2011

I admit that I am annoyed with myself on checking this great post now. This is an awesome collection for some good inspirational work.

This comment section is closed. Please contact us if you have important new information about this post.

Advertisements
Partners