Design Choices

Colour

Do this:

• Use a colour contrast checking tool to ensure that there's no colour contrast violations
• Try seeing the site as black and white and see if you can still understand what's going on

Don't do this:

• Don't use low contrast colour choices like dark grey on black
• Don't use only colour to convey hierarchy or important information

Why?:

• Users will colour blindness:
  • Red and Green Deficiencies:
    • Red and Green look like Beige
  • Blue Deficiencies
    • Blues and Greens look the same.
    • Yellow might look red.
  • No Color
    • Can't see color
• Not all users are rich with high res displays
  • Dif screens can display color differently
• Users might use these devices where there's bright light

Density of Links/Icons

Do this:

• Recommended range: 44px-48px width and height per touch/mouse target
• Try navigating the site using just the thumb
• Use white space if needed
• Include text for icons:
  • Eg: using a tag beside the icon

Don't do this:

• Lump multiple targets into a tiny area where it's easy to select the wrong thing
• Squish a whole bunch of links together without using white space
• Pick creative icons and expect everyone to know what meaning they convey

Why:

• Not all users have tiny fingers
• Note all users are experts in every hipster icon out there

Transitions/Animations

Do this:

Don't do this:

Why:

• You don't want to be the person who caused users headaches, stomach aches and seizures just cause' they visited your site

---

Last update: August 8, 2020