Victor Profile picture
21 Apr, 8 tweets, 3 min read
If you're a solo founder or developer, you might actually don't need a designer.

Here is why ๐Ÿงต
1/7

There is the Pareto principle that says that you can achieve 80% of the result, making 20% effort.

You might not have a perfect design, but it'll be 80% good if you follow some basic principles of design.
2/7

These design principles are not hard to learn.

Most of them are UX gestalt principles, UI patterns, common sense.

It'd be enough to read a @refactoringui book, for example, that will level up your skills dramatically
3/7

Especially if you're building MVP, you can use some pre-defined color schemes (I use one from @tailwindcss ), pre-defined UI components (starting from @getbootstrap ending with whatever you like).

USE something that ALREADY looks good
4/7

If you're an active user of social networks, you can always ask for advice.

You'd be surprised how much feedback can you get.

In the simplest form, you can just run a poll asking "A or B?"
5/7

When I built my own product I had a list of 170 (!) competitors.

You can check out how did they implement their UI, and inspire by them.

I'm not telling blindly copying them. You might even make something better, but at least you'll have some reference at the beginning
6/7

If you're making a landing page, you can start with any no-code solution. @webflow, @dorik_io, whatever.

Yes, if you need an OUTSTANDING landing then you should hire a designer, but by the time you need it, you'll probably have some money.
7/7

The most important thing: you should always be curious. And watch what's new is going on in the design world.

Check out your competitors. Check out @dribbble.

Install @usemuzli and start your new browser tab with inspiration.

โ€ข โ€ข โ€ข

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

Keep Current with Victor

Victor 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!

PDF

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

21 Apr
How to make this hover effect with CSS only ๐Ÿ‘‡
First, you need an SVG with such a curved line.

You can create one in any vector editor.

So here is an example of HTML you can have. Image
Next, the CSS part

1. The SVG should be positioned absolutely, below the link

2. The path should have `stroke-dasharray` and `stroke-dashoffeset` properties.

3. Apart from that it should have transition settings so that the animation would be smooth Image
Read 5 tweets
20 Apr
10 really DARK & TRICKY UX patterns you should never use ๐Ÿ˜ˆ

๐Ÿ‘‡
1. Forced Continuity

There is a popular joke: "Why do you need my credit card if it's a free trial?"

The trick is that when your trial ends, you start getting charged.

Usually without reminders, and without an easy way to cancel the subscription.
2. Price Comparison Prevention

The retailer makes it hard for the user to compare the price of an item with another item, so they cannot make an informed decision.

For example, it's hard to compare weight (kg) and the package of pears (without knowing the package weight)
Read 11 tweets
19 Apr
20 UX Laws & How to apply them (illustrated) ๐Ÿ‘‡
The rule of the first impression

It takes a fraction of a second to make a good/bad first impression.

Things that users see when they start interacting with your product will shape their opinion.

That's why I'm starting this thread with this rule & attaching a nice video
Picture Superiority Effect

Pictures and images are more likely to be remembered than words.

Use visual storytelling in your products.

By pairing text with images, you increase the chance that users will remember the information.
Read 21 tweets
16 Apr
9 Tricks to control user attention ๐Ÿ˜ˆ๐Ÿ‘‡
1. Motion

It is a proven method of getting user attention for a short period of time.

An awesome example I like very much is how @JoshWComeau used this fellow guy gently jumping in when you read his blog article.

He got thousands (!) of subscribers just because of this trick
2. Size

One of the basic ideas for moving user attention to the thing you want is simply increasing its size.

The bigger the object is, the more attention it gets.
Read 10 tweets
15 Apr
There are 4 basic design principles you need to know

๐Ÿ‘‡
1. Contrast

By using contrast you can control users' focus. Ways of making an element stand out:

1. Color
2. Shape
3. Size
4. Proximity / Distance

Remember: No contrast / Too much contrast is bad!
2. Alignment

When your elements are aligned, nothing looks out of place.

It doesn't mean that an element cannot be out of order if you want to focus the user on it, but most elements should be usually aligned.

A typical way to achieve that is using grids or columns.
Read 5 tweets
13 Apr
How to make this with CSS only ๐Ÿ‘‡
1 / 8

First, you need an SVG that has TWO parts:

- Line
- Arrow

For drawing such curves you can use any vector editor. I used @sketch.

Tutorial on how to do this: sketch.com/docs/vector-edโ€ฆ

Arrow is a simple triangle.
2 / 8

Next, after you exported SVG, you can go to jakearchibald.github.io/svgomg/ in order to remove clutter from the SVG.

Btw, this is a nice hint: you can significantly reduce the size of SVG by using this awesome tool from @jaffathecake
Read 9 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!