WEB DESIGN

1
WEB DESIGN

• NSCPHS

2
Four Basic Principles

• Contrast
• Avoid elements (type, font, colors, size, space
  etc.) that are merely similar- If they are not
  the same, make them different.
• Repetition
• Repeat visual elements throughout to develop the
  organization and strengthen the unity.
• Alignment
• No arbitrary placement. Every element should
  have some visual connection with another element
  on the page.
• Proximity
• Related items should be grouped close together to
  give the reader a clear structure.

3
Alignment Review

• No arbitrary placement. Every element should
  have some visual connection with something else
  on the page.
• Element(s) may be separated based on proximity
  principle.
• Forces you to be conscious.
• Create to stronger cohesive unit.

4
Repetition

• Repeat some aspect of the design throughout the
  entire piece, e.g., fonts, sizes, colors, design
  elements, spatial relationships, etc.
• Create to stronger cohesive unit.
• Easy to follow and remember consistency.

5
Repetition 2

• Northside College Prep
• Vincent Nguyen
• 5001 N. Kedzie
• Chicago, IL
• 534-3954-370

• Northside College Prep
• Vincent Nguyen
• 5001 N. Kedzie
• Chicago, IL
• 534-3954-370

• Read the second card. At the end of the card,
  where do your eyes go ?
• Consider a document/report having headings and
  subheads with different font sizes ?????

6
Repetition 3
Networking Wireline Wireless 802.11b
802.11g
Networking Wireline Wireless 802.11b 802.11
g
7
Repetition 4
Networking 1. Wireline 2. Wireless 2.a
802.11b 2.b 802.11g
Networking Wireline Wireless 802.11b 80
2.11g
8
Repetition 5

• Commonly all headings and subheadings are the
  same typefaces, fontsizes, color, indentation
  .etc..
• Page setup and format must be consistent, e.g.,
  margin, spacing, footnotes, bullets, page number,
  etc.
• Clip art/picture may also be used not only to
  connect elements but also to provide repetition
• Do not overuse graphics as they tend to confuse
  and annoy the reader.
• The whole clip art/picture, sometimes, may not
  needed if it becomes too obvious.

9
Repetition example


You are warmly Invited To Attend...
You are warmly Invited To Attend
10
Repetition Summary

• Unify and strengthen the design by tying all
  elements together.
• Add visual interests
• 1000 words
• Avoid repeating the elements so much that becomes
  annoying or overwhelming

11
Evaluation Exercise

• Each student must evaluate 4 other students
  designs and give honest and constructive comments
  based on proximity, alignment, and repetition
  principles. Use the questions provided as a
  guideline.
• The average of evaluations is 25 of the grade.
  Your evaluations and comments of the 4 designs
  carries another 25 of the grade.
• Put a copy of your evaluation in my folder. Name
  is design1_evaluation