0

Designing for the Web

190

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
190
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "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 http://articles.sitepoint.com/article/principles-beautiful-web-design/2
  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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×