Designing for the Web
Download as PPTX, PDF0 likes790 views
This document discusses web design and development. It covers the history of the internet and the web, introduces HTML coding, and reviews design principles for effective web pages like using white space and intuitive navigation. It also discusses web standards, using the web in education, and asks readers to start designing their own web page content.
More Related Content
Similar to Designing for the Web(20)
![From Curiosity to ROI — Cost-Benefit Analysis of Agentic Automation [3/6]](https://cdn.slidesharecdn.com/ss_thumbnails/session-3-250903141006-a3917e1a-thumbnail.jpg?width=560&fit=bounds)
Designing for the Web
- 1. Designing for theWeb Supporting learning communities with ICT Lecture 4 16th October 2013
- 2. A little history… Earliestmemories?
- 3. The Internet isnot the Web
- 5.
- 10.
- 16. Hand coding Old school…(and new)
- 17. HTML by hand <html> <head> <title>Myfirst web page</title> </head> <body> <h1>This is my first web page</h1> <p>Hello World!</p> </body> </html>
- 18. Authoring HTML Using thimble,and creating the HTML by hand, write a brief introduction to your Course topic for pupils.
- 19. More tags… <em> <strong> <a href=“…”> <imgsrc=“…” /> <table><tr><td> <br /> <hr /> <object …> and <embed …>
- 20.
- 21. Learning HTML O2 Learn/ Decoded Codecademy W3Schools Shay Howe’s Guide
- 22. HTML 5 <canvas> <video> <audio> <article>, <footer>,<header>, <nav>, <progress>, <section>, <summary>, <time>
- 23. Thinking about design Forreal people, and for children…
- 33. Effective web design Don’tmake 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
- 34. Design principles Content isking Intuitive navigation The pages belong to the site Layout Golden ratio Rule of thirds Symmetry Balance
- 35. Design Principles Unity Proximity Repetition Colour andstyle Emphasis Placement Isolation Contrast Form follows function
- 36. Anatomy of awebpage http://articles.sitepoint.com/article/principles-beautiful-web-design/2
- 37. Conventions Separate content and presentation Functionalformatting Links, images and media Typography Layout Navigation Home, About us, Contact us Web 2.0
- 38. Further ideas Use ofa base colour Fonts (don’t use comic sans) Hierarchy Proportion Limit choice Occam’s razor
- 39.
- 40.
- 48.