Victor Profile picture
22 Apr, 10 tweets, 3 min read
What to do if

- you start a side project
- you are a developer
- you don't have a designer? ๐Ÿค”

๐Ÿงต Practical guide
1/9

First of all.

Check your competitors. I had 170+ competitors in the market.

There are for sure plenty of similar products, at least with similar features.

Make a list of them. Take screenshots of their pages. And put all this in a single place (Figma/Sketch)
2/9

Now, let's be honest. You don't have money for paying UX research for building

- wireframes
- informational architecture
- personas
- doing research
- making customer journey maps etc

Admit it. You're a side hustler and you probably don't want to spend years and $$$.
3/9

Now, open your favorite text editor and write down roughly what big features will you have.

Let's say, it's a todo app. After quick brainstorming, you'll probably have something like

- task list
- add a new task
- calendar
- login/logout
- teams
- tags
- subtasks
- etc
4/9

Now, take a pen and paper, and make a very rough layout (!) of what it could look like.

You've seen a lot of competitors already, so can mix their ideas.

Okay, we're doing the todo app, and the first what I could think of is this ๐Ÿ‘‡ Image
5/9

Not that pretty, huh?

Now, you need some styling, fonts and all that stuff. You don't need to invent anything!

Just select a property framework (@tailwindcss or @getbootstrap or whatever).

Go to @envato and check out dozen of similar admin templates.
6/9

So far we have

- rough layout
- selected framework/styling, that we will use so that our UI doesn't look very bad
- we have plenty of screenshots from competitors

If you are familiar with vector editors, you can use them. If not, you can start coding right away
7/9

I just went straight to @asana and @tailwindcss and got some styling from them.

Here what I end up with after ~10 mins of "designing".

This is very rough, bad etc, but that's how it starts. Later on you'll improve it further and further Image
8/9

- Start ask people's opinions. If it looks good or bad.
- Start collecting ideas. Literally, open your to-do app and push any idea of what can be improved
- Keep on watching competitors, what do they have
9/9

Remember.

All the CSS frameworks, design markets, logo creators, favicon generators, pinterest and other sites allow you to find almost ANY UI implementation.

The hardest thing is to organize everything correctly,. That's why we look at competitors

โ€ข โ€ข โ€ข

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

23 Apr
How user interface evolved for the past 40 years โœจ

Visual Thread ๐Ÿงต
Xerox 8010 Star, released in 1981

It was the first commercial personal computer that had
such things as

- window-based graphical user interface
- icons
- folders
- mouse (two-button)
- Ethernet networking
- file servers
- print servers
- e-mail. ImageImage
Apple Lisa Office System 1. Released on January 19, 1983.

It is one of the first personal computers to present a graphical user interface (GUI) in a machine aimed at individual business users. ImageImageImageImage
Read 17 tweets
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.
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
Read 5 tweets
21 Apr
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
Read 8 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

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!