A presentation over an introduction to web design for freeCodeCamp using resources available from The Interaction Design Foundation.

1. Intro to Web Design
By: Dodzi Dzakuma for

2. Who Am I?
Dodzi (DOUGH-gee)
Interaction Design
Foundation – Local
Leader
Zurb Foundation

3. Topics of the Day
Design and Design Thinking
Tools and Basic Knowledge
Design Workflow
UX Case Studies
Resources and Ideas

4. Design and Design Thinking

5. What is design?

7. Design Thinking
Empathize Define Ideate Prototype Test

8. Solving the
Problem
 Push Boundaries
 Precision and Features
 All Boxes Checked and Approachable

9. Think about User Context

10. A Content Approach
Email
Web PageDashboard
App

11. Tools and Basic Knowledge

12. Tools of the Trade
Pen and (Graph) paper
A mockup / protyping
A couple of web browsers (one with
dev tools)
Text editor (that you want to learn or
know and love)

13. Wireframe ⇒ Mockup ⇒ Prototype
 Lo-fi
Faster Easier to change
 Hi-fi
Harder to change
 Full Blown Prototype
High cost in changes

14. Learning CSS Selectors

15. Design Patterns
Content organization
Data Input
User Interaction
Alerts
Cards

16. Understand the Basics of Responsive
Design

17. Frontend Frameworks
Foundation
Bootstrap
Bulma
Skeleton

18. Design Workflow

19. Take 3 Passes at the Issue
1. Rough pass
2. Prototyping pass
3. Finishing pass

20. 1. Mocking Up Your Design
Start small – Think Responsive
Sketch a lot
Move to digital tools after sketches are
complete

21. 2. Prototyping

22. 3. Polishing
Decide on some fonts /
pairings
Try to reduce image size
according to device
Leverage icon packs

23. UX Case Studies

24. Crash Course to Gestalt Principals
Law of Proximity
Things that are close together
feel like a group
Law of Similarity
Things that look the same act the
same
Figure Ground Distinction
Subduing background colors
emphasizes the foreground
Law of Common Region
Things that are in a border feel
like a group

26. Email

27. Dashboard

28. Page

29. App

30. Japanese Bento
Boxes

32. App

33. Email

34. Page

35. Dashboard

36. Resources and Ideas

37. Advanced Ideas
Look through grid systems
Browse through a design system
Dark theme trend
Jennifer Dewalt’s 180 pages in 180 days project

38. Books
Steve Krug - Don’t Make Me Think
Christina Wodtke - Pencil Me In
David Kadavy – Design for Hackers
Ellen Lupton - Thinking with Type

39. Additional
Resources
The Interaction Design Foundation
 5 Stages in The Design Thinking Process
 Glossary of Human computer Interaction
 Gestalt Principles
Travesty Media
 Emmet for Faster HTML & CSS Workflow
Zurb Foundation
 The Foundation Grid

40. Questions