Louisa Lambregts , Learning and Teaching Services
description
Transcript of Louisa Lambregts , Learning and Teaching Services
![Page 1: Louisa Lambregts , Learning and Teaching Services](https://reader035.fdocuments.us/reader035/viewer/2022062323/56815aab550346895dc84667/html5/thumbnails/1.jpg)
• 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](https://reader035.fdocuments.us/reader035/viewer/2022062323/56815aab550346895dc84667/html5/thumbnails/2.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062323/56815aab550346895dc84667/html5/thumbnails/3.jpg)
What ? Why ? Who ?
![Page 4: Louisa Lambregts , Learning and Teaching Services](https://reader035.fdocuments.us/reader035/viewer/2022062323/56815aab550346895dc84667/html5/thumbnails/4.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062323/56815aab550346895dc84667/html5/thumbnails/5.jpg)
Less is better.
![Page 6: Louisa Lambregts , Learning and Teaching Services](https://reader035.fdocuments.us/reader035/viewer/2022062323/56815aab550346895dc84667/html5/thumbnails/6.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062323/56815aab550346895dc84667/html5/thumbnails/7.jpg)
From Don’t Make Me Think : A Common Sense Approach to Web UsabilitySteve Krug
![Page 8: Louisa Lambregts , Learning and Teaching Services](https://reader035.fdocuments.us/reader035/viewer/2022062323/56815aab550346895dc84667/html5/thumbnails/8.jpg)
From Don’t Make Me Think : A Common Sense Approach to Web UsabilitySteve Krug
![Page 9: Louisa Lambregts , Learning and Teaching Services](https://reader035.fdocuments.us/reader035/viewer/2022062323/56815aab550346895dc84667/html5/thumbnails/9.jpg)
How Do Review Web Information
![Page 10: Louisa Lambregts , Learning and Teaching Services](https://reader035.fdocuments.us/reader035/viewer/2022062323/56815aab550346895dc84667/html5/thumbnails/10.jpg)
Web Behaviours
Scan rather than read
Impatient
Pause at “first reasonableoption”
![Page 11: Louisa Lambregts , Learning and Teaching Services](https://reader035.fdocuments.us/reader035/viewer/2022062323/56815aab550346895dc84667/html5/thumbnails/11.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062323/56815aab550346895dc84667/html5/thumbnails/12.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062323/56815aab550346895dc84667/html5/thumbnails/13.jpg)
• 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](https://reader035.fdocuments.us/reader035/viewer/2022062323/56815aab550346895dc84667/html5/thumbnails/14.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062323/56815aab550346895dc84667/html5/thumbnails/15.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062323/56815aab550346895dc84667/html5/thumbnails/16.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062323/56815aab550346895dc84667/html5/thumbnails/17.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062323/56815aab550346895dc84667/html5/thumbnails/18.jpg)
![Page 19: Louisa Lambregts , Learning and Teaching Services](https://reader035.fdocuments.us/reader035/viewer/2022062323/56815aab550346895dc84667/html5/thumbnails/19.jpg)
Balance, Unity and Focus
![Page 20: Louisa Lambregts , Learning and Teaching Services](https://reader035.fdocuments.us/reader035/viewer/2022062323/56815aab550346895dc84667/html5/thumbnails/20.jpg)
Balance, Unity and Focus
![Page 21: Louisa Lambregts , Learning and Teaching Services](https://reader035.fdocuments.us/reader035/viewer/2022062323/56815aab550346895dc84667/html5/thumbnails/21.jpg)
Chunking and White Space
![Page 22: Louisa Lambregts , Learning and Teaching Services](https://reader035.fdocuments.us/reader035/viewer/2022062323/56815aab550346895dc84667/html5/thumbnails/22.jpg)
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 23: Louisa Lambregts , Learning and Teaching Services](https://reader035.fdocuments.us/reader035/viewer/2022062323/56815aab550346895dc84667/html5/thumbnails/23.jpg)
Be Aware of Graphic Distractions
http://www.webdesignhelper.co.uk/design_elements/design_theory/design_theory8/design_theory8.shtml
![Page 24: Louisa Lambregts , Learning and Teaching Services](https://reader035.fdocuments.us/reader035/viewer/2022062323/56815aab550346895dc84667/html5/thumbnails/24.jpg)
A Little Bit About Typography Serif Sans-Serif
Times Roman Arial
Georgia Century Gothic
Web-friendly
![Page 25: Louisa Lambregts , Learning and Teaching Services](https://reader035.fdocuments.us/reader035/viewer/2022062323/56815aab550346895dc84667/html5/thumbnails/25.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062323/56815aab550346895dc84667/html5/thumbnails/26.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062323/56815aab550346895dc84667/html5/thumbnails/27.jpg)
Formatting Tips
![Page 28: Louisa Lambregts , Learning and Teaching Services](https://reader035.fdocuments.us/reader035/viewer/2022062323/56815aab550346895dc84667/html5/thumbnails/28.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062323/56815aab550346895dc84667/html5/thumbnails/29.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062323/56815aab550346895dc84667/html5/thumbnails/30.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062323/56815aab550346895dc84667/html5/thumbnails/31.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062323/56815aab550346895dc84667/html5/thumbnails/32.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062323/56815aab550346895dc84667/html5/thumbnails/33.jpg)
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](https://reader035.fdocuments.us/reader035/viewer/2022062323/56815aab550346895dc84667/html5/thumbnails/34.jpg)
Questions?