1. 4 design principles for web publishing (the non-designer’s web book, by robin williams) Leong Lee, Ph.D. University of Missouri (MS&T) Assistant Professor, Dept. of Computer Science Austin Peay State University, Tennessee

2. Questions Two computer science graduate A & B, will graduate in May next year (not 1965) Both can write good programs, same GPA, both can design functional user interfaces A’s user interfaces are pleasant, professional, and follow basic design principles; A is also experienced in the latest web interface programming tools B’s user interfaces are ugly, something is just not right; B has no web interface design / programming experience If you are an employer looking for a software developer (only one), which one will you employ (in today’s economy with a tight budget)? Why? 2

3. I am not a born programmer / designer :P I am not good at Math (born?) :P Basic web design principles are easy (1 course), and they can be incorporated into programming codes (it will be fun) CS students can be trained in basic design skills, like they can be trained in programming skills Examples? 3

4. Functional site following 4 basic design principles (AmphibAnat.org, 2007 to 2010) NSF funded ($1,116K) Web interface design: (different design templates) Client-side programming: JavaScript, CSS, html Server-side programming: C#.net Relational database design/admin: Microsoft SQL Server Server setup/admin: Microsoft IIS web server and Microsoft Windows server 4

5. At the end of this talk, should be able to: Identify and recall 4 design principles: – C ontrast – R epetition – A lignment – P roximity (Perhaps) Apply 4 design principles in web publishing using html 5

6. Alignment Items are lined up with each other Every element on a page should have some visual connection with another element on the page Choose one alignment and use it on the entire page (don’t mix) 6 Text Graphical

7. Alignment 7 Text in Tables-cells Text & Picture

8. Proximity Items relating to each other should be grouped close together When several elements are in close proximity to each other, they become one visual unit rather than several separate elements 8

9. Proximity 9

10. Repetition Repeat the visual elements of the design throughout the page(s) Consistency Buttons, fonts, colors, style, illustrations, format, layout, typography etc 10

11. Repetition 11

12. Repetition 12 Any Consistency? Any Continuity?

13. Repetition 13 Do these Web pages look like they belong together?

14. Contrast If the elements are not the same, make them very different – type, rules, graphics, color, texture, etc 14 >TEXT Color, Size & Grouping

15. Contrast 15 Through Contrast, creates a Focal Point ! So which layout is better?

16. Review (with html tags) Step 0: content only – html basic tags, Step 1: proximity – table tags, Step 2: alignment –, height tag Step 3.1: repetition – style tags Step 3.2: repetition – background-color: #009999 Step 4: contrast – other style tags, color, bold etc Note: only text, no image This is a good step by step lab exercise 16

17. C R A P Conclusion – 4 design principles 17 Contrast – not the same? make them very different Repetition – repeat visual elements -> same site / identity Alignment – line up items, choose only one alignment Proximity – items related -> close together

18. 4 design principles for web publishing ::: questions? Leong Lee, Ph.D. University of Missouri (MS&T) Visiting Assistant Professor, Dept of Computer Science University of North Carolina at Greensboro