Triadic Colors

1
Triadic Colors

• Any three color space equally around a color
  wheel
• Offers wide variety of color choices
• Group elements into associated groups
• Interference between bright colors can create
  unwanted vibrations

2
Triadic
3
Triadic
4
Color Harmonies

• Most basic tips
• Use only a few different colors on one page
• Use a color harmony schemes
• Use hot and cool colors together

5
Color Harmonies
6
Color Harmonies
7
Color and Browsers

• Not all colors can be displayed on all devices
• Color of text can affect readability
• Web-Safe pallet
• Monitor Type CRT vs LCD

8
Browser Safe Colors

• Browsers can guaranty only certain number of
  colors displayed correctly
• Referred to as web-safe colors
• Previously 216 colors
• Currently 4096 colors
• Other strategies

9
Typography

• Most basic elements of web are words
• Section headings, links, blocks of text
• Typography is arranging text with attention to
• Placement
• Size
• Font choice

10
Typography
11
Font Size and Ledding

• Vertical space between lines controlled ledding
• Contributes to readability
• Ledding different for each font family

12
Font Size
13
Font Families

• Large number of text fonts
• Most professional graphic designers uses a small
  number of fonts
• Web has special consideration when it comes to
  fonts - fine detail

14
Font Families

• Typically there are a fixed number of fonts
  available for the web
• Most of them are existing ones which have been
  redesigned for the web

15
Font Families
Times New Roman
Web Typography
Georgia
16
Font Families
Sans Serif Fonts
Arial
Web Typography
Arial Black
Web Typography
17
Font Families
Sans Serif Fonts
Impact
Web Typography
Comic Sans
Web Typography
18
Font Families
Script
Web Typography
Symbols
WebTpgrahy
19
Fixed Font
template lttypename Tgtinline T const max (T
const a, T const b) // if a lt b then use
b else use a if (a lt b) return b
else return a
template lttypename Tgtinline T const max (T
const a, T const b) // if a lt b then use
b else use a if (a lt b) return b
else return a
20
Line Spacing

• Too much line spacing makes text harder to read
• Too little, and the text runs together
• Plain HTML not possible to create true ledding
• CSS offers ledding control (line spacing)

21
Line Spacing
A book could take that blow, but it sinks an
essay. A biography in two volumes is indeed the
proper depository for there, where the license
is so much wider, and hints and glimpses of
outside things make part of the feast (we refer
to the old type of Victorian volume), these yawns
and stretches hardly matter, and have indeed some
positive value of their A book could take that
blow, but it sinks an essay. A biography in two
volumes is indeed the proper depository for
there, where the license is so much wider, and
hints and glimpses of outside things make part of
the feast (we refer to the old type of Victorian
volume), these yawns and stretches hardly matter,
and have indeed some positive value of their
A book could take that blow, but it sinks an
essay. A biography in two volumes is indeed the
proper depository for there, where the license
is so much wider, and hints and glimpses of
outside things make part of the feast (we refer
to the old type of Victorian volume), these yawns
and stretches hardly matter, and have indeed some
positive value of their A book could take that
blow, but it sinks an essay. A biography in two
volumes is indeed the proper depository for
there, where the license is so much wider, and
hints and glimpses of outside things make part of
the feast (we refer to the old type of Victorian
volume), these yawns and stretches hardly matter,
and have indeed some positive value of their
22
Letter Spacing

• Increase spacing between letters
• Increases length
• Impact
• Visual Appeal

23
Letter Spacing
THE TWO TOWERS
T H E T W O T O W E R S
24
Text as Shapes
25
Capitalization
26
Antaliased Text
27
Writing for the Web

• People then to read on web by scanning
• Few read word by word
• People read 25 more slowly
• Users are impatient
• Credibility is important

28
Writing for The Web
29
Writing for The Web
30
Writing for The Web
31
Writing for The Web
32
Writing for The Web
33
Inverted Pyramids

• Reformat text to be more like newspaper article
• Point of article in first paragraph
• Start with conclusion
• Use rest of text to expand first paragraph

34
Performance

• Important to usability
• Sites that are slow drives away users
• Interruptions
• System response
• Want predicable response times

35
Performance
36
Multimedia

• Refers to combination of two or more media types
• Text
• Audio
• Graphics
• Animation
• Very effective

37
Audio

• Supplement web page by adding
• Speech
• Music
• Sounds
• Used as alternative presentation
• Inform users of events

38
Audio File Formats
39
Streaming Media

• Media is streamed to buffer
• Starts playing as soon as buffer is full
• Opposed to non-streaming plays when fully
  downloaded
• Increased performance and response time

40
Streaming
41
Download
42
Video

• Appealing medium
• Combines animation and audio
• Can be very large
• May not compress very well

43
Video Formats
44
Animation

• Synthetic motion create through artificial means
• Viable alternative to video
• Can be demonstrations or tutorials
• Dynamically generated
• Interactive

45
Animation

• Animated GIF
• Javascript
• Java
• Vector animation Flash, SVG
• Shockwave
• 3D

46
Raster vs Vector

• Vector items drawn with lines
• Smooth
• Scaled very well
• Cannot be filled with multiple colors
• Raster pixel based
• 3D shading

47
Raster vs. Vector
Raster
48
Raster vs. Vector
Vector
49
Informing the User

• Provide information to user
• Inform of potential load/play times
• Required plugins

50
Multimedia Information
51
3D for the Web

• Use of 3D very limited (still)
• Commonly used for product views
• Very computational intensive
• VRML
• Shockwave

52
Web 3D Formats
53
Controls
54
3D and Performance

• 3D files require
• Large amounts of memory
• Large amounts of bandwidth

55
Level of Detail
56
Successive Refinement
57
Mpeg-4

• Future standard
• Combines
• Audio
• Video
• Vector Graphics
• 3D Graphics

58
MPEG-4
59
Human Representation

• Means to represent virtual humans
• Called avatars
• Used to interact with user
• Typically used in online games representing
• Other users
• Non-player charactures

60
HANIM
61
Poser