Victor - Writing Re:Form Profile picture
Nov 23 β€’ 6 tweets β€’ 2 min read
Five UI/UX tips to improve your landing pages πŸ‘‡

#SketchDesignChallenge πŸ”₯
1/5. Poor text contrast on images.

Make sure that

πŸ”· the text on images is easy to read
πŸ”· it doesn't cover any important objects behind it (e.g. faces or products)
πŸ”· text contrast is good everywhere, not only on images
2/5. Navigation.

Don't hide navigation under hamburger icons on desktop devices.

That will hinder users to find necessary pages.
3/5. Company logo.

For some reason, I often see a company logo with a small line of text next to it.

It's hard to read.

Instead, make it a headline in the hero section.
4/5. Clickable area.

Ensure all your links and other elements that can be clicked have a large clickable area.

It improves the landing page usability.
5/5. Text length.

Don't make text lines too lengthy. It's hard to read such text.

There is no golden standard for this, but usually, something around ~70 characters per line looks good.

β€’ β€’ β€’

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

Keep Current with Victor - Writing Re:Form

Victor - Writing Re:Form 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 @vponamariov

Oct 17
CSS Tip ☝️

I needed to make a pill component that should have had a 1px border.

But when on hover it should be doubled.

It wasn't that easy, and here is why.
If you simply make a 2px border on hover it will increase the height and width of the pill.

Since you don't know in advance what the width is, and probably the pill might be multiline, I don't think using fixed height/width is a good solution.
Instead, what I did is - I used shadows.

The first border is 1px shadow, and the second border (in the hover state) is 2px shadow.

And that's basically it.

A simple, yet nice trick.
Read 4 tweets
Oct 17
Some things designers should learn by themselves
by Michael McWatters (link at the end)

I SO MUCH liked this that I'm going to share some parts from the article πŸ‘‡
πŸ”Έ 32% of your time will be spent labeling buttons.

πŸ”Έ Blood will be shed over any question that begins, β€œShould designers…”.

πŸ”Έ All the research in the world is no match for your CEO’s opinion.
πŸ”Έ The design will fail on one platform, and that platform will be the one your boss uses.

πŸ”Έ The delta between what you designed and what gets shipped can be measured in light years.
Read 9 tweets
Sep 6
One UI/UX problem. Seven examples. One thread πŸ”₯

Clickable area.

Do you make it right? Let's find out πŸ‘‡
1/7. Sidebar menus.

Make sure that sidebar links have enough clickable space.
2/7. Vertical navigation.

A typical case is when the navigation links of a landing page don't have extra clickable space.
Read 8 tweets
Sep 5
UI/UX Tip πŸ’‘

Even if you have a lot of space, it doesn't automatically mean you should fill it.

It's perfectly fine not to stretch your inputs, text, and whatever to the parent container's width.

Make it reasonable instead.
Guys, in the example above the thing, is that my cards are not cards. I just stuck on the same design of tips.

Yes, usually you make inputs occupy the whole container and you limit the container, of course.

Idea is that the CONTAINER shouldn't occupy the whole space
I mean, the picture is a little bit ambiguous, yes...=\

Imagine that on the second page I limited an invisible container (instead of inputs)
Read 4 tweets
Aug 29
Let's redesign the login form of an Armenian bank.

Ultimate Visual Thread πŸ”₯
Let's first indicate the problems:

- Low-quality logo
- Proximity law violation
- A lot of space is not used
- Harsh shadows
- Using the user name field instead of email
- No reveal password icon
- Outdated styling
- Mixing logically unrelated links
- Copyright text
Also, we have some problems with focus & attention

CTA button is green, the background is also green, and there is no clear separation of visual hierarchy.
Read 13 tweets
Aug 15
Two VERY important UI/UX tips for your forms.

First, it's good when you have a one-column layout. The eye path is clear, from top to bottom.

But... check out the second tip. Image
It doesn't mean that you have to literally follow this.

If fields are tightly connected logically, they will be perceived as a single entity.

Which still makes it kind of a single-column layout. Image
I'm writing a book related to the usability of forms.

If you're interested, get updates here πŸ‘‡…
Read 4 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

Don't want to be a Premium member but still want to support us?

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

Donate via Paypal

Or Donate anonymously using crypto!


0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy


3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us on Twitter!