10 UI Tips From Real Life Landing Pages πŸš€

A visual thread
1. Iterspace by @ikoichi

Place your CTA button near your social proof.

According to Fitts's law, acquire a target (aka hitting CTA) is a function of the distance (place it at the correct point during the user flow) to and size of the target (make it big & prominent enough).
2. InMyBio by @cchana

Don't overdo it with gradients & colors.

Keep it simple and highlight + keep accessible your important elements (CTA, text) not your background.

Before using a gradient (or color) make sure your texts are readable and your CTA stands out.
3. GrowSurf by @ctwtn

The hero section is the most important part of your landing page.

Grab user attention and put visitors into context by showcasing your product with visuals.

Especially when you have a great product like GrowSurf!
4. Hyperjump by @GoodPointDustin

A common mistake is to offer multiple CTA on the same screen.

People don't like to be confused. By using the same CTA copy & target you make their choice easier.

If it's necessary to have multiple actions, use a secondary button.
5. Minipoll by @rjgilbert

Show the value visually in advance.

It will help visitors understand the real benefit of your product/plan and eventually boost your conversions.
6. LegitCheck by @chddaniel

Sticky filters enhance eCommerce UX because it reduces the searching friction for the users.

Especially, when your product listing is long or/and has infinite scrolling.
7. Sideby by @wilrahn

Always tell users the reason why they should care about joining the waitlist.

Having an early bird discount is a huge benefit. Thus, make it prominent and highlight it to remove hesitations.
8. Wonderpath by @dafnihnd

Respect the natural user flow

1. User sees the picker
2. Assumes there's a section below
3. Scrolls down and find out that picker is for the content above
4. Scrolls back up

Move the picker on top instead and remove the friction completely.
9. Wotnot by @MakadiaHarsh

Text is great and very important.

But visuals are a better (and quicker) way to introduce people to your product.

The human brain can recognize images in 13 milliseconds (WTF huh?!)

πŸ’―Bonus points if you make the chat widget interactive!
10. Haptic by @Brslv

Leverage social proof. Especially above the fold!

Display respected people or/and products in your industry and add public links to back up your claims.

In the specific case, each company can redirect to its public Haptic page!
11. tl;dv by @thissen_carlo [BONUS]

Be clear on your copies to avoid misunderstandings.

For example, while reviewing the plugin I got confused.

My web camera opened and I saw this message "tl;dv will join soon":

Will a bot join the Meet call? Or a tl;dv team team member? πŸ₯Ά
Do you enjoy these tips?

Join my bi-weekly newsletter where I post similar content and more in-depth landing page teardowns πŸ‘‡


β€’ β€’ β€’

Missing some Tweet in this thread? You can try to force a refresh

Keep Current with Jim Raptis

Jim Raptis Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!


Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @d__raptis

8 Jun
How NOT to be a creator in 2021 [Real Story]

1. Ask to be an affiliate partner
2. Beg for a free copy
3. Rip off the product & the landing page

Why? πŸ‘‡
1. Kills relationships

No one trusts a copycat. You kill all your connections for a few extra bucks?! Dump.

Being a successful creator is >70% about building honest, healthy relationships with customers and (especially) with fellow creators.
2. Waste of time

It's always a waste of time. Especially when you rip off an info product.

Most people buy info products to have potential access to the creators themselves.

They care about their opinion and their insights that's why people buy their product.
Read 5 tweets
2 Jun
How to Design a Better Cta Button πŸ‘Š

Quick Tutorial
Let's start with this simple button.

⚠️ Disclaimer:
You can build a decent business with the exact same button. But if you want to WOW your users, follow the next tips to make your CTA stand out...
1. Add Padding

Saying it again (without feeling any guilt):

"Whitespace is your best design pal."

πŸ’‘Rule of thumb:

Set the horizontal padding equal to x2 the vertical one.

You can always use other formulas but that's a quick way to make it look visually nice.
Read 10 tweets
18 May
15 Tips for Perfect Forms

A visual thread
01. Use Labels

Always use labels and keep them visible all the time.

Nothing is more annoying than guessing what an input field is about.
02. Avoid "Z Pattern"

Try to keep your form fields in a vertical line.

In that way, you help the users scan the form with a quick vertical look and assist them to complete their task (fill the form).
Read 17 tweets
3 May
7 Powerful UX Laws explained for normal people. Jargon-free!

A visual thread
Hick's Law

"The time it takes to make a decision increases with the number and complexity of choices"

Remove or hide non important actions. People want to complete their task in no time, without thinking.
Fitts's Law

"The time to acquire a target is a function of the distance to and size of the target"

Always place your CTA in the right place, without distracting the user's flow. Not too early. Not too far away.
Read 8 tweets
23 Apr
7 UI Tips for beautiful & usable card designs

A Visual Thread πŸ‘‡
1. Adjust Border Radius

Avoid using the same border radius for both the card and the inner elements

A rule of thumb is to use for the inner border-radius half the size of the outer element
2. Highlight Your Main CTA

A common mistake is to use too many primary CTA

You need to force users to take a single action & don't confuse them

Have a single primary CTA in your card
Read 9 tweets
20 Apr
Officially announcing Phigma templates

A successful @ProductHunt launch needs 100s of hours

100+ high performing @figmadesign templates for your graphics

More info below πŸ‘‡ Image
1. Why I created phigma.app

The most time-consuming PH launch task is to design unique & slick graphics for the product listing.

It's critical to stand out with an attention-grabbing page because you compete with 100s of other product daily/weekly

@ProductHunt changed my life!

Three years ago, I discovered it and I was amazed by all the cool products.

It pushed me to follow my dream of building useful products for people and the support was incredible.

It even helped me earn my 1st money online...
Read 11 tweets

Did Thread Reader help you today?

Support us! We are indie developers!

This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!

Follow Us on Twitter!