A high-level overview of basic principles of UX, UI and visual design for the front-end web.

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