Designing for the Web

on

  • 279 views

 

Statistics

Views

Total Views
279
Views on SlideShare
279
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Designing for the Web Designing for the Web Presentation Transcript

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