Your SlideShare is downloading. ×
0
×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Designing for the Web

182

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
182
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Designing for the Web Supporting learning communities with ICT Lecture 4 16th October 2013
  • 2. A little history… Earliest memories?
  • 3. The Internet is not the Web
  • 4. Switching on the Web
  • 5. Moodle
  • 6. Hand coding Old school… (and new)
  • 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. Authoring HTML Using thimble, and creating the HTML by hand, write a brief introduction to your Course topic for pupils.
  • 9. More tags… <em> <strong> <a href=“…”> <img src=“…” /> <table><tr><td> <br /> <hr /> <object …> and <embed …>
  • 10. WYSIWYG HTML Editor
  • 11. Learning HTML O2 Learn / Decoded Codecademy W3Schools Shay Howe’s Guide
  • 12. HTML 5 <canvas> <video> <audio> <article>, <footer>, <header>, <nav>, <progress>, <section>, <summary>, <time>
  • 13. Thinking about design For real people, and for children…
  • 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. Design principles Content is king Intuitive navigation The pages belong to the site Layout Golden ratio Rule of thirds Symmetry Balance
  • 16. Design Principles Unity Proximity Repetition Colour and style Emphasis Placement Isolation Contrast Form follows function
  • 17. Anatomy of a webpage http://articles.sitepoint.com/article/principles-beautiful-web-design/2
  • 18. Conventions Separate content and presentation Functional formatting Links, images and media Typography Layout Navigation Home, About us, Contact us Web 2.0
  • 19. Further ideas Use of a base colour Fonts (don’t use comic sans) Hierarchy Proportion Limit choice Occam’s razor
  • 20. Standards Platforms and browsers W3C Accessibility Intellectual property Privacy
  • 21. In education? Audience Readability Engagement Interactivity Dumbing down? Pedagogy Investigation Play Social constructivist Behaviourism E-Safety
  • 22. Over to you

×