close menu button
đź‘‹

Hello there!
Log into the academy:

In order to log into your academy profile, please provide your email and password

Eye Icon
Forgot password?

Did you previously use

Magic link?

Don’t have an account yet?

Register here

UI & UX Tips

🎉 64 tips 

Verified, research based tips coming from fintech, government and startup projects. Building a collective database of working UI patterns.

Daily practice
EyeLearn more

Daily Practice

See tipArrow
Strong colors
EyeLearn more

Strong colors

See tipArrow
Inner shadows
EyeLearn more

Inner shadows

See tipArrow
Sliders 3
EyeLearn more

Sliders 3

See tipArrow
Sliders 3
EyeLearn more

Sliders 2

See tipArrow
Sliders
EyeLearn more

Sliders

See tipArrow
Sorting
EyeLearn more

Sorting

See tipArrow
List of options
EyeLearn more

List of options

See tipArrow
Tooltips 2
EyeLearn more

Tooltips 2

See tipArrow
Tooltips
EyeLearn more

Tooltips

See tipArrow
Types of fields
EyeLearn more

Types of fields

See tipArrow
Steps names
EyeLearn more

Steps names

See tipArrow
Invalid fields
EyeLearn more

Invalid fields

See tipArrow
Line graphs 3
EyeLearn more

Line graphs 3

See tipArrow
Line graphs
EyeLearn more

Line graphs 2

See tipArrow
Line graphs
EyeLearn more

Line graphs

See tipArrow
Popups2
EyeLearn more

Popups 2

See tipArrow
Popups
EyeLearn more

Popups

See tipArrow
Empty screen
EyeLearn more

Empty screen 3

See tipArrow
Empty screens
EyeLearn more

Empty screen 2

See tipArrow
Centered fields
EyeLearn more

Centered fieds

See tipArrow
Cell views
EyeLearn more

Cell views

See tipArrow
Tables 3
EyeLearn more

Table 3

See tipArrow
Tables2
EyeLearn more

Tables 2

See tipArrow
Tables
EyeLearn more

Tables

See tipArrow
Multi-column checkbox
EyeLearn more

Multi-column checkbox

See tipArrow
Empty screens
EyeLearn more

Empty screens

See tipArrow
Long lists
EyeLearn more

Long lists

See tipArrow
Arrows
EyeLearn more

Arrows

See tipArrow
Classic scenario
EyeLearn more

Classic scenario

See tipArrow
Button size
EyeLearn more

Button size

See tipArrow
Required password charaters
EyeLearn more

Required characters

See tipArrow
Password
EyeLearn more

Password

See tipArrow
Optical weight
EyeLearn more

Optical weight

See tipArrow
Checkboxes
EyeLearn more

Checkboxes

See tipArrow
Clashing colors
EyeLearn more

Clashing colors

See tipArrow
Toggles
EyeLearn more

Toggles 2

See tipArrow
Toggles
EyeLearn more

Toggles

See tipArrow
Hints
EyeLearn more

Hints

See tipArrow
Dropdowns
EyeLearn more

Dropdowns 2

See tipArrow
Dropdowns
EyeLearn more

Dropdowns

See tipArrow
safe-area overlap
EyeLearn more

Safe-area

See tipArrow
Capitalized labels
EyeLearn more

Capitalized labels


See tipArrow
links
EyeLearn more

Links

See tipArrow
Non-rectangular
 shapes
EyeLearn more

Non-rectangular
 shapes

See tipArrow
CTA
EyeLearn more

CTA

See tipArrow
Labels
EyeLearn more

Labels

See tipArrow
Label fonts
EyeLearn more

Label fonts

See tipArrow
Font sizes
EyeLearn more

Font sizes

See tipArrow
Rounded form fields
EyeLearn more

Rounded form fields

See tipArrow
super small click areas
EyeLearn more

Small
 click areas

See tipArrow
Avoid unclear messaging
EyeLearn more

Clear messaging

See tipArrow
Underline fields
EyeLearn more

Underline fields

See tipArrow
Multi-column forms
EyeLearn more

Multi-column 
forms

See tipArrow
Avoid red asterisks
and setting most
fields as required
EyeLearn more

Red asterisks

See tipArrow
Buttons with no whitespace
EyeLearn more

Whitespace


See tipArrow
icons
EyeLearn more

Icons

See tipArrow
Thin light fonts
EyeLearn more

Thin
 and light fonts

See tipArrow
Differentiate the buttons UX tip
EyeLearn more

Button hierarchy

See tipArrow
Avoid vague button labels ux tip
EyeLearn more

Clear button labels

See tipArrow
Avoid carousels with dots under them
EyeLearn more

Carousel dots

See tipArrow