UI Components

164 Pins
·
17 Sections
·
1y
By
One Page Love
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