Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Designing for the Web


Published on

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

  • Be the first to like this

Designing for the Web

  1. 1. Designing for the Web Supporting learning communities with ICT Lecture 4 16th October 2013
  2. 2. A little history… Earliest memories?
  3. 3. The Internet is not the Web
  4. 4. Switching on the Web
  5. 5. Moodle
  6. 6. Hand coding Old school… (and new)
  7. 7. HTML by hand <html> <head> <title>My first web page</title> </head> <body> <h1>This is my first web page</h1> <p>Hello World!</p> </body> </html>
  8. 8. Authoring HTML Using thimble, and creating the HTML by hand, write a brief introduction to your Course topic for pupils.
  9. 9. More tags… <em> <strong> <a href=“…”> <img src=“…” /> <table><tr><td> <br /> <hr /> <object …> and <embed …>
  10. 10. WYSIWYG HTML Editor
  11. 11. Learning HTML O2 Learn / Decoded Codecademy W3Schools Shay Howe’s Guide
  12. 12. HTML 5 <canvas> <video> <audio> <article>, <footer>, <header>, <nav>, <progress>, <section>, <summary>, <time>
  13. 13. Thinking about design For real people, and for children…
  14. 14. Effective web design Don’t make users think Don’t squander users’ patience Make use of effective writing Strive for simplicity Don’t be afraid of white space Conventions are our friends Test early, test often A selection from Friedman, 2008
  15. 15. Design principles Content is king Intuitive navigation The pages belong to the site Layout Golden ratio Rule of thirds Symmetry Balance
  16. 16. Design Principles Unity Proximity Repetition Colour and style Emphasis Placement Isolation Contrast Form follows function
  17. 17. Anatomy of a webpage
  18. 18. Conventions Separate content and presentation Functional formatting Links, images and media Typography Layout Navigation Home, About us, Contact us Web 2.0
  19. 19. Further ideas Use of a base colour Fonts (don’t use comic sans) Hierarchy Proportion Limit choice Occam’s razor
  20. 20. Standards Platforms and browsers W3C Accessibility Intellectual property Privacy
  21. 21. In education? Audience Readability Engagement Interactivity Dumbing down? Pedagogy Investigation Play Social constructivist Behaviourism E-Safety
  22. 22. Over to you