How to design almost any UI element.

A curated list of 61 articles 👇 Buttons
---

1. Button Design – Get Site Visitors to Actually Click Your Buttons by @uxpin



2. Designing button states: Tutorial and best practices by @edwche / @LogRocket



3. The Definitive Guide to Buttons in UX: Part 1 by Lauren Waage

uxpin.com/studio/blog/bu…
blog.logrocket.com/ux-design/desi…
medium.com/@lwaage2019/th…

Today I turned 34.

Here is an updated version of the most helpful tweet I've ever posted.

How to design almost any UI element?

A curated list of 34 articles 👇 Buttons.

1. How To Design Better Buttons by @101babich and @smashingmag

👉 smashingmagazine.com/2016/11/a-quic…

2. Desperately seeking squircles

👉 figma.com/blog/desperate…
Thanks @Southclaws and @figma

3. Designing A Better Back Button UX

👉 smashingmagazine.com/2022/08/back-b…

Thanks @vitalyf

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

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.

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.

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.

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

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

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. 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.

🔥 Ultimate Thread: Frontend Interview Questions 🔥

Recently I've googled a lot of interview questions and filtered out many of them.

Here we go:

🔸 44 questions with answers
🔸 Non-framework related
🔸 Each has a difficulty level (🟩 🟨 🟥)

🧵 1️⃣ What data types does JS have? What is the difference between statically typed languages and dynamically typed languages?

Answers:

➡️ developer.mozilla.org/en-US/docs/Web…

➡️ stackoverflow.com/questions/1517…

Level: easy 🟩

10 Common CSS mistakes that you should be aware of

👇 1️⃣ Not using a CSS reset

Each browser has its own default styling for HTML elements.

Before making your own classes it'll be a good idea to reset default browser styles.

There are plenty of CSS libs for that, e.g. normalize.css

Want to make your app react instantly?

Read this ultimate thread 👇 Recently I made a poll where I asked if anybody heard about Optimistic UI.

Most people didn't 🤔

The idea is not new though and also cannot be applied to any case.

But still, it works very well in certain situations.

https://twitter.com/vponamariov/status/1467947993127178240

I rarely do this, but I think I need to share with you some awesome Twitter handles that I follow.

And you should probably follow too.

👇 @TheJackForge - giveaways & sense of humor :)
@SimonHoiberg - javascript, business, saas and inspiration
@florinpop1705 - an awesome developer
@oliverjumpertz - Web 3.0
@adrian_twarog - UI/UX + Development
@EddyVinckk - a developer whose tweet got 320K likes 😄 (no jokes)

8 MIND BLOWING design tools powered by AI 🤯

🧵 Thread 1️⃣ Autodraw

Autodraw checks what you have roughly drawn and tries to guess what you wanted to illustrate.

autodraw.com

Everything you should know about UX research methods 🔬

A curated list of 64 articles with the table of contents

👇 Table of contents

🔹What is UX Research?
🔹User Interviews
🔹Field Studies
🔹Focus Groups
🔹Diary Studies
🔹Surveys
🔹Personas
🔹Card Sorting
🔹Tree Testing
🔹Usability Testing

ALL you need to know to make your text look GOOD 🔥

Ten practical typography lessons 👇 1️⃣ Contrast.

First of all, your text should be VISIBLE. You shouldn't put light grey text on white background.

To make sure it has enough contrast, make sure it has an AA level.

You can check it here
webaim.org/resources/cont…

UI/UX Tip 💡

Use proper input type.

Very easy to implement, but it simplifies the mobile experience SO much.

Let's quickly brush up on them 👇 Input type = text.

The basic one, so you'll just get a typical virtual keyboard without anything special about it.

If you have a landing page then I have something for you to read on the weekend

A curated list of 10 articles for improving conversion 🔥

👇 1️⃣ 14 Landing Page Best Practices to Improve Your Conversions (2020)

crazyegg.com/blog/landing-p…

Seven reasons why you shouldn't use placeholders as labels from @NNgroup

🧵 1️⃣ Disappearing placeholder text strains users’ short-term memory.

If the user forgets the hint, which people often do while filling out long forms, he has to delete what he wrote and, in some cases, click away from the field to reveal the placeholder text again.

I've just checked 5 sites and roasted them a bit.

Not a big deal, just a quick look, but maybe you'll find something useful here 👇 1️⃣ Landing page from @NurAfeeqah

Definitely increase the size of social icons.

Something to read on the weekend 🤓

How to create a good landing page?

Check out this curated list of articles 👇 1️⃣ How to Design an Effective Landing Page

toptal.com/designers/land…

By @toptal