Intro to Web Design

858 views

Published on

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

Published in: Design, Technology, Business
  • Be the first to comment

  • Be the first to like this

Intro to Web Design

  1. 1. Web Design and theCreative Process Cassie McDaniel / @cassiemc
  2. 2. What is design?• Information architecture, user experience design, illustration, art, editing, curation, science, black magic.• Solves a problem visually
  3. 3. What is design?• Information architecture, user experience design, illustration, art, editing, curation, science, black magic.• Solves a problem visually
  4. 4. Eames Powers of 10
  5. 5. Establish clear, measurable goals.
  6. 6. Focus on the problem, not the solution.
  7. 7. Idea
  8. 8. Content Tone Idea ➟ NarrativeType Client Imagery buy-in
  9. 9. Typography on the web1. Displays clear hierarchy (h1, p, ul, etc.)2. Adheres to best practices in design and webdev3. Has context (designers should read the content)
  10. 10. 1. Hierarchy
  11. 11. 2. Best practices
  12. 12. 3. Context
  13. 13. Typography Resources
  14. 14. theleagueofmoveabletype.com
  15. 15. method.ac
  16. 16. type.method.ac
  17. 17. thenounproject.com
  18. 18. copypastecharacter.com
  19. 19. Standards:photoshopetiquette.com
  20. 20. Designing for an interface Responsive web design
  21. 21. alistapart.com/articles/responsive-web-design
  22. 22. designmadeingermany.com
  23. 23. Resources
  24. 24. www.teehanlax.com/downloads/
  25. 25. A good layout:1. Uses a grid system (consistency between layouts)2. Has clear user path3. Is highly usable
  26. 26. 1. Grid system
  27. 27. 960.gs
  28. 28. 2. Clear user pathKnow what you want fromthe user, but provide options
  29. 29. 3. Usability Google is your best friend.
  30. 30. Design Criticism• Talking with a design vocabulary (an exercise! hooray!)• Giving and receiving criticism
  31. 31. ! Lack of clarity
  32. 32. White space Hierarchy x-height
  33. 33. Thanks! @cassiemcwww.cassiemcdaniel.com

×