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?) :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?

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

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)

Text

Graphical

7

Alignment

Text in Tables-cells

Text & Picture

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

• If the elements are not the same, make them very different – type, rules, graphics, color, texture, etc

>TEXT Color, Size & Grouping

15

ContrastThrough Contrast, creates a Focal Point !

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

• C• R• A• P

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

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