4 design principles for web publishing (the non-designer’s web book, by robin williams )

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?

3. I am not a born programmer / designer :PI am not good at Math (born?) :PBasic 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 skillsExamples?

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

5. At the end of this talk, should be able to: • Identify and recall 4 design principles: • Contrast • Repetition • Alignment • Proximity • (Perhaps) Apply 4 design principles in web publishing using html

6. Text Graphical 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)

7. Text in Tables-cells Text & Picture Alignment

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

9. Proximity

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

11. Repetition

12. Repetition • Any Consistency? • Any Continuity?

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

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

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

16. Review (with html tags) Step 0: content only – html basic tags, <p> Step 1: proximity – table tags, <h1> Step 2: alignment – <td align="left" valign="top">, 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

17. Conclusion – 4 design principles • 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 C R A P

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