An introduction to web design and basic design concepts. Day 3 of the Yorkville Media Sessions in Toronto.

1. Web Design
and the
Creative Process
Cassie McDaniel / @cassiemc

13. What is design?
• Information architecture, user
experience design, illustration,
art, editing, curation, science,
black magic.
• Solves a problem visually

14. What is design?
• Information architecture, user
experience design, illustration,
art, editing, curation, science,
black magic.
• Solves a problem visually

16. Eames Powers of 10

17. Establish clear, measurable goals.

18. Focus on the problem, not the solution.

19. Idea

20. Content
Tone
Idea ➟ Narrative
Type Client
Imagery buy-in

21. Typography on the web
1. Displays clear hierarchy (h1, p, ul, etc.)
2. Adheres to best practices in design and
webdev
3. Has context (designers should read the
content)

22. 1. Hierarchy

23. 2. Best practices

24. 3. Context

25. Typography
Resources

26. theleagueofmoveabletype.com

27. method.ac

28. type.method.ac

29. thenounproject.com

30. copypastecharacter.com

31. Standards:
photoshopetiquette.com

33. Designing for an interface
Responsive web design

34. alistapart.com/articles/responsive-web-design

35. designmadeingermany.com

36. Resources

37. www.teehanlax.com/downloads/

38. A good layout:
1. Uses a grid system (consistency
between layouts)
2. Has clear user path
3. Is highly usable

39. 1. Grid system

40. 960.gs

41. 2. Clear user path
Know what you want from
the user, but provide options

42. 3. Usability Google is your best friend.

45. Design Criticism
• Talking with a design vocabulary
(an exercise! hooray!)
• Giving and receiving criticism

46. ! Lack of clarity

47. White space
Hierarchy
x-height

48. Thanks!
@cassiemc
www.cassiemcdaniel.com