UI Components

164 Pins
 5mo
Collection by
Loads to love here. On the UX front; the expansion of the arrows on hover and the subtle bounce animation on the cards. On the content front; highlighted takeaway up top, good avatars, their company positions plus brand logos for a bonus visual reminder.
Seen a lot of “Tweet testimonials” in my day. This was by far the most fun!

Testimonial Examples

15 Pins
Classy move by Bruno adding a call us prompt if one of their pricing tiers doesn’t match the potential customers needs.
Lovely touch with the single circle above the solo tier and the 3 circles with a plus icon for the Team tier up to 20 users. Also handpicking a killer testimonial, about time-saving, alongside a pricing table is a solid play.
Lovely touch wrapping up their brand logos like parcels.

Pricing Table Examples

25 Pins
Clean as a whistle.

Newsletter Sign-Up Examples

3 Pins
Author bolds lifetime access under badge

Money-Back Guarentee Examples

1 Pin
Clever use of landing page section whitespace to create this beautifully designed graph under the Radix UI metrics.
Hectic red this but neat layout with unique typeface.

Metric Examples

7 Pins
Stamped ‘n signed, against a fine background pattern

Manifesto Examples

1 Pin
Brilliant how-it-works section that animates the Alfread feature blocks as you scroll down the page.
A few elements to note here that give visitors peace of mind. The word “easy”, a numbered 1-2-3, actual times per step and a specific price.

How It Works Examples

12 Pins
Below the FAQS, there are huge, colorful callouts to try free or get help. Both very overlooked in FAQ sections.

FAQ Examples

11 Pins
Cone is a color picker app for iPhone. The Landing Page features a minimal device with an animated picker identifying the colors within the actual page background image.
Fun, interactive experience scrolling through the book chapter summaries.
Very meta interactive variable font intro

Demo Examples

6 Pins
Minimal, tons whitespace with a sprinkle of years in game for flavor

Customer Examples

6 Pins

Contact Form Examples

5 Pins
Ton of added effort in these cards highlighting the Herding bookmarking tool. The animation of the copy/paste shortcut keys, the cheeky copywriting and note how they showcase visual examples of the types of content it can capture – sync’d to the above paragraph. What a solid first impression for an app only in Beta.
Beautifully designed. The long-scrolling page actually has triple this amount of card highlights throughout. These were just my favorites.

Card Highlight Examples

11 Pins
Strengthened with customer logos
Minimal, powerful
Strengthened with testimonials below all using Author first name

Biography Examples

4 Pins

Roadmap Examples

5 Pins
Really appreciate the extra effort illustrating all the team members. Everyone is so well presented and even includes their fav quote + team nickname on hover.
Positive vibes in this slider, direct link to emails, also random color scheme on page load

Team Section Examples

17 Pins
Earnest – adjective – “resulting from or showing sincere and intense conviction”. That pretty much sums up this fun big footer of the Pudding Studio team.

Big Footer Examples

12 Pins
Fun puzzle 404 page for Mercury Banking. Nice touch in the copy saying you are lost, either settle into the game or head home. h/t @ridd_design
Fun puzzle 404 page for Mercury Banking. Nice touch in the copy saying you are lost, either settle into the game or head home. h/t @ridd_design

404 Message Examples

14 Pins
an app with the number 4 on it and four options to choose which one is right for you
Webflow 404 Message
Clever reuse of their padding/margin editor component as an interactive zero. Lovely addition too integrating control+z keyboard shortcuts to undo your tweaking.
two iphones with different pricing on them, one is for mockup and the other is for mockup
Ultimate Mockup Bundle Pricing Table
Nice touch adding a testimonial within the Pro tier.
four men and women are standing in front of each other, with their arms crossed
Fontfabric Team Section
Consistent card layout with member left and titles top-right, organized into a neat grid layout.
a tweet with the caption i've added 100, 000 followers on instagram in the two months since i started working with visual cuts
ViralCuts Testimonials
Buckle up. We have well known opinion leaders, talking about transformation (where the service took them), sharing solid metrics, as well as embedding the actual client videos within the slider. So we’re not just telling them, we’re showing them. Dare I say this as good as a testimonial slider can get.
the landing page for our fluid plans
Hyperflow Pricing Table
Good reference to clearly suggesting a pricing tier. Also note the book-a-call, quick critique and referral blocks integrated within the same table design.
the website for people, which is designed to look like they are looking at something
Square One Team Section
Square One have divided their team section into Family (co-founders) and Friends (devs, designers & subcontractors).
an image of a website page with the words sorry we can't find that page
Mercury 404 Message
Fun puzzle 404 page for Mercury Banking. Nice touch in the copy saying you are lost, either settle into the game or head home. h/t @ridd_design
an image of a website page with the words sorry we can't find that page
Mercury 404 Message
Fun puzzle 404 page for Mercury Banking. Nice touch in the copy saying you are lost, either settle into the game or head home. h/t @ridd_design
an image of a cell phone screen with the aurora lights in the background
Cone Demo
Cone is a color picker app for iPhone. The Landing Page features a minimal device with an animated picker identifying the colors within the actual page background image.
an image of a computer screen with buttons on the bottom and one button in the middle
Designing Digital Products for Kids Demo
Fun, interactive experience scrolling through the book chapter summaries.
the website for trustful by 200 + companies
Bruno Membership Testimonials
Loads to love here. On the UX front; the expansion of the arrows on hover and the subtle bounce animation on the cards. On the content front; highlighted takeaway up top, good avatars, their company positions plus brand logos for a bonus visual reminder.
the pricing page for an appliance
Bruno Membership Pricing Table
Classy move by Bruno adding a call us prompt if one of their pricing tiers doesn’t match the potential customers needs.
an image of a website page with the words sorry we can't find that page
Mercury 404 Message
Fun puzzle 404 page for Mercury Banking. Nice touch in the copy saying you are lost, either settle into the game or head home. h/t @ridd_design
an image of a cell phone screen with the aurora lights in the background
Cone Demo
Cone is a color picker app for iPhone. The Landing Page features a minimal device with an animated picker identifying the colors within the actual page background image.
an image of a computer screen with buttons on the bottom and one button in the middle
Designing Digital Products for Kids Demo
Fun, interactive experience scrolling through the book chapter summaries.