Sprid ordet: vackra testimonials UI-exempel

Alla vill få positiv feedback för ett väl utfört arbete. Det är en anledning till att så många företag inkluderar vittnesmål på sina webbplatser.

Förutom att känna sig varm och förvirrande kan vittnesmål också hjälpa till att rekrytera nya kunder. Att veta att andra har haft en bra upplevelse inger förtroende. Sammantaget är det en lycklig liten cykel som får verksamheten att blomstra.

När det gäller implementeringar av attesteringsgränssnitt är enkelheten ofta bättre. Det betyder dock inte att de måste vara tråkiga. Smart användning av färg, design och specialeffekter kan få dina vittnesmål att sticka ut.

Låt oss ta en titt på några exempel som kommer att ge dina vittnesmål en plats att lysa.

Allt på löpande band

Rekommendationer kombineras ofta med reglage och karuseller för interaktivitet och effektivitet. Några exempel i vår samling använder dem. Detta exempel är dock unikt i sin design. Även om det finns standardnavigeringspilar längst ner i funktionen, kan du också bläddra fram och tillbaka genom att klicka på en kunds foto på varje sida.

Se karusellen av vittnesmål som tagits emot från Md Nahidul’s Pen (@thenahid)

Former och regnbågar

Om du vill lägga till rekommendationer på din sida är det svårt att slå. Först finns det den animerade gradienten som ändrar bakgrundsfärgen. För det andra skapar användningen av CSS-klippbanor en fantastisk look på bilden. Även med allt detta är användargränssnittet enkelt och elegant.

Se hellokatilis skjutreglage för vittnesbörd (@hellokatili)

JavaScript är valfritt

För alla CSS-nördar, här är en lösning som inte behöver en enda rad JavaScript. Även om det är inget annat än imponerande när det gäller utseende, är det faktiskt en bra sak. Det ger dig mycket utrymme så att du kan designa det för att passa dina behov. Dessutom kommer detta att passa i ett relativt litet utrymme.

Se MAHESH AMBURES Pure CSS Testimonial Pen (@maheshambure21)

Det finns i kortet

Användargränssnittet för detta kort är väldigt enkelt och vackert. Varje kort har sin egen bakgrundsbild, förmodligen för att använda en kunds foto eller logotyp. CSS-opacitet används för att tillåta tillräckligt med kontrast för att placera vit text ovanpå. Det uppmuntrar också användningen av en liten mängd innehåll, vilket är mycket lättare att smälta än ett längre omdöme.

Se penna nr. 1574 – LittleSnippets.net rekommendationskort (@littlesnippets)

Ett nytt perspektiv

Design är vad vi fokuserar på denna demo fungerar inte. Det visar hur enkelhet verkligen kan fungera. De små hörnen i bakgrundsbilden drar blickarna till sig medan den generösa stoppningen runt dejten skapar en känsla av rymd.

Se widgeten för Pen Stripe-godkännande i Adam Wathans Tailwind CSS (@adamwathan)

Resecitat

Detta är en annan version av ett användargränssnitt för autentisering. Det är helskärm och du måste hålla muspekaren över bilderna för att se respektive priser för varje. Gränssnittet är extremt skarpt och övergångarna är smidiga. Detta kan vara ett bra val för mer konstfokuserade webbplatser.

Se Dave Knispel’s Hover Reveal Endorsement Pen (@daveknispel)

En annan väg

Det finns mycket att gilla i det här exemplet. Karuselldesign sida vid sida skapar intressanta visuella effekter. Bilden flyttas till vänster när citattecken flyttas till höger. På tal om citatområdet, det ger gott om vitt utrymme och är lätt att läsa. Det är ett paket som är allt annat än typiskt.

Se skjutreglaget för Endorsement Pen, skjutreglaget för md aqil (@md-aqil)

Färgkarta

Ett annat bra exempel på enkelhet, den här kortdesignen använder några CSS-effekter för att skilja det åt. Det första är det något roterade citatet längst ner. CSS-övergångar används för att bryta enhetlighet, på ett bra sätt. Dessutom gör den färgglada gradienten i sidfoten att hela kortet, vågar vi säga, “poppar”.

Se Bradleys mdJWryR Pen (@bradleyham)

Fina komplimanger

Hela idén bakom att samla in vittnesmål är att visa att du vet hur man gör kunder nöjda. För en rad olika företag och organisationer fungerar de som ett viktigt säljverktyg.

När det gäller att visa vittnesmål på en webbplats finns det flera övertygande alternativ. Exemplen ovan visar hur användningen av färg, rörelse, typografi och design kan spela en viktig roll för att bygga ett iögonfallande användargränssnitt. Det är upp till dig att bestämma vilken metod som fungerar bäst för ditt varumärke.

Vill du se fler rekommendationsgränssnitt? Kolla in vår CodePen-kollektion och ta reda på vad andra designers hittar på.