This document provides tips for improving website usability. It recommends being specific with calls to action rather than using generic text like "learn more". Using color, value, and typography contrast can help denote emphasis and hierarchy. Hover states should only be used for clickable elements. Content cards can make entire sections clickable. Animation and a cleaner design approach improve the user experience compared to busy patterns. Tools like Zeplin can help with typography. The document offers advice for effective typography and calls to action to enhance usability.

1. Simple tips & tricks for beautiful, usable websites.
@andreacroftsandreacrofts.com
x
you

2. @andreacroftsandreacrofts.com

3. @andreacroftsandreacrofts.com

4. @andreacroftsandreacrofts.com
Usable
Desirable
Feasible

5. @andreacroftsandreacrofts.com
We are capable of
discerning far more
than we are capable
of articulating.
- Jonathan Ive
“

6. @andreacroftsandreacrofts.com
tipssssseasy wins to make your websites über usable.

7. @andreacroftsandreacrofts.com
LET’S GET STARTED
Strategies for effective calls to action.

8. @andreacroftsandreacrofts.com
Be specific with
calls to action.
LEARN MORE
LEARN MORE
LEARN MORE
LEARN MORE
LEARN MORE

9. @andreacroftsandreacrofts.com
ADD TO WATCHLIST
READ THE BOOK
WATCH THE VIDEO
GET ORGANIZED
DONATE $45
Be specific with
calls to action.

10. @andreacroftsandreacrofts.com
Be succinct with
your calls to action.
READ THE REPORT AND GET STARTED

11. @andreacroftsandreacrofts.com
Use contrast
In colour, to denote emphasis.

12. @andreacroftsandreacrofts.com
Use contrast
In value, to denote hierarchy.

13. @andreacroftsandreacrofts.com
Use contrast
In typography, to denote tone and personality.

14. @andreacroftsandreacrofts.com
Contrast is our friend.
Optimal contrast for an optimal
reading experience.
High-contrast typography treatments provide
more visual gravitas, and are much easier to
read for older users and those with low vision.
EXAMPLE No. 2
Don’t go overboard, though.
Accessibility matters.
Low-contrast typography, however tempting to use,
isn’t accessible to those with even minor visual
impairments, let alone users with low vision or old age.
EXAMPLE No. 1

15. @andreacroftsandreacrofts.com
H1H2
H3

16. @andreacroftsandreacrofts.com

17. @andreacroftsandreacrofts.com

18. @andreacroftsandreacrofts.com
Reserve hover states for
clickable elements.

19. @andreacroftsandreacrofts.com
Reserve hover states for
clickable elements.

20. @andreacroftsandreacrofts.com
Content cards for the win.

21. @andreacroftsandreacrofts.com
Because, the whole card
can be made clickable

22. @andreacroftsandreacrofts.com
Because, animation

23. @andreacroftsandreacrofts.com
There’s a good reason why
all websites look the same.
These patterns create cognitive models for users.
DO THE THING
About ContactLogo The Thing

24. @andreacroftsandreacrofts.com
My website does
this cool thing.
Here’s how it provides value in your life.
DO THE THING
About ContactLogo The Thing

25. @andreacroftsandreacrofts.com
Cool it on the
busy patterns.
A cleaner, more focused approach = better UX
DO THE THING
About ContactLogo The Thing

26. @andreacroftsandreacrofts.com
toolssssto make your life easier.

27. @andreacroftsandreacrofts.com
zeplin.io

28. @andreacroftsandreacrofts.com
typography
is hard, I get it.

29. @andreacroftsandreacrofts.com
Tips and tricks for sexy web typography
Find your typeography

30. @andreacroftsandreacrofts.com
Q&A