Tweet

@ppk

@Prototypr

This Thread may be Removed Anytime!

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

More from @vponamariov

Victor

@vponamariov

3 Jun

How to validate forms?

Some useful Do/Dont's 👇

The best place to show validation errors - near inputs. Don't gather all of them in one place.

Don't disable the submit button. Allow users to click on it and see the validation errors.

Users might scroll past some of the inputs without filling them.

If the submit button is blocked, then they won't know what to do next.

Read 10 tweets

Victor

@vponamariov

27 May

Learn how to avoid common mistakes when designing forms.

18 cards with practical examples 👇

Try to avoid multi column layouts.

It's easier for your eyes to go through the form if it's a one-column layout.

This layout is also acceptable.

But the labels should be placed next to inputs to avoid Z-pattern.

Read 19 tweets

Victor

@vponamariov

25 May

Want to make your UI flawless?

Here are some ideas for you 👇

Consistency

🔸Make a color palette in advance, or use a ready one

🔸Ideally, make a UI kit of every element you need

🔸Make sure your icons have the same styling

🔸Don't use too many layouts

🔸Make sure UI elements behave the same way across your app

Typography

🔸The text should have good contrast (AA+ WCAG)

🔸Don't use more than 2 fonts

🔸Provide text hierarchy (headings/sub-heading/paragraphs)

🔸Use proper line-height

🔸font-size should be at least 16px

🔸Do not justify text

Read 7 tweets

Victor

@vponamariov

24 May

A curated list of 68 free resources for designers 🤩

👇

@unsplash

Stock Images (I)

🔸unsplash.com (@unsplash)
🔸pexels.com (@pexels)
🔸stocksnap.io (@StockSnapIO)
🔸morguefile.com (@morguefile_site)
🔸landingstock.com
🔸nappy.co
🔸photos.icons8.com/creator

@pixabay

Stock Images (II)
🔸pixabay.com (@pixabay)
🔸kaboompics.com (@kaboompics)
🔸nos.twnsnd.co
🔸freeimages.com

Read 14 tweets

Victor

@vponamariov

24 May

Do you know how to make a dotted background with CSS?

Once I found the code but didn't understand the magic.

Here is a detailed explanation 👇

As a container, I'll use the body tag.

To make a dotted background we will use a combination of linear gradients.

Let's make something illustrated below.

The red background takes 20px.
Then goes green which takes 1-100%, in other words - the rest space.

Now, if we set background-size we can repeat the pattern which will look like on the image below.

The first value doesn't matter in this case since it's repeated horizontally.

But the second value is important - it's the space between the lines.

Read 6 tweets

Victor

@vponamariov

24 May

Today I turned 32.

Sharing with you some life lessons that I learned by this time.

I do not claim I necessary follow them.

It's not a planned thread. Just some sincere thoughts about life.

In no particular order. 👇

Your personal experience is more important than any advice.

This thing I've read in "The happiness trap". It is a book dedicated to the ACT therapy method.

Any advice is good. But nothing can replace your own experience.

People affected by survivorship bias too much

We see cool photos of people who drink smoothies on the beach and code startups.

The bias is that those who suffer depression, burnouts, anxiety, who has debts, and so on - they don't tell you that.

indiehackers.com/post/holy-heck…

Read 17 tweets

Share this page!

Victor

Try unrolling a thread yourself!

More from @vponamariov

Victor

Victor

Victor

Victor

Victor

Victor

Did Thread Reader help you today?

Like this author's thread?