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

Slides:



Advertisements
Similar presentations
3.02F Principles of Good Webpage Design 3.02 Develop webpages.
Advertisements

Typography Typography exists to honor content. — Robert Bringhurst,
Making PowerPoint Slides
Preparing Business Reports
Format for Ease of Access Importance Design Principles Design Elements.
Starting and Customizing a PowerPoint Slide Show
Chapter Concepts Discuss Fonts Understand Fonts
Principles of Graphic Design with some background on Web 2.0 styles.
Ten Guidelines for Improving Online Communications.
Document Design: Basics and Typography Technical Communication, DAHMEN.
Dobrin / Keller / Weisser : Technical Communication in the Twenty-First Century. © 2008 Pearson Education. Upper Saddle River, NJ, All Rights Reserved.
Document Design: Guidelines for Effective Information Layout Dr. Shelley Thomas ENGL 3100.
HATS - A Design Procedure for Routine Business Documents Presentation by H. Allen Brizee; Adapted from Baker (2001)
Typography Web Design Professor Frank. Characteristics of Type on the Web Magazine/book typography – 1200 dpi Computer screens – 85 ppi (maximum)
1.01A – What typefaces should be used for various displays?????
7 Selecting Design and Color Section 7.1 Identify presentation design principles Use a custom template Add pages to a navigation structure Section 7.2.
Presentation by H. Allen Brizee; Adapted from Baker (2001) Brought to you in cooperation with the Purdue Online Writing Lab HATS - A Design Procedure for.
PAGE DESIGN PAGE DESIGN Giving Your Work the Best Possible Appearance.
Stephanie Poczos Adopted from: CTUO How to Design Effective PowerPoint Presentation.
Chapter 8 Document Design 2 Page Layout
© 2012 Adobe Systems Incorporated. All Rights Reserved. Copyright 2012 Adobe Systems Incorporated. All rights reserved. ® WRITING FOR THE WEB.
Document Etiquette. White space An essential design element Should balance text and graphics Allows readers to digest what is being communicated Carries.
1 Understanding Microsoft PowerPoint What is it? Vector-based graphics program The graphics it produces are resizable The colors can be changed easily.
Unit 4 – Multimedia Element: Text
Chapter 13. Designing the Document © 2004 by Bedford/St. Martin's1 Seven Characteristics of Technical Communication Addresses particular readers. Helps.
Design Principles for PowerPoint
Desktop Publishing Tips. Desktop Publishing (DTP) is… The process of producing professional looking products.
1 Technical Communication A Reader-Centred Approach First Canadian Edition Paul V. Anderson Kerry Surman
Document and Web design has five goals:
Don’t have to be a designer to know when something just ain’t right…
© Anselm Spoerri Lecture 14 Course Review –Course Objectives –Design Principles Evaluation Criteria used for Term Project.
PowerPoint Basics Instructor: Vicki Weidler Assistant: Joaquin Obieta.
The Internet Writer’s Handbook 2/e Web Page Design Writing for the Web.
Chapter 7. Designing Documents and Web Sites © 2013 by Bedford/St. Martin's1 Document and Web design has five goals: to make a good impression on readers.
Creating Good Presentations. Planning a Presentation (Remember all the things you learned in speech class) PowerPoint as a Visual Aid (Remember all the.
Copyright © 2002 by Pearson Education, Inc., publishing as Longman publishers. All rights reserved. Chapter 8 Designing Pages and Screens Professional.
Getting Started with MS PowerPoint Instructor: Vicki Weidler Assistant: Joaquin Obieta.
Writing Tips for the Web. Tips for Writing for the Web Write for your audience, not your department. Folks come to your pages to find information. Give.
Coatbridge High School 10 Commandments For Good Design Layouts.
Info.Design © Writing for the Web Workshop Crafting Usable Content.
Document Design ENG 371 Lukowski. Things to Consider Think about your audience and their expectations – How will they read and use your document? – What.
Effective PowerPoints. This: Do not attempt to put all the text, code, or explanation of what you are talking about directly onto the slide, especially.
Page Design and Elements
Fonts and Typography Section 7.3. Typography Typography: the style, arrangement, and appearance of text Well designed text makes your page more readable.
Effective Use of PowerPoint English IV Your research presentation will include a PowerPoint or Prezi (be careful of Prezi), so let’s review effective PowerPoints.
© 2003 Pearson Education, Inc., publishing as Longman Publishers. 1 Chapter 15 Designing Pages and Documents Technical Communication, 9/e John M. Lannon.
Louisa Lambregts, Algonquin College,
Don’t have to be a designer to know when something just ain’t right…
Designing Reader- Focused Documents C H A P T E R 10.
Writing for the Web: 10 Tips Goodbye paper, hello screen. Karen Lindell
VISUAL RHETORIC All the C.R.A.P. you need to know… The Purdue Writing Lab.
Informational Design.  Informational Design involves determining a Web page’s content  Content – text and graphics  A successful Web page uses words.
Design Principles 3.02 Understand business publications Slide 1.
STANFORD UNIVERSITY INFORMATION TECHNOLOGY SERVICES A Book Review of Letting Go of the Words by Janice (Ginny Reddish) DDD Self –Directed Time January.
Design Principles Mrs. Levi. Think about it…… Who creates advertisements? Why do they look like that?
Posters How to make them. How to present them..
Tips for Preparing a Professional Presentation. The first thing that gives a professional touch to any presentation is the design.
Good design and layout The Ten commandments. 1. Research your subject Find out the key information and make notes Select pictures that tell the story.
TECHNICAL WRITING November 29, Today Gestures. Making effective PowerPoints.
Desktop Publishing Business Cards Your LogoYour own footer.
Page Design and Elements
Basic PowerPoint Guidelines
WRITING FOR THE WEB ® Copyright 2012 Adobe Systems Incorporated. All rights reserved.
ICT Communications Lesson 4: Creating Content for the Web
Creating Accessible Documents
How To Make Accessible Word Documents
DELIGHT WITH UX DESIGN RACHEL KORPELLA
Designing Pages and Documents
Layout Terms Visual Hierarchy
Presentation transcript:

Louisa Lambregts, Learning and Teaching Services Tips for Making Web and Learning Materials Impactful Don’t Make Me Read! Creating Web Content With Impact 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

What ? Why ? Who ?

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

Less is better.

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

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

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

How Do Review Web Information

Web Behaviours Scan rather than read Impatient Pause at “first reasonable option”

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

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. It is easier to understand pictures than it is to 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

Louisa Lambregts, Learning and Teaching Services Tips for Making Web and Learning Materials Impactful Don’t Make Me Read! Creating Web Content With Impact 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

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

Graphic design is visual information management uses layout, typography, and illustration leads the reader's eye through the page. Paraphrased from:

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

Balance, Unity and Focus

Chunking and White Space

Line Spacing [Type a quote from the document Or the summary of an interesting point. You can position the text box anywhere in the document. Use the Text Box Tools tab to change the formatting.]

Be Aware of Graphic Distractions design_theory/design_theory8/design_theory8.shtml

A Little Bit About Typography Serif Sans-Serif Times Roman Arial Georgia Century Gothic Web-friendly

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

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

Writing From: release-format-inverted-pyramid Plain language use Inverted pyramid Use active language Avoid passive voice unless the a polite tone is required

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

Result If you make a hole while freeing a stuck vehicle, you must fill the hole before you drive away. Writing Examples #1

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

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

Vigorous writing is concise. A sentence should contain no unnecessary words, a paragraph no unnecessary sentences, for the same reason that a drawing should have no unnecessary lines and a machine no unnecessary parts. William Strunk Jr., in Elements of Style

Questions?

Contact Me! Louisa Lambregts Twitter #lambrel X-6012