SlideShare a Scribd company logo
1 of 48
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

More Related Content

What's hot (11)

Screencasting for Staff and Student Development - MAME 2010
Screencasting for Staff and Student Development - MAME 2010Screencasting for Staff and Student Development - MAME 2010
Screencasting for Staff and Student Development - MAME 2010
 
The Use Of Emails And Blogs In Education
The Use Of Emails And Blogs In EducationThe Use Of Emails And Blogs In Education
The Use Of Emails And Blogs In Education
 
Analysis on ABCSTTU Model of Homdepot
Analysis on ABCSTTU Model of HomdepotAnalysis on ABCSTTU Model of Homdepot
Analysis on ABCSTTU Model of Homdepot
 
Silkia, Mary Moore #2
Silkia, Mary Moore #2Silkia, Mary Moore #2
Silkia, Mary Moore #2
 
Distance peerlessons
Distance peerlessonsDistance peerlessons
Distance peerlessons
 
Distance peerlessons
Distance peerlessonsDistance peerlessons
Distance peerlessons
 
Feb18 Thurs
Feb18 ThursFeb18 Thurs
Feb18 Thurs
 
Welcoming laptops into the classroom
Welcoming laptops into the classroomWelcoming laptops into the classroom
Welcoming laptops into the classroom
 
10 Things To Like About Moodle
10 Things To Like About Moodle10 Things To Like About Moodle
10 Things To Like About Moodle
 
ePortfolios, blogs and social media for business
ePortfolios, blogs and social media for businessePortfolios, blogs and social media for business
ePortfolios, blogs and social media for business
 
Moodle: Coloured Boxes
Moodle: Coloured BoxesMoodle: Coloured Boxes
Moodle: Coloured Boxes
 

Similar to Designing for the Web

HTML CSS Best Practices
HTML CSS Best PracticesHTML CSS Best Practices
HTML CSS Best Practices
hoctudau
 
VLE Development Day - Moodle:Beyond the Basics
VLE Development Day - Moodle:Beyond the BasicsVLE Development Day - Moodle:Beyond the Basics
VLE Development Day - Moodle:Beyond the Basics
Chris Hebbes
 
Lecture1: HTML and JavaScript
Lecture1: HTML and JavaScriptLecture1: HTML and JavaScript
Lecture1: HTML and JavaScript
omarshehab
 

Similar to Designing for the Web (20)

HTML5 Essential Training
HTML5 Essential TrainingHTML5 Essential Training
HTML5 Essential Training
 
Basic of web design
Basic of web designBasic of web design
Basic of web design
 
HTML CSS Best Practices
HTML CSS Best PracticesHTML CSS Best Practices
HTML CSS Best Practices
 
Using HTML5 sensibly
Using HTML5 sensiblyUsing HTML5 sensibly
Using HTML5 sensibly
 
Intro To Twitter Bootstrap
Intro To Twitter BootstrapIntro To Twitter Bootstrap
Intro To Twitter Bootstrap
 
HTML (Basic to Advance)
HTML (Basic to Advance)HTML (Basic to Advance)
HTML (Basic to Advance)
 
Dhtml chapter2
Dhtml chapter2Dhtml chapter2
Dhtml chapter2
 
Front end full stack development module 1pptx
Front end full stack development module 1pptxFront end full stack development module 1pptx
Front end full stack development module 1pptx
 
Ifi7174 lesson1
Ifi7174 lesson1Ifi7174 lesson1
Ifi7174 lesson1
 
VLE Development Day - Moodle:Beyond the Basics
VLE Development Day - Moodle:Beyond the BasicsVLE Development Day - Moodle:Beyond the Basics
VLE Development Day - Moodle:Beyond the Basics
 
Web designing workshop
Web designing workshopWeb designing workshop
Web designing workshop
 
HTML5 : How to start learning HTML5 (easy and fast)
HTML5 : How to start learning HTML5 (easy and fast)HTML5 : How to start learning HTML5 (easy and fast)
HTML5 : How to start learning HTML5 (easy and fast)
 
Lesson 01
Lesson 01Lesson 01
Lesson 01
 
Lecture1: HTML and JavaScript
Lecture1: HTML and JavaScriptLecture1: HTML and JavaScript
Lecture1: HTML and JavaScript
 
Meeting 01
Meeting 01Meeting 01
Meeting 01
 
Core Web Standards and Competencies - WritersUA East 2015, Scott DeLoach, Cli...
Core Web Standards and Competencies - WritersUA East 2015, Scott DeLoach, Cli...Core Web Standards and Competencies - WritersUA East 2015, Scott DeLoach, Cli...
Core Web Standards and Competencies - WritersUA East 2015, Scott DeLoach, Cli...
 
Day1
Day1Day1
Day1
 
Building User-Centred Websites with Drupal
Building User-Centred Websites with DrupalBuilding User-Centred Websites with Drupal
Building User-Centred Websites with Drupal
 
Web designing workshop
Web designing workshopWeb designing workshop
Web designing workshop
 
WordCamp Denmark Keynote
WordCamp Denmark KeynoteWordCamp Denmark Keynote
WordCamp Denmark Keynote
 

More from Miles Berry

Video and the reflective practitioner (Y1 T&L)
Video and the reflective practitioner (Y1 T&L)Video and the reflective practitioner (Y1 T&L)
Video and the reflective practitioner (Y1 T&L)
Miles Berry
 
Roehampton computing workshop 2
Roehampton computing workshop 2Roehampton computing workshop 2
Roehampton computing workshop 2
Miles Berry
 
Roehampton computing workshop 1
Roehampton computing workshop 1Roehampton computing workshop 1
Roehampton computing workshop 1
Miles Berry
 
Y3 ssp 12 13 l12
Y3 ssp 12 13 l12Y3 ssp 12 13 l12
Y3 ssp 12 13 l12
Miles Berry
 
T and L websites (lecture 1)
T and L websites (lecture 1)T and L websites (lecture 1)
T and L websites (lecture 1)
Miles Berry
 
12 13 y1 ict ssp l13
12 13 y1 ict ssp l1312 13 y1 ict ssp l13
12 13 y1 ict ssp l13
Miles Berry
 

More from Miles Berry (20)

Croydon 121
Croydon 121Croydon 121
Croydon 121
 
Computing: planning, assessment and resources
Computing: planning, assessment and resourcesComputing: planning, assessment and resources
Computing: planning, assessment and resources
 
Elsoi8
Elsoi8Elsoi8
Elsoi8
 
Video and the reflective practitioner (Y1 T&L)
Video and the reflective practitioner (Y1 T&L)Video and the reflective practitioner (Y1 T&L)
Video and the reflective practitioner (Y1 T&L)
 
Roehampton computing workshop 2
Roehampton computing workshop 2Roehampton computing workshop 2
Roehampton computing workshop 2
 
Roehampton computing workshop 1
Roehampton computing workshop 1Roehampton computing workshop 1
Roehampton computing workshop 1
 
Computing curriculum design workshop
Computing curriculum design workshopComputing curriculum design workshop
Computing curriculum design workshop
 
Robotics 12 13 y1 ict ssp l18
Robotics 12 13 y1 ict ssp l18Robotics 12 13 y1 ict ssp l18
Robotics 12 13 y1 ict ssp l18
 
Innovation and the future: Y3 ssp 12 13 l15
Innovation and the future: Y3 ssp 12 13 l15Innovation and the future: Y3 ssp 12 13 l15
Innovation and the future: Y3 ssp 12 13 l15
 
Professional Development Y3 ssp 12 13 l14
Professional Development Y3 ssp 12 13 l14Professional Development Y3 ssp 12 13 l14
Professional Development Y3 ssp 12 13 l14
 
Mobile app development 12 13 y1 ict ssp l17 rev
Mobile app development 12 13 y1 ict ssp l17 revMobile app development 12 13 y1 ict ssp l17 rev
Mobile app development 12 13 y1 ict ssp l17 rev
 
Resources and Support - Y3 ssp 12 13 l13
Resources and Support - Y3 ssp 12 13 l13Resources and Support - Y3 ssp 12 13 l13
Resources and Support - Y3 ssp 12 13 l13
 
Media and Design. Y3 Teaching and Learning L2
Media and Design. Y3 Teaching and Learning L2Media and Design. Y3 Teaching and Learning L2
Media and Design. Y3 Teaching and Learning L2
 
Working with virtual worlds: y1 ict ssp l16
Working with virtual worlds: y1 ict ssp l16Working with virtual worlds: y1 ict ssp l16
Working with virtual worlds: y1 ict ssp l16
 
Y3 ssp 12 13 l12
Y3 ssp 12 13 l12Y3 ssp 12 13 l12
Y3 ssp 12 13 l12
 
T and L websites (lecture 1)
T and L websites (lecture 1)T and L websites (lecture 1)
T and L websites (lecture 1)
 
Developing ideas with video - Y1 ICT Specialists, Lecture 15.
Developing ideas with video - Y1 ICT Specialists, Lecture 15.Developing ideas with video - Y1 ICT Specialists, Lecture 15.
Developing ideas with video - Y1 ICT Specialists, Lecture 15.
 
Toys, play and games : Y1 ICT, Lecture 5
Toys, play and games : Y1 ICT, Lecture 5Toys, play and games : Y1 ICT, Lecture 5
Toys, play and games : Y1 ICT, Lecture 5
 
Year 1 Lecture 4 - video workshop
Year 1 Lecture 4 - video workshopYear 1 Lecture 4 - video workshop
Year 1 Lecture 4 - video workshop
 
12 13 y1 ict ssp l13
12 13 y1 ict ssp l1312 13 y1 ict ssp l13
12 13 y1 ict ssp l13
 

Recently uploaded

Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlFuture Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Peter Udo Diehl
 
Structuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessStructuring Teams and Portfolios for Success
Structuring Teams and Portfolios for Success
UXDXConf
 

Recently uploaded (20)

AI revolution and Salesforce, Jiří Karpíšek
AI revolution and Salesforce, Jiří KarpíšekAI revolution and Salesforce, Jiří Karpíšek
AI revolution and Salesforce, Jiří Karpíšek
 
The UX of Automation by AJ King, Senior UX Researcher, Ocado
The UX of Automation by AJ King, Senior UX Researcher, OcadoThe UX of Automation by AJ King, Senior UX Researcher, Ocado
The UX of Automation by AJ King, Senior UX Researcher, Ocado
 
Connecting the Dots in Product Design at KAYAK
Connecting the Dots in Product Design at KAYAKConnecting the Dots in Product Design at KAYAK
Connecting the Dots in Product Design at KAYAK
 
Strategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering TeamsStrategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering Teams
 
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptxUnpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
 
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
 
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
 
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlFuture Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
 
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdfThe Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
 
Free and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
Free and Effective: Making Flows Publicly Accessible, Yumi IbrahimzadeFree and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
Free and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
 
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
 
PLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. StartupsPLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. Startups
 
10 Differences between Sales Cloud and CPQ, Blanka Doktorová
10 Differences between Sales Cloud and CPQ, Blanka Doktorová10 Differences between Sales Cloud and CPQ, Blanka Doktorová
10 Differences between Sales Cloud and CPQ, Blanka Doktorová
 
Structuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessStructuring Teams and Portfolios for Success
Structuring Teams and Portfolios for Success
 
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfIntroduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
 
AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101
 
A Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System StrategyA Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System Strategy
 
ECS 2024 Teams Premium - Pretty Secure
ECS 2024   Teams Premium - Pretty SecureECS 2024   Teams Premium - Pretty Secure
ECS 2024 Teams Premium - Pretty Secure
 
Designing for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at ComcastDesigning for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at Comcast
 
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdfHow Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
 

Designing for the Web