louisa lambregts , learning and teaching services

35
Louisa Lambregts, Learning and Teaching Services Tips for Making Web and Learning Materials Impactful Don’t Make Me Read! Don’t Make Me Read! Creating Web Content With Impact Louisa Lambregts, Learning and Teachin Services

Upload: pooky

Post on 06-Feb-2016

35 views

Category:

Documents


0 download

DESCRIPTION

Don’t Make Me Read! Creating Web Content With Impact. Don’t Make Me Read!. Tips for Making Web and Learning Materials I mpactful. Louisa Lambregts , Learning and Teaching Services. Louisa Lambregts , Learning and Teaching Services. How do we process web information? - PowerPoint PPT Presentation

TRANSCRIPT

Page 1: Louisa  Lambregts ,  Learning and Teaching Services

• Louisa Lambregts, Learning and Teaching Services

Tips for Making Web and Learning Materials Impactful

Don’t Make Me Read!

Don’t Make Me Read!Creating Web Content With Impact

Louisa Lambregts, Learning and Teaching Services

Page 2: Louisa  Lambregts ,  Learning and Teaching Services

How do we process web information?

Visual design of information• Text formatting• Layout• Show vs Tell

Usability and Accessibility

Plain Language

Key design decisions

Topics

Page 3: Louisa  Lambregts ,  Learning and Teaching Services

What ? Why ? Who ?

Page 4: Louisa  Lambregts ,  Learning and Teaching Services

What do we want to say? Why do we want to say it? Who are we saying it to?

Page 5: Louisa  Lambregts ,  Learning and Teaching Services

Less is better.

Page 6: Louisa  Lambregts ,  Learning and Teaching Services

Have a strong purpose and to follow that to the end.

http://www.digital-web.com/articles/form_vs_function/

Page 7: Louisa  Lambregts ,  Learning and Teaching Services

From Don’t Make Me Think : A Common Sense Approach to Web UsabilitySteve Krug

Page 8: Louisa  Lambregts ,  Learning and Teaching Services

From Don’t Make Me Think : A Common Sense Approach to Web UsabilitySteve Krug

Page 9: Louisa  Lambregts ,  Learning and Teaching Services

How Do Review Web Information

Page 10: Louisa  Lambregts ,  Learning and Teaching Services

Web Behaviours

Scan rather than read

Impatient

Pause at “first reasonableoption”

Page 11: Louisa  Lambregts ,  Learning and Teaching Services

Web Behaviours

Visual scanning moves from general perception of contrast through to finer levelsof attention. Last step is reading of headers.

Page 12: Louisa  Lambregts ,  Learning and Teaching Services

Reading online can be sore on the eyes. Not to mention, people do not read on the web –they scan the text. Now, more than ever, it is easy for all our electronic correspondence to be misunderstood if we are reading to get the gist of things.We are overloaded with information. Itis easier to understand pictures than it isto read a written descriptions. What can we do to get our messages across better?

Don’t Make Me Read!

Louisa Lambregts, Learning and Teaching Services

Tips for Making Web and Learning Materials Impactful

Attempt #1

Page 13: Louisa  Lambregts ,  Learning and Teaching Services

• Louisa Lambregts, Learning and Teaching Services

Tips for Making Web and Learning Materials Impactful

Don’t Make Me Read!

Don’t Make Me Read!Creating Web Content With Impact

Louisa Lambregts, Learning and Teaching Services

Page 14: Louisa  Lambregts ,  Learning and Teaching Services

Text as graphical elements

Optimize for visual scanning

White space

Alignment

Pattern and repetition

Contrast and focus

Consistency

Visual Design

Page 15: Louisa  Lambregts ,  Learning and Teaching Services

Graphic design is visual information management using the tools of layout, typography, and illustration to lead the reader's eye through the page.

http://webstyleguide.com/wsg3/7-page-design/3-visual-design.html

What is Graphic Design?

Page 16: Louisa  Lambregts ,  Learning and Teaching Services

Graphic design is

• visual information management

• uses layout, typography, and illustration

• leads the reader's eye through the page.

Paraphrased from: http://webstyleguide.com/wsg3/7-page-design/3-visual-design.html

Page 17: Louisa  Lambregts ,  Learning and Teaching Services

Graphic design is

visual information management using the tools of layout, typography,and illustration to lead the reader's eye through the page.

http://webstyleguide.com/wsg3/7-page-design/3-visual-design.html

Page 18: Louisa  Lambregts ,  Learning and Teaching Services
Page 19: Louisa  Lambregts ,  Learning and Teaching Services

Balance, Unity and Focus

Page 20: Louisa  Lambregts ,  Learning and Teaching Services

Balance, Unity and Focus

Page 21: Louisa  Lambregts ,  Learning and Teaching Services

Chunking and White Space

Page 22: Louisa  Lambregts ,  Learning and Teaching Services

Line Spacing

[Type a quote from the documentOr the summary of an interesting point. You can position the text box anywherein the document. Use the Text Box Tools tab to change the formatting .]

Page 24: Louisa  Lambregts ,  Learning and Teaching Services

A Little Bit About Typography Serif Sans-Serif

Times Roman Arial

Georgia Century Gothic

Web-friendly

Page 25: Louisa  Lambregts ,  Learning and Teaching Services

Content separate from presentation

Style sheets

Use formatting elements for their true function – not for styling

Use bold and italics for emphasis, not styling

Use header styles – avoid manual font sizing

Formatting and Accessibility

Page 26: Louisa  Lambregts ,  Learning and Teaching Services

Use styles and headers for visual hierarchy

Adjust line and paragraph spacing

Reserve underlines for hyperlinks

Add links within content to additional information

Use bold and italics for emphasis, not styling

Left-align paragraphs rather than centre them

Formatting Tips

Page 27: Louisa  Lambregts ,  Learning and Teaching Services

Formatting Tips

Page 28: Louisa  Lambregts ,  Learning and Teaching Services

Writing

From: http://www.bloggingprweb.com/effective-press-release-format-inverted-pyramid

Plain language use

Inverted pyramid

Use active language

Avoid passive voice unless the a polite tone is required

Page 29: Louisa  Lambregts ,  Learning and Teaching Services

When the process of freeing a vehicle that has been stuck results in ruts or holes, the operator will fill the rut or hole created by such activity before removing the vehicle from the immediate area.

Writing Example #1

Page 30: Louisa  Lambregts ,  Learning and Teaching Services

Result

If you make a hole while freeing a stuck vehicle, you must fill the hole before you drive away.

Writing Examples #1

Page 31: Louisa  Lambregts ,  Learning and Teaching Services

In response to the concerns, the NCAA announced that the baseball rules committee will recommend a maximum batted-ball exit velocity of 93 mph and a change in the size and weight specs of non-wooden bats beginning with the 1999 season.

Writing Example #2

Page 32: Louisa  Lambregts ,  Learning and Teaching Services

Result

NCAA Suggests Batting Changes

Growing concerns over size and weights of bats resulted in the following changes starting with the 1999 season:

• Batted-ball exit speed maximum of 93 mph

• Change in size and weight specifications for non wooden bats

Writing Examples #1

Page 33: Louisa  Lambregts ,  Learning and Teaching Services

Vigorous writing is concise.

A sentence should contain no unnecessary words, a paragraph no unnecessary sentences, for the same reason that a drawing shouldhave no unnecessary lines and a machine no unnecessary parts.

William Strunk Jr., in Elements of Style

Page 34: Louisa  Lambregts ,  Learning and Teaching Services

Questions?

Page 35: Louisa  Lambregts ,  Learning and Teaching Services

Contact Me!

Louisa LambregtsTwitter #lambrel

X-6012

[email protected]