46 Web Design Tips in 11 Minutes

Описание: I’ve seen tiny website design mistakes ruin user experience. These tips will save your website by boosting conversions and engagement.

1. Need a clear CTA
1. Show the user what you want them to do.
2. apple.com
2. Less content is usually better
1. Makes CTA more obvious
2. Saves time in design & development
3. Helps reduce time to feedback
3. Design mobile first
1. Helps with simplicity
2. Responsiveness becomes easy
4. Get feedback early and often
1. Don’t need to wait until it’s public before you get user feedback.
5. Usability testing techniques
1. Use effective techniques to avoid misleading feedback
6. Think aloud
7. Task-based
8. First click
9. Card sorting/Tree testing
1. Can be done before prototype is built.
10. A/B testing
1. Once site has sufficient traffic
11. Visual hierarchy
1. Can be used to guide the user to the most important information or action
12. Size
1. Bigger is more important
2. Smaller is less important
13. Colour
1. Higher saturation is more important
2. Lower saturation is less important
14. Contrast
1. Higher contrast is more important
2. Lower contrast is less important
15. Alignment
1. Left before Right (in the west)
16. Repetition
1. Consistency makes for better looking content
17. Proximity
1. Closer = more related
18. One or two fonts should be enough for most websites
1. Have a clear rule for when to use each font.
19. Design Interactive elements
1. Interactive elements have more than one state.
2. Design how they look in every state.

Design phase Accessibility

1. contrast
1. WCAG (1.4.6): A, AA, AAA
2. font sizes
1. Golden ratio if you want
3. rem preferred over pixels
4. colour choices
5. WCAG (1.4.1): Colour can’t be used as the only way of conveying information.

Build phase accessibility

1. Semantic HTML
2. Use `labels` for inputs (`htmlFor` or as children)
3. User `alt` test for images
4. If you don’t use semantic html you need to replicate functionality of native elements.
5. Check that your libraries respect accessibility.

Remaining tips

1. Communication
1. Clear and simple
2. Users don’t know as much about the product as you do.
2. Don’t build and design at the same time.
1. Possible exception: No code website builders
3. Don’t stress about reading/scanning patterns
1. Forcing your content into a scanning pattern will likely to a worse result than you’d get if you simply follow these tips.
2. e.g. F, Z
4. Research similar sites for inspiration.
1. siteinspire.com
5. Use common elements
1. Don’t reinvent the wheel
2. Saves time
3. Common elements are tried and tested
6. fonts.google.com/icons
7. fonts.google.com
8. Use a UI library if you don’t need control
1. Material UI
2. Mantine
3. Shadcn
9. Get free & copyright free stock images from pixabay.com
10. [pixabay.com](http://pixabay.com) and [freesound.org](http://freesound.org) for copyright free sounds
11. Choose the right technology for the job
1. This is a whole video in itself
2. There’s no silver bullet
12. It’s okay to use a no code web builder
1. If the application suits.
13. It’s okay to use a template
1. Most no code builders include free & templates
14. Basics of SEO
1. `h1`, `h2` and `meta` tags
2. backlinks
3. appropriate framework
15. Multiple screen sizes
16. Multiple browsers
17. Multiple browser font sizes
18. Publish the website