Web design1 2010/11

14
www.le.ac.uk/studentdevelopment Student Development Writing for the Web Matthew Mobbs e: [email protected] web: mjmobbs.com twitter: mjmobbs

description

 

Transcript of Web design1 2010/11

Page 1: Web design1 2010/11

www.le.ac.uk/studentdevelopment

Student Development

Writing for the Web

Matthew Mobbs

e: [email protected]

web: mjmobbs.com

twitter: mjmobbs

Page 2: Web design1 2010/11

www.le.ac.uk/studentdevelopment

Overview of the Course

Aim of the course:

Give you the skills to present research professionally on web

Teaching Overview• Session 1: Writing for the web• Session 2: Basic Introduction to HTML• Session 3: Making a website

Page 3: Web design1 2010/11

www.le.ac.uk/studentdevelopment

Overview of the CourseAssessment• A small group project, following the pattern of a commercial

web publishing group. • Production of a World Wide Web site which provides an

overview or outline of an area of multidisciplinary research. As well as testing your technical knowledge (as taught during the practical sessions), equal emphasis will be placed on team-working skills, and the ability to present research to a non-specialist audience.

• Submission Date: Friday 25th February 2011

Page 4: Web design1 2010/11

www.le.ac.uk/studentdevelopment

Session 1: Writing for the web

1. Why the web?

2. What makes a good website?

3. Designing and structuring a website

4. Group exercise

Page 5: Web design1 2010/11

www.le.ac.uk/studentdevelopment

Why the web?• Quick way to release

latest research

• No publishing cost

• Wide spread

• Create contacts with similar researchers

• Raise educational awareness to general public

http://en.wikipedia.org/wiki/File:Sna_large.png

Page 6: Web design1 2010/11

www.le.ac.uk/studentdevelopment

A word of warning!• The web is full of poor quality

unsupported research.

• A professional style and presentation is vital to make your research stand out.

How is this achieved?

Page 7: Web design1 2010/11

www.le.ac.uk/studentdevelopment

Four Key Elements of web design

Presentation• Impact• First view: what is the ‘home’ page

like?• Official/academic source?• Clear headings/colour/text?• Adverts

Structure• Contents/abstract• Clear what the site is about • Level of knowledge required• Headings/subheadings• Ease of navigation

Referencing & Illustrations• Referencing Materials online:

same rules as published work• Student Development Guide• Linking references: Hyperlink or

Bibliography• How are illustrations used: Disturb

flow or thumbnails?

Writing Style• Long pages are

difficult to read• Short blocks of text –

Headings/pages• Style of prose –

target audience

Main HeadingSub Heading• textSub Heading 2• text

Main HeadingSub Heading

Sub Heading 2

Page 8: Web design1 2010/11

www.le.ac.uk/studentdevelopment

Four Key Elements of web design

Presentation• Impact• First view: what is the ‘home’ page

like?• Official/academic source?• Clear headings/colour/text?• Adverts

Structure• Contents/abstract• Clear what the site is about • Level of knowledge required• Headings/subheadings• Ease of navigation

Referencing & Illustrations• Referencing Materials online:

same rules as published work• Student Development Guide• Linking references: Hyperlink or

Bibliography• How are illustrations used: Disturb

flow or thumbnails?

Writing Style• Long pages are

difficult to read• Short blocks of text –

Headings/pages• Style of prose –

target audience

Main HeadingSub Heading• textSub Heading 2• text

Main HeadingSub Heading

Sub Heading 2

Page 9: Web design1 2010/11

www.le.ac.uk/studentdevelopment

Lets have a look at some websites

http://mjmobbs.com/?p=403

Page 10: Web design1 2010/11

www.le.ac.uk/studentdevelopment

Lets have a look at some websites

History of the Norman Worldhttp://www.mondes-normands.caen.fr/angleterre/histoires/index_histoires.htm

Documents for the History of Economicshttp://www.efm.bris.ac.uk/het/index.htm

The abbey of Saint-Germain of Auxerrehttp://www.culture.gouv.fr/culture/arcnat/auxerre/en/index.htm

Page 11: Web design1 2010/11

www.le.ac.uk/studentdevelopment

Structuring a Website

What the service is

Staff

Writing

Maths

Essays

Future Events

Past Events

About Us Events

Resources

www.le.ac.uk/studentdevelopment

Page 12: Web design1 2010/11

www.le.ac.uk/studentdevelopment

Structuring a WebsiteHome

About Us Resources Events

What the service is

Staff

Matt Mobbs

Writing

Maths

Essays

Future Events

Past Events

Handouts

Page 13: Web design1 2010/11

www.le.ac.uk/studentdevelopment

Structuring a Website

About Us

Staff

Home

What the service is

Matt Mobbs

Events

Past Events

Future Events

Handouts

Resources

Writing

Maths

Essays

Page 14: Web design1 2010/11

www.le.ac.uk/studentdevelopment

Group ExerciseIn a small group (2 or 3) you will be given a scenario. The customer in the scenario needs a website to represent there work.

Design and structure the website. Consider:

• Customer requirements

• The target audience

• How it is best to structure/navigate to the information

• The appearance of the site

• The style of language used