Could This New Web Design Trend Be Right for Your Brand?

by 22 05/27/2013

Most businesses want a website that gives their company the most credible online presence possible. Which makes sense.

Customers are affected by how a company’s website looks in the same way they’re affected by how a salesman dresses. If a salesman’s shirt is untucked and shoelaces are untied, they’re not going to be taken as seriously as someone whose appearance is more professional.

This goes for websites as well.

But it’s not enough for a website to just look great—it also needs to convert traffic into leads and sales. It needs to be laid out in a way that directs visitors down the right path and answers the right questions so they end up buying what’s being sold.

The point is, to be successful, your website must be attractive enough to inspire confidence in visitors AND be laid out in a way that persuades them to buy.

Think it’s impossible? Not at all.

There’s a new website design trend that accomplishes both tasks. Let’s talk about it now.

The secret weapon for designing a beautiful and effective website

How do you make a website both beautiful and effective? Use large photos as theprimary design component for the homepage.

Here are some examples.

Onboardly

Onboardly Homepage Design

Google Ventures

Google Ventures

Charity Water

Charity Water

Square

Square

Sotheby’s

Sothebys

In all of these examples you see a beautiful photo used as the main background image to create an aesthetically pleasing design that captivates visitors and draws them into the site.

After that, there’s expertly placed copy that communicates what the site can do for the customer.

Before this design style emerged, most websites only used small photos here and there as a complement to the overall design. Now photos are becoming the main design element on the homepage and other pages. In some cases it’s becoming even the design itself.

So why is it so effective?

It’s effective because it helps sites to look great. Most companies’ number-one branding opportunity is with their website, so they need a design that gives their brand the strongest impression with customers. What better way than with beautiful photography?

The other reason it works is that it connects with people.

As consumers, we relate much more to everyday scenes than to digitally designed pages with no faces and no elements from the real world. Photography adds a level of humanity and reality that’s missing from a 100% digitally drawn design.

But now there’s a really important question to ask: Is this design style actually effective? If you’re an astute internet marketer, business owner, or designer, you want to see some numbers that prove this kind of design is effective.

In other words, will it increase conversion rates?

Vero case study

I recently spoke with Chris Hexton, co-founder at Vero. He said their updated design, featuring a large photo of a person in an office sitting at a computer, increased conversion rates 54%.

That’s an awesome lift in conversions. And while it’s impossible to know exactly how much credit the photo gets, it is sure that the photo-centric design converted better than the previous one.

Other than this, I can’t personally vouch for any amount of conversion-rate magic this type of design possesses, but I can stand behind the fact that these kinds of designs really appeal to visitors. I’ve spoken to multiple people who find them attractive and compelling. And when people like a design, that usually translates into a great brand impression.

(Note: Vero has since changed their design and is currently testing a  non-photo-centric homepage layout. It will be interesting to see how well it performs.)

How to get the most out of this design style

In order to get the most out of this design style, you’ll want to follow a few important guiding principles:

1. Only use professional photos

Average photos taken from a point-and-shoot camera aren’t going to cut it and will hurt your brand image. You need beautiful photos that are taken by a professional.

Photographer2. Make sure the text is easy to read

White text should always be on a dark background, and dark text should always be on a light background. Basically, there needs to be enough contrast between the photo and the text that the copy is easy to read. I recommend paying a lot of attention to this. In the examples above, Square does the best job, and Google Ventures does the worst.

text on backgrounds

3. Arrange the text effectively

Ultimately, the words on your site need to be read if you’re going to make any sales. This means they need to be arranged effectively on the photo so that they’re easy to read. The flow of the picture should also focus the visitors attention on the copy and not distract from the message being conveyed. It’s very important to ensure that the text is positioned on the photo in a way that’s easy to read.

red cross 2

How to decide if this style is right for you

If you’re still wondering whether or not this style is right for you, consider what it is you’re trying to accomplish.

Agencies generally are trying to connect on a personal level so these types of companies will benefit from large photos that feature people. SaaS companies (companies selling software as a service), on the other hand, may need to focus more attention on the product and may benefit less from a photo-centric design.

However, as always, without testing, there’s no way to know which design style is right for you. It’s always good to test a new style like this against your current homepage to ensure that you get a beneficial lift.

If you happen to be considering a redesign of your site and are looking for something beautiful that stands out from other sites and appeals to customers, this style might be just right for you. Consider the points above and talk to your web designer to find out if large, beautiful photography will be a win for your site.

About 

Joseph Putnam is a copywriter and blogger who writes for startups like KISSmetrics, CrazyEgg, SlideShare, Wibiya, Conduit, Rejoiner, and more. He loves the science of marketing and conversion rate optimization.

Get our Daily Newsletter

Get conversion optimization, design and copywriting articles delivered to your inbox FREE

22 COMMENTS

Shawn Gross

Great post! Since monitor and resolution size is all over the place (including Mac Retina display laptops) what are the dimensions that you recommend for this homepage JPG canvas area?
Thx!
Shawn

May 27, 2013 Reply

    Joseph Putnam

    Hi Shawn,

    I’m not entirely sure since I’m not a designer myself. I’d have to ask some of my design friends to get specification recommendations.

    May 30, 2013 Reply

    Lorraine Robinson

    I too would be very interested to know the recommended size for a full background photo. Thanks for the post. I had considered this for my next client’s design and this post has reinforced my choice.

    June 3, 2013 Reply

      Graham

      if your going to use a large photo for your feature element then it has to be hi resolution or when a large screen views it is will pixelate. Mac computers have very high resolution but are not the norm. Most users resolution will be around the 1366 × 768 to 1920×1080 but there are lower resolutions than this. I tend to deisgn the content to fit on a minimum 800×600 fluid layout so that at higher resolutions will the content will spread out and fill the area as intended. If the Background image is intergral to the layout then you should use some sort of positioning to make sure it stays where you want it to. You can use css to tell the background image to resize with the browser window but this can yeild mixed results. If you design the content layout to a minimum 800 width and use a 1920 x1080 image then you should be relatively safe, it will be a trade off between giving the majority the best experience while the minority wont get the full effect. If you get a webdeisnger to deign your site and you tell them you want it to look the same throught out then this can be acheived with more planning and coding. I hope this helps.

      July 9, 2013 Reply

Touch Point

We are also fans of using full-screen images on the home page, and for certain types of businesses and clients, it’s perfect. A full-screen or large image “pops” and it captures people’s attention. A beautiful, professionally-taken image can say a lot about the business instantly as well and draw visitors further in. Good tips, Joseph, on how to do it right. David @ Touch Point Digital

May 28, 2013 Reply

Alex D.

Glad to see my college education did pay off. K.I.S.S. will always be key in advertising and design layout. Simplicity is Key.

May 28, 2013 Reply

Madison

Now if I could just find some templates/themes prebuilt that match this style I’d be happy. I’ve noticed the trend but can’t find a template like it anywhere…

May 31, 2013 Reply

Nancy

Great article Joseph! As a photographer, I’ve been saying similar things but my views may seem a bit biased. As I’m starting to get into web design though, I definitely remain a strong advocate for the use of images, strong use on visual heavy sites and smart/effective placement regardless of the location.

June 6, 2013 Reply

Andrew Ley

Those pages look beautiful…on a landscape computer screen. I’m currently reading this on a mobile however, and not one of this websites looked anywhere near as good on my display.

I agree completely that full-photo websites look stunning. But as the internet moves inexorably toward responsive design, designers need to think long and hard about how to scale this kind of layout to maintain effectiveness at all sizes and proportions.

June 8, 2013 Reply

    Kathryn Aragon

    Nice point, Andrew. We need to think beyond the traditional computer screen when we design and write our websites.

    June 8, 2013 Reply

alexjuvion

Thank you very much Joseph.
Great post on responsive web design.
All the points that you described here are inforamative and amazing.

June 10, 2013 Reply

Joseph Jenkinson

Hey Joe! Just had a client reference your article for me to consider in a redesign for his site. Nice work – you grabbed his attention!

June 17, 2013 Reply

Steve eMailSmith

Hi Joseph…

I’m not sure what happened – I left a well thought comment here a while ago, but it looks like the dark hungry hole of the scary Internet has swallowed it, ha, ha, ha…
So I just wanted to say how interesting this post was at the time and as I cannot remember what I wrote exactly, I was thinking maybe you could dig it out from somewhere?

Anyway, with or w/o my earlier comment, your post is still great – thanks!

Cheers,
~Steve

June 23, 2013 Reply

    Kathryn Aragon

    I’m not sure what happened, Steve. I checked for a previous comment but didn’t see it. Anyway, thanks for trying again!

    June 23, 2013 Reply

Website Design Southport

This is a very nice post and has provided me quite informational tips. I got to know very interesting things through this. I am working on some client’s website and would like to know if you have some themes and suggestions about it. It is an educational site and i don’t have much pictures for it’s background. Please help me if you can. :) thank you..!! :)

July 2, 2013 Reply

Viktor

I have read your blog twice, and its interesting to read. I have never use large photos in my design but now I will try that. Anyways thanks for the post and information.

July 14, 2013 Reply

Taylor Dean

thanks for the ideas. it really helps a lot.

July 18, 2013 Reply

williamberq

I agree Only use professional things to create professional website

September 21, 2013 Reply

Designed2Perform

I completely agree that these websites look stunning, what makes these website stand out is the images used. Without these images they wouldn’t have the same impact. Unfortunaly it’s quite rare these days when you find a client who is willing to spend considerable amounts of money on stock images or hire a professional photographer for the day. We have recenly re-designed our website and have used full screen images.

November 20, 2013 Reply


Leave comment

Some HTML allowed

Get conversion optimization, design and copywriting articles FREE >>>