🔷 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
2/5. Navigation.
Don't hide navigation under hamburger icons on desktop devices.
That will hinder users to find necessary pages.
3/5. Company logo.
For some reason, I often see a company logo with a small line of text next to it.
It's hard to read.
Instead, make it a headline in the hero section.
4/5. Clickable area.
Ensure all your links and other elements that can be clicked have a large clickable area.
It improves the landing page usability.
5/5. Text length.
Don't make text lines too lengthy. It's hard to read such text.
There is no golden standard for this, but usually, something around ~70 characters per line looks good.
• • •
Missing some Tweet in this thread? You can try to
force a refresh
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.
Instead, what I did is - I used shadows.
The first border is 1px shadow, and the second border (in the hover state) is 2px shadow.