Nov 15

Web Design Trends: Testimonials Design

Testimonials from happy clients are an important part of any service business’s website, lending trustworthiness and experience to a business. Showing those testimonials in their best light is important, as you want visitors to see them without allowing them to dominate your site’s design.

One great way to figure out how to design the testimonials on your own projects is to look at how others are doing it. There are five predominant trends in testimonial design: speech bubbles, quotation marks, images or icons, minimalism, and video. Read on for information about and examples of each, and some bonus best practices at the end.

1. Speech Bubbles

Speech bubbles create an informal, friendly atmosphere in website design. Some sites use them to surround the entire testimonial, while others might use them around an image or as an icon. In any case, they immediately set apart the text or image inside, and make it recognizable as a quote from someone.

Webfusion in Web Design Trends: Testimonials Design

Mediatemple in Web Design Trends: Testimonials Design

Chromatic in Web Design Trends: Testimonials Design

Base6 in Web Design Trends: Testimonials Design

Lifetreecreative in Web Design Trends: Testimonials Design

Bravenewcode in Web Design Trends: Testimonials Design

2. Quotation Marks

Quotation marks are another way to indicate that nearby text is something someone said, and are a bit more formal than speech bubbles. They’re more appropriate for corporate sites when done in a traditional font, though using funkier fonts can make them look informal and fresh.

Veratta in Web Design Trends: Testimonials Design

352media in Web Design Trends: Testimonials Design

Freeagentcentral in Web Design Trends: Testimonials Design

Merixstudio in Web Design Trends: Testimonials Design

Spyrestudios in Web Design Trends: Testimonials Design

Delugestudios in Web Design Trends: Testimonials Design

Iceberg in Web Design Trends: Testimonials Design

Districtsolutions in Web Design Trends: Testimonials Design

Perfectweb in Web Design Trends: Testimonials Design

3. Images, Icons, or Other Graphic Elements

Displaying an image next to each testimonial is a popular trend in testimonial design. The image could be a photo of the person who gave the feedback, the logo of the company the work was completed for, or an icon or other graphic element that sets the text apart from that around it.

Freshbooks in Web Design Trends: Testimonials Design

Paintyourlife in Web Design Trends: Testimonials Design

45royale in Web Design Trends: Testimonials Design

Mikeprecious in Web Design Trends: Testimonials Design

Newsberry in Web Design Trends: Testimonials Design

Cutelittlefactory in Web Design Trends: Testimonials Design

Adrianrestantia in Web Design Trends: Testimonials Design

Xero in Web Design Trends: Testimonials Design

Simpleflame in Web Design Trends: Testimonials Design

Ohmedia in Web Design Trends: Testimonials Design

Goodbarry in Web Design Trends: Testimonials Design

Oxidev in Web Design Trends: Testimonials Design

4. Minimalist

A lot of sites display their testimonials using a minimalist style, usually with plain text, often italic, set near other text blocks of similar shape and size. This is the most subtle method of displaying testimonials, and works best on a site that has a minimalist design, otherwise the testimonials can get lost on the page.

Jive in Web Design Trends: Testimonials Design

Squarespace in Web Design Trends: Testimonials Design

280slides in Web Design Trends: Testimonials Design

Campaignmonitor in Web Design Trends: Testimonials Design

Electricurrent in Web Design Trends: Testimonials Design

Momentum18 in Web Design Trends: Testimonials Design

Inhouse in Web Design Trends: Testimonials Design

5. Video

Video testimonials are a fairly new trend, and make a lot of sense for sites catering to tech-savvy clients. Video testimonials add another layer of trust that straight text doesn’t have; people will naturally trust hearing and seeing someone vouch for a product or service — rather than just reading about it. After all, as far as the visitor is concerned, your testimonials could be fabricated. Video is a lot harder to fake.

Basecamp in Web Design Trends: Testimonials Design

Convergys in Web Design Trends: Testimonials Design

Clover in Web Design Trends: Testimonials Design

Webpagefx in Web Design Trends: Testimonials Design

Fastservers in Web Design Trends: Testimonials Design

Biersdorf in Web Design Trends: Testimonials Design

5 Best Practices in Testimonial Design

Integrating testimonials in your website design follows the same rules as integrating virtually any other text- or image-based content. But there are additional things to remember when adding a testimonial section to a website.

Adhere to the rules of good typography.
There are plenty of articles that offer tips for improving the typography in your website designs. Pay attention to them as you would for any other element on your site.

Make your testimonials stand out.
Don’t just put a couple testimonials on your about page or in your footer; do something to make them stand out and grab people’s attention without cluttering your design. You want your potential customers to see what your happy customers are saying. You can accomplish this through color, icons, or through prominent placement on your pages.

Correct grammar and spelling.
Although you wouldn’t make content changes, it’s perfectly acceptable to correct any grammar or spelling errors in testimonials given to you by your clients. This will ensure the testimonials look and sound professional.

You don’t have to use the entire testimonial.
Nothing says you have to quote an entire testimonial on your site. While being careful not to alter the overall impression the testimonial gives, it’s often preferable to shorten a lengthy message. The proper way to do this is by only quoting one or two lines, in context, that show your business in its strongest light.

Always ask for permission to use a testimonial.
In many locations around the world, you’ll legally need permission to use a testimonial from a client. Even if you don’t need it legally, it’s the polite thing to do. Most satisfied customers will be happy (and even honored) to let you use what they’ve said about your company to promote yourself. And especially ask permission if you want to use a photo or the logo of a client, or if you want to include their name and company along with the quote. After all, you want to keep your happy customers happy!

Further Resources

Showcase of Testimonials in Web Design
A gallery of great testimonial design from Vandelay Design Blog.

(ll)

Tags: ,

51 Responses, Add Comment +

  1. Mathew Carpenter 15 November 2009

    Some awesome designs listed. Great source of inspiration.

  2. Jordan 15 November 2009

    Nice examples of testimonial design. I find speech bubbles work well in addition to a photograph of the individual giving the testimonial. Of course, one should use caution when using stock photography and not choose a photo that’s widely downloaded and seen everywhere.

  3. Waheed Akhtar 15 November 2009

    Very nice examples. Its always good to have video testimonials.

  4. Dzinepress 15 November 2009

    excellent ideas there with design inspirations where we get better ideas.

  5. Gerhard Jansen 16 November 2009

    This is a great inspriration on how to style testimonials. The best imho is the first one, the combination of the speech bubble and an image.

  6. Logo Bliss 16 November 2009

    Some great examples.

  7. Dusan 16 November 2009

    Nice article about often neglected part of the web page design. Btw, that Fiona Merveille is super cute!

  8. Mirko 16 November 2009

    I find that the use of videos for testimonials adds a lot, I’ll consider it in the future.

  9. designfollow 16 November 2009

    very useful

    thanks

  10. Mark Garwell 16 November 2009

    It’s amazing how a picture can make a testimonial so much more powerful.
    Thanks for taking the time to create an excellent resource.

  11. digital design 16 November 2009

    I think it is best to make more of a feature of quotes so that people can see and visualise them. People sometimes look for them and purposefully search in google for them so it makes sense to have them easily seen.

  12. Chris 16 November 2009

    Found some great examples in the post. Thanks for that!

  13. Amy 16 November 2009

    Do people actually read Testimonial pages? As a user, I never do because I expect the company to post only good things about themselves.

    • Wiz 16 November 2009

      While I actually agree with you about never reading testimonials myself, it’s important to understand not all companies use false testimonials to promote their products/services. Some users actually do want to read what “other” people had said about the product/service…

      The best response would be what reason would you have for not including testimonials other than not wanting to spend the time to create the page/design for them?

    • Lucian 16 November 2009

      You don’t have to create a testimonials page. You can integrate those throughout the other pages, especially on the home page.

  14. Catherine Azzarello 16 November 2009

    Nice roundup with good variety. Thanks for the testimonial research.

  15. Federico 16 November 2009

    electricurrent stands out imho

  16. Eric Putkonen 16 November 2009

    Great article! Testimonials are such a powerful thing.

    My focus is video testimonials…as producing them is a part of how I make a living. In video, it is important not to make a “cheerleader” kind of video – just saying your company is great or the best thing they have seen since sliced bread. “Case studies” work much better. How they found you, why they were looking and needed you, what was done, what was the result, etc.

    People love to hear stories…and the video should covey a story – your clients story about how you helped them.

  17. Design Informer 16 November 2009

    I definitely think that Testimonials is an important part of a web design, especially for someone who offers services, such as a freelance web designer. This is a great post that we can refer back to when creating our testimonials section.

  18. Edison rao 16 November 2009

    Great, a very cool navigation

  19. Michael Lajlev 17 November 2009

    Great examples on stylish testimonials.

  20. Webanddesigners 17 November 2009

    Good inspiration for testimonial layout. Thanks noupe

  21. Nikhil 18 November 2009

    Really nice collection!
    Actually some of them are just awesome….

  22. wien 22 November 2009

    nice post, there was some great examples
    very helpful, thanks

  23. Boris Nefyod 22 November 2009

    Great showcase, thanx!

  24. Ajay 22 November 2009

    Great examples! Thanks.

  25. Simon 14 December 2009

    Good post. I think the more eye candy (within the context of usability) you have better chance of usage.

  26. Diana 18 December 2009

    Nice examples…thanks a lot for this post!

Trackbacks

Leave a Reply

Comments are moderated – and rel="nofollow" is in use. Please no link dropping, no keywords or domains as names; do not spam, and do not advertise!