30 Awesome Website Designs Based on Large Photographs

Kalpesh Singh

Web Design trends can change faster than the time it takes your coffee to cool down. Just kidding.

Somewhere, someone is always putting effort into making new design trends. The use of large scale photography is one of those trends that arrived in 2013. Large photographs not only provide a good contrast but also their message is clear and appealing.

Why Large Photographs?

It provides a pleasant visual experience to the eyes and eye catching photography has an impact that is hard to match. We should not forget the scientific fact that our brain processes images 60,000 times faster than reading text.

Images with impact can be important to make a vivid and memorable website. When you use a large photograph effectively, the photograph turns the website into a simple but yet beautiful web design. One thing you should remember is that the use of large photographs will make your website visually congested so make sure that other elements complement the images.

3 Common Mistakes to Avoid When Dealing With Large Photograph Websites

  1. Battle with different sizes: Resolution is a term associated with every type of design but it becomes entirely necessary to understand when using larger photographs. You have to test with different resolutions and take into account the width of different browsers.
  2. Loading Time: Using large photographs with high resolution and good quality will increase file sizes. This will increase your load time significantly. Use Firebug or similar plugins to get hints on how to optimize your website.
  3. Wrong Format: You may face loading issues because of poor format selection. Choose the web standard formats such as JPEG, PNG and GIF to avoid long loading times.

    The Websites

    Note that clicking each image below will open the target website in a new tab or window.

    This is paper
    Thisispaper has a strong background slide shows that represents the service they offer and their background is catchy and innovative.The slideshows provide more flexibility to the website.

    Olé Soiree
    At first glance, you will see only one photo background but when you use the slider provided, you are actually producing a combination of two photo backgrounds. The website is full of CSS and jQuery.

    Code42
    Code24 not only uses multiple photographs that slide after a fixed time interval, but also provides space for a menu. They have written their tagline on the semitransparent rectangle with perfect use of color that makes the text completely visible.

    Falvé
    Falve is a multipage website that has nothing on the landing page except a slider of images and a clean menu on top. This is probably to provide more space for the photographs.

    Uber
    Uber has smartly played with large photographs and each element complements the design. Here also you will get multiple photographs that are fashionable and at the same time represent their product.

    Little
    The Little is a brand design firm based in Minneapolis that used a building photograph with a brand name top of it. Such types of large photographs take the agency and client relation to the next level and reflect the promising attitude of the agency.

    Mah Ze Dahr Bakery
    The Mah Ze Dahr Bakery is another single page wbsite as creative as their tag line. On the home page you will get some nice lines with every slide. At each scroll the background photograph changes. One thing you will notice is that there is no home link – the logo plays the role of the home link.

    Helvetitee
    Creativity at its best. So far, you have seen websites with large backgrounds, here is the custom tee designing web application that provides you the freedom to design a tee, choose size and place order right from the landing page.

    Big Cartel Shop
    To avoid the visibility issue Big Cartel has used their navigation on whitespace unlike other websites that place the navigation on the photograph. One thing is sure that all large photograph websites are using some text on their photographs. Make sure the fonts are extraordinary but not fancy.

    Motel Studios
    The purpose of including this is to show you how a great website will become worse when you use odd fashion fonts. Though the website has made proper use of the photograph, the fonts seem uneven or at least not what we are used to seeing on regular websites.

    Kenley Event Design
    Here Kenley Event design has used the focus of the photograph. As they are a planning company they have focused on serving. The moment you click on scroll, the CSS plays its magic and makes the website more attractive.

    Square: Careers
    Square website is creatively designed: a worthy inclusion on this list. At each scroll you will get something new to the photograph that offers a nice mood to the website.

    Niedlov's Breadworks
    Niedlov’s Breadworks is a single website with no navigation menu. The navigation menu is replaced by an arrow. With the help of the arrow you can scroll down and up.

    Let's Travel Somewhere
    Let’s Travel Somewhere is a responsive travel inspiration blog which attracts visitors with their high quality large photography background. Each photograph fits perfectly in your browser window. So remember to make your website responsive too.

    Daniel Hopwood
    Daniel Hopwood is a single page website that has a navigation bar at the bottom of the photograph. Though it is unusual, it perfectly suits the website.

    Jack Trench
    Jack Trench has an interesting setup of the website. Designers have perfectly focused on what to show to viewers. So one more advantage of large photographs is that you can be focused on what to show and what is worthy to display.

    Gardener & Marks
    As they offer interior decoration their background implies this. At first glance, the logo looks like a board on the wall. The menu is well placed.

    McDonalds
    One of the uses of large photographs is to shout out about a new product or service. In this case, McD perfectly promotes its new food item. So it is a technique the designer can use in creative ways.

    Culinaria
    Use of photography is most common among food, travel, personal portfolios etc. Keeping a mouth-watering photograph really gains a bonus point for the food industry. This overall design will inspire the designer who wants to design a food website.

    Acquavella Galleries
    Not only does Acquavella Galleries feature an attractive and beautiful photograph but also its simple look and font styles complement it. It is a good inspiration for designers who are looking to design portfolio and gallery websites.

    McLellan Jacobs
    McLellan Jacobs sells kayaks (a small single person boat) and to gain attraction they have taken advantage of the large photograph to show their product with the most adorable natural background to show and give you the feel of the product.

    MailChimp Annual Report 2012
    MailChimp is an email marketing service which used large background so creatively that it makes it worth staying and reading their annual report. The website tells a story of their last year activities in detail. The story begins with a large photograph with text, a look back and when you finish reading report the last photo will say Thanks. So here we learn that if we effectively and creatively use large photograph backgrounds then we can take it to another level.

    Bonjour mon coussin
    Bonjour’s multipage website has set the best example of creative work with photograph. The pillow is in order from big to mini with the size label on top. It also features a scale (at right side) to make the website more trustworthy.

    Werkstette
    I fall in love with Werkstette. They have perfectly mixed every effect with a navigation bar. Let’s talk about semitransparent navigation bar which is perfectly positioned at the center. There is an option at the right side of the navigation bar to view the website in full screen mode (I have never encountered this before). Not only this, when you click on Gallery the navigation bar will move down and after a fraction of a second, it will hide automatically.

    Tapada Nacional de Mafra
    Tapada de mafra is shows a Portugal Park entrance photograph that is truly inviting and welcoming. Nothing can be better than to show entrance of a park or some prime location of the park on the landing page to attract visitors.

    Marlous de Roode
    It is not necessary to feature only one large photograph on the landing page. In this style you not only get space to show different products but also you can show products from different views. Marlous de Roode proves this by showing fashion accessories from different angles to give you complete visual range of products from different sides.

    Lula designs
    Adding full page slide shows to serve collections of your jewelry, designs, interiors and photography portfolio is becoming trendier. Lula design is a perfect example for those looking for showing collections.

    The Greats Brand
    The use of large photographs is one thing but when you mix some more ideas into in, it becomes more useful and informational for the user. When you place the mouse over any of the images you will get some additional information.

    Bench
    Here, Bench.co used their office workstation behind a professional. As you land on their website you will get a transparent menu with perfect use of fonts. As you scroll down the menu will become opaque and stick to the page. Here the designer has effectively played with navigation.

    Laurent Perez Del Mar
    This is a single page website with transparent navigation menu. To give a personal and professional touch to the website, Laurent has used his office photograph as background. He has perfectly placed the navigation menu at the center of the page as the navigation bar, commonly seen either at the top or center in large photograph.

    What About SEO?

    The arguments about whether content is king are never ending and everyone has their own views on it. We cannot conclude anything from these arguments. But we cannot rule out that text content is more important for a website than photographs. Text content is the oxygen of your website.

    Colin Alsheimer, Senior Digital Manager at Weber Shandwick in Dallas, suggests that you use a minimum of 300 search friendly words for your website. I would also suggest you never use Flash for slideshows on your website because it is outdated technology and it is very difficult for search engine spiders to crawl and index. Go for jQuery and CSS, they have many advantages over Flash.

    Conclusion

    The reason behind this popular trend is that designers can play with depth, focus, contrast of photographs. It not only sets a good mood for the website but also provides relevancy with the niche of the website. This trend is getting wider and wider, day by day as designers experiment with animation and video, too. I would suggest you to use ONLY high quality photographs otherwise it will down your website in no time.

    I hope you have discovered something new in this article. Let me know what you think about the use of large photographs as website background.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Mats Svensson

    Many of those sites look like shit & functions badly in portrait.-mode.

    This design also works badly on high resolution screens.

    The last thing i try when being presented with a mostly empty waste-land of a first page, is to try scrolling to see all the content.

    • HenriHelvetica

      Tough crowd. Mats, after denying these sites a passing grade, could you do the community such a favour as to posting a few links to sites you regard as A+ scores, w/ some very short commentary to back your reasoning? Something that offers that perfect balance of design & usability. We could all benefit from it I’m certain. cheers!

  • http://webdesignspider.com/ Samiur Rahman

    I completely failed to realize the importance of creating such websites.
    If the website owner is an artist or something like that, its just OK.
    But anyone other than an artist (like web-designer, engineer, banks and others) need a solid information based website and not a dumb site showing just images. We can show images on facebook and Google plus.

  • Kevan Pegley

    Pictures are all very well, but people do actually still need to read a few words. So it’s probably a good idea to get the typography right too. The very first site in your list of “30 Awesome Website Designs”, for Thisispaper, manages, on the first page, to misspell “Issue” and to hyphenate their own brand name “Thisispaper”.

    Needless to say, I didn’t bother going any further.

  • James Edwards

    There are some really nice designs there. I wouldn’t shy away from the importance of text content (just as I wouldn’t pay much attention to what SEO “experts” think), but I agree with your conclusions about how large photographs can create a mood, and a sense of quality and impact.

    They say a picture speaks a thousand words — which is just as well, if it takes a thousand times longer to load :-)

    • KalpeshSingh

      Hi James,

      Thank you for your comment.

      I agree that it will take time to load,but the rapid improvement of Internet connection allows to transfer more data so this issue will soon minimize.

      • James Edwards

        That’s what we said when broadband first came along … and what actually happened is that images and websites got larger.

        We used to say that a single page shouldn’t be more than 1-200K, but now it’s not uncommon for a page to be 1MB. In another 10 years I won’t be surprised to see 10MB pages.

        The more we have, the more we want, that’s just human nature. The best thing to do for pages that need large images (especially home pages) is to minimize everything else — e.g. don’t load scripts or stylesheets for content that doesn’t appear on that page.

        • KalpeshSingh

          Yes,we have to eliminate unnecessary scripts and other things that make website bulky.

  • http://www.colinalsheimer.com/ Colin Alsheimer

    Hey guys… appreciate the quote! Sadly I no longer work for LevelTen. Would love if you could update to my current position… Senior Digital Manager at Weber Shandwick in Dallas. Thanks!

    • http://sitepoint.com/ Ricky Onsman

      Thanks, Colin. That’s updated.

  • Daniel Smith

    All of the above sites will be completely useless for SEO. At the end of the day, they are gimmicks. For artists, photographers and other creatives they work. However, large companies will never adopt this approach, unless they are advertising an individual product (i.e. Like Tillamook).

  • KalpeshSingh

    Hi Marie,

    Yes,It is true.Many of large photography websites fail to use simple and different color fonts. I have emphasized it on several places in the article.

    The one reason behind this is color of photograph. Like Mahzedahr Bakery has white color photograph and white color menu.

  • KalpeshSingh

    Thanks for the comment.

    I agree. It will definitely enhance.