Speckyboy RSS: Spread the Word: Beautiful Testimonial UI Examples

Your latest Speckyboy content is here!.

Speckyboy Design Magazine

Design News, Resources & Inspiration

Spread the Word: Beautiful Testimonial UI Examples


By Eric Karkovack on Apr 27, 2020 10:19 am


Everybody wants to receive positive feedback for a job well done. That’s one reason why so many businesses include testimonials on their website.

Beyond the warm and fuzzy feelings, testimonials can also help recruit new customers. Knowing that others have had a good experience inspires confidence. In all, it’s a happy little cycle that helps to keep business booming.

In terms of implementing a testimonial UI, simple is often better. That doesn’t mean they have to be boring, however. The clever use of color, layout and special effects can turn your testimonials into something that stands out.

Let’s take a look at some examples that will give your testimonials a place to shine.

All Aboard the Carousel

Testimonials are often paired with sliders and carousels for both interactivity and efficiency. A number of examples in our collection utilize them. However, this example is unique in its design. While there are standard navigation arrows at the bottom of the feature, clicking on the client photos on either side will also enable you to slide back and forth.

See the Pen Responsive Testimonial Carousel by Md Nahidul Islam (@thenahid)

Shapes and Rainbows

If you’re looking to add a testimonial section to your page that stands out, it would be hard to top this. First, there’s the animated, color-changing gradient in the background. Second, the use of CSS clip-path makes for an awesome badge-like look on the images. Even with all of that, the UI is still simple and classy.

See the Pen Responsive testimonial slider by hellokatili (@hellokatili)

No JavaScript Required

For all the CSS purists out there, here’s a solution that doesn’t need a single line of JavaScript. While it’s nothing earth-shattering in terms of looks, that’s actually a good thing. It leaves plenty of room for you to style it to match your needs. In addition, this would fit nicely in a relatively small space.

See the Pen Testimonial Slider Pure CSS by MAHESH AMBURE (@maheshambure21)

It’s in the Cards

This card UI is both simple and beautiful. Each card has its own background photo – presumably to use a client’s photo or logo. CSS opacity is used to allow enough contrast to place white text on top. It also encourages the use of smaller amounts of content, which is much easier to digest than a longer testimonial.

See the Pen #1574 – Testimonial Card by LittleSnippets.net (@littlesnippets)

A New Angle

The design is what we’re focused on in this non-functioning demo. It goes to show that simplicity can be really effective. The slight angle on the background photo draws your eyes in, while the generous padding around the quote itself gives off an airy feel.

See the Pen Stripe’s Testimonial Widget in Tailwind CSS by Adam Wathan (@adamwathan)

Hover Quotes

Here’s a different take on a testimonial UI. It’s full-screen, and you have to hover over images to see each person’s respective quote. The look is incredibly sharp and the transitions are smooth. This could be a nice choice for more artistically-focused websites.

See the Pen Testimonial Hover Reveal by Dave Knispel (@daveknispel)

A Different Take

There’s a lot to like in this example. The side-by-side carousel layout makes for an interesting visual effect. Images move to the left as quotes change on the right. Speaking of the quote area, it offers plenty of whitespace and is easy to read. It makes for a package that is anything but typical.

See the Pen testimonial slider , swiper slider by md aqil (@md-aqil)

Color Card

Another prime example of simplicity, this card layout uses a couple of CSS effects to differentiate itself. First is the slightly-rotated quote mark in the background. CSS transform is used to break uniformity – in a good way. Also, the colorful gradient in the footer makes the whole card, dare we say, “pop”.

See the Pen mdJWryR by bradley (@bradleyham)

Beautiful Praise

The whole idea behind collecting testimonials is demonstrating that you know how to make customers happy. For a number of different businesses and organizations, they serve as a key selling tool.

When it comes to displaying testimonials on a website, there are a number of compelling options. The examples above show how the use of color, movement, typography and layout can all play an important role in building an attention-getting UI. It’s up to you to decide which approach works best for your brand.

Want to see even more testimonial UIs? Take a look at our CodePen collection and discover what else designers are doing.

The post Spread the Word: Beautiful Testimonial UI Examples appeared first on Speckyboy Design Magazine.





Recent Articles:

Weekly News for Designers № 537
The Role Design Plays in Your Client’s Sales Funnel
Helping Clients Rapidly Adopt New Business Models
Weekly News for Designers № 536
When I Get out of Here: The Grumpy Designer’s Post-Quarantine Bucket List
Share
Tweet
+1
Share
Forward
Copyright © 2020 Speckyboy Design Magazine, All rights reserved.
You signed up for daily Speckyboy Design Magazine email alerts either via Feedburner or directly through our site.

Our mailing address is:
Speckyboy Design Magazine
27 Braeside Park
Inverness, Scotland IV2 7HL
United Kingdom

Add us to your address book


Want to change how you receive these emails?
You can or .

Older messages

Speckyboy RSS: Weekly News for Designers № 537

Friday, April 24, 2020

Your latest Speckyboy content is here!. Speckyboy Design Magazine Design News, Resources & Inspiration Weekly News for Designers № 537 By Speckyboy Editors on Apr 24, 2020 10:55 am Envato Elements

Speckyboy RSS: The Role Design Plays in Your Client’s Sales Funnel

Wednesday, April 22, 2020

Your latest Speckyboy content is here!. Speckyboy Design Magazine Design News, Resources & Inspiration The Role Design Plays in Your Client's Sales Funnel By Addison Duvall on Apr 22, 2020 07:

Speckyboy RSS: Helping Clients Rapidly Adopt New Business Models

Monday, April 20, 2020

Your latest Speckyboy content is here!. Speckyboy Design Magazine Design News, Resources & Inspiration Helping Clients Rapidly Adopt New Business Models By Eric Karkovack on Apr 20, 2020 08:56 am

Speckyboy RSS: Weekly News for Designers № 536

Saturday, April 18, 2020

Your latest Speckyboy content is here!. Speckyboy Design Magazine Design News, Resources & Inspiration Weekly News for Designers № 536 By Speckyboy Editors on Apr 18, 2020 08:03 am Envato Elements

Speckyboy RSS: When I Get out of Here: The Grumpy Designer’s Post-Quarantine Bucket List

Thursday, April 16, 2020

Your latest Speckyboy content is here!. Speckyboy Design Magazine Design News, Resources & Inspiration When I Get out of Here: The Grumpy Designer's Post-Quarantine Bucket List By Eric

You Might Also Like

The Books AD Editors Can’t Put Down Right Now

Friday, November 15, 2024

View in your browser | Update your preferences ADPro Good Reads Here at AD PRO, we're all about celebrating a good coffee table book. With crisp project imagery and behind-the-scenes stories tucked

What astrology has to do with PR?

Wednesday, November 13, 2024

and, no we won't tell you to read your chart! ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

#482: New Front-End Techniques

Tuesday, November 12, 2024

With high-definition colors, virtual keyboard on mobile, CSS and reliable dialog in HTML. Issue #482 • Nov 12, 2024 • View in the browser Smashing Newsletter Hej Smashing Friends, I remember the good

Mayer Rus on a Malibu Scouting Mission Gone Right

Tuesday, November 12, 2024

View in your browser | Update your preferences ADPro California Dreamin' I should bring my passport, I always think whenever work demands that I leave my cozy nest in Silver Lake to scout a house

Accessibility Weekly #422: Designing Against the Deaf Tax

Monday, November 11, 2024

November 11, 2024 • Issue #422 View this issue online or browse the full issue archive. Featured: Designing against the deaf tax "'Your baby has failed' isn't a phrase any parent wants

Slow Productivity

Sunday, November 10, 2024

Issue 220: Reflections on the new Cal Newport book ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Introducing Brand Presets for Email Templates – Available on All Plans

Saturday, November 9, 2024

Postcards email builder update: mantain your Brand Style across all templates.͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌

Here’s Every 2025 Color of the Year (So Far)

Thursday, November 7, 2024

View in your browser | Update your preferences ADPro Mood of the Moment Color experts are to autumn what Michael Bublé is to the holidays—re-emerging annually in full force to spread seasonal cheer.

Martha Stewart, the Queen of Reinvention

Tuesday, November 5, 2024

View in your browser | Update your preferences ADPro At the book signings for her debut tome, the now-iconic Entertaining published by Clarkson Potter in 1982, Martha Stewart would autograph the inside

#481: Front-End Techniques

Tuesday, November 5, 2024

With text balancing, exclusive accordions, CSS-only validation, responsive video and audio. Issue #481 • Nov 5, 2024 • View in the browser Smashing Newsletter Hej Smashing Friends, As we keep searching