1. When Graphic/Website Design Meets Online Course Design Applying graphic/website design principles to an online course Quebec City, Canada @ E-Learn 2007 1 Cheng-Yuan ‘Corey’ Lee, Ph.D. The University of Findlay, OH

2. Outline Preface Organization – Course Structure Organization – User Interface Overview Questions & Comments Contact Information Quebec City, Canada @ E-Learn 2007 2

3. Preface: Get to know your students Study alone – they are on their own Scanning / Browsing your course pages The Brain's strengths / capabilities What do these mean to your course design? Quebec City, Canada @ E-Learn 2007 3

4. Where are the lions? Quebec City, Canada @ E-Learn 2007 4

5. Principle # 1 : Organization Organization, Organization, Organization Students’ Satisfaction Help students establish their online learning habits Quebec City, Canada @ E-Learn 2007 5

6. Organization – Course Structure Devising Meaningful Groups Devising a Functional Sequence of Pages Within a Group Devising the Best Possible “Shape”: Balance breadth (within page width or height) and depth (optimal: 3~4) Quebec City, Canada @ E-Learn 2007 6

7. 7

8. 8

9. Organization – User Interface Communicate, don’t decorate Consist Colors / Images / Layout / Font Size Divided Line or Color Text Color: Avoid using underline text in blue. By convention, this means it is a link and clickable. Quebec City, Canada @ E-Learn 2007 9

10. Bad examples Quebec City, Canada @ E-Learn 2007 10

11. Quebec City, Canada @ E-Learn 2007 11

12. Organization – User Interface Effective Links / Navigation buttons ◦ Make Clear “What’s Hot and What’s Not”  Color  Hyperlink Text: click here to download, click here to visit  If links to a file, provide file info - PDF (4.7KB) ◦ Open the website in a separated window if it is outside of the system. ◦ Provide a short description or your expectation of your students Quebec City, Canada @ E-Learn 2007 12

13. Quebec City, Canada @ E-Learn 2007 13

14. Organization – User Interface Hyperlink Format: Convention colors and underline ◦ Link – blue, underline ◦ Mouse over – red, underline ◦ Visited link – purple, underline Be consist throughout your course Quebec City, Canada @ E-Learn 2007 14

15. Overview Organization: Course Structure ◦ Grouping / Sequence / Layout / Breadth and Depth Organization: User Interface ◦ Colors / Graphics / Links Quebec City, Canada @ E-Learn 2007 15

16. Quebec City, Canada @ E-Learn 2007 16

17. Questions & Comments Quebec City, Canada @ E-Learn 2007 17

18. Contact Information Quebec City, Canada @ E-Learn 2007 18 Cheng-Yuan ‘Corey’ Lee, clee@findlay.edu College of Education The University of Findlay Findlay, OH United States