Transcript Typography - evl | electronic visualization laboratory

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
Triadic
Triadic
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
Color Harmonies
Color Harmonies
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
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
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
Typography
Font Size and Ledding
Vertical space between lines controlled
ledding
Contributes to readability
Ledding different for each font family
Font Size
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
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
Font Families
Times New Roman:
Web Typography
Georgia:
Font Families
Sans Serif Fonts
Arial:
Web Typography
Arial Black:
Web Typography
Font Families
Sans Serif Fonts
Impact:
Web Typography
Comic Sans:
Web Typography
Font Families
Script:
Web Typography
Symbols:
WebTpgrahy
Fixed Font
template <typename T>
inline T const & max (T const& a, T const& b)
{
// if a < b then use b else use a
if (a < b) {
return b;
else
return a;
}
template <typename T>
inline T const & max (T const& a, T
const& b)
{
// if a < b then use b else use a
if (a < b) {
return b;
else
return a;
}
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”)
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
Letter Spacing
Increase spacing between letters:
Increases length
Impact
Visual Appeal
Letter Spacing
THE TWO TOWERS
THE TWO TOWERS
Text as Shapes
Capitalization
Antaliased Text
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
Writing for The Web
Promotional
writing (control
condition)
using the
"marketese" found
on many
commercial
websites
Nebraska is filled with internationally recognized
attractions that draw large crowds of people every year,
without fail. In 1996, some of the most popular places
were Fort Robinson State Park (355,000 visitors), Scotts
Bluff National Monument (132,166), Arbor Lodge State
Historical Park & Museum (100,000), Carhenge
(86,598), Stuhr Museum of the Prairie Pioneer (60,002),
and Buffalo Bill Ranch State Historical Park (28,446).
0%
(by definition)
Writing for The Web
In 1996, six of the best-attended attractions in Nebraska
Concise text
were Fort Robinson State Park, Scotts Bluff National
with about half the
Monument, Arbor Lodge State Historical Park &
word count as the
Museum, Carhenge, Stuhr Museum of the Prairie
control condition
Pioneer, and Buffalo Bill Ranch State Historical Park.
58%
Writing for The Web
Nebraska is filled with internationally recognized
attractions that draw large crowds of people every year,
without fail. In 1996, some of the most popular places
were:
Scannable layout
using the same
text as the control
condition in a
layout that
facilitated
scanning

Fort Robinson State Park (355,000 visitors)

Scotts Bluff National Monument (132,166)

Arbor Lodge State Historical Park & Museum
(100,000)

Carhenge (86,598)

Stuhr Museum of the Prairie Pioneer (60,002)

Buffalo Bill Ranch State Historical Park (28,446).
47%
Writing for The Web
Objective
language
using neutral
rather than
subjective,
boastful, or
exaggerated
language
(otherwise the
same as the
control condition)
Nebraska has several attractions. In 1996, some of the
most-visited places were Fort Robinson State Park
(355,000 visitors), Scotts Bluff National Monument
(132,166), Arbor Lodge State Historical Park & Museum
(100,000), Carhenge (86,598), Stuhr Museum of the
Prairie Pioneer (60,002), and Buffalo Bill Ranch State
Historical Park (28,446).
27%
Writing for The Web
In 1996, six of the most-visited places in Nebraska were:
Combined
version
using all three
improvements in
writing style
together: concise,
scannable, and
objective

Fort Robinson State Park

Scotts Bluff National Monument

Arbor Lodge State Historical Park & Museum

Carhenge

Stuhr Museum of the Prairie Pioneer

Buffalo Bill Ranch State Historical Park
124%
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
Performance
Important to usability
Sites that are slow drives away users
Interruptions
System response
Want predicable response times
Performance
Response
Time
User Reaction
< 0.1 Second
< 1.0 Second
> 10 Seconds
User perceives this an instantaneous.
User noticed the delay, but no break in thought stream.
User switches to another task.
Multimedia
Refers to combination of two or more media
types:
Text
Audio
Graphics
Animation
Very effective
Audio
Supplement web page by adding:
Speech
Music
Sounds
Used as alternative presentation
Inform users of events
Audio File Formats
Extension
.wav
.au
.aiff
.mid
.mp3
.ra
Format
Name
Waveform
Sun Audio
Audio
Interchange
MIDI
MPEG
Audio
(Layer 3)
Real Audio
Originator
Streaming
Microsoft
Sun Microsystems
Apple
No
No
No
Additional
Software
No
No
No
International
MIDI Association
Fraunhofer IIS-A and
the ISO
Yes
No
Yes
No
Real Networks
Yes
Yes
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
Streaming
Download
Video
Appealing medium
Combines animation and audio
Can be very large
May not compress very well
Video Formats
Name
Audio
Video
Interleave
File
Extensio
n
.avi
QuickTime .mov, .qt
Mpeg Video .mpg,
.mpeg
Real Video
.ram, .rm
Window
Media
File
.wmv
Originator
Additional
Codec
Streaming
Additional
Player
Microsoft
Yes
No
No
Apple
Motion
Picture
Expert
Group
Real
Networks
Microsoft
Yes
No
Configurable
No
Yes
No
No
Yes
Yes
No
Yes
Yes
Animation
Synthetic motion create through artificial
means
Viable alternative to video
Can be demonstrations or tutorials
Dynamically generated
Interactive
Animation
Animated GIF
Javascript
Java
Vector animation: Flash, SVG
Shockwave
3D
Raster vs Vector
Vector: items drawn with lines
Smooth
Scaled very well
Cannot be filled with multiple colors
Raster: pixel based
3D shading
Raster vs. Vector
Raster
Raster vs. Vector
Vector
Informing the User
Provide information to user
Inform of potential load/play times
Required plugins
Multimedia Information
3D for the Web
Use of 3D very limited (still)
Commonly used for product views
Very computational intensive
VRML
Shockwave
Web 3D Formats
Name
Plug-in
Required
Yes
Streaming
VRML
Open
Standard
Yes
No
LOD
Control
Maybe
Successive
Refinement
No
Jave3D
Shockwave
Atmosphere
X3D
No
No
No
Yes
Yes
Yes
Yes
Yes
No
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Maybe
Yes
Yes
Depends
Controls
3D and Performance
3D files require:
Large amounts of memory
Large amounts of bandwidth
Level of Detail
Successive Refinement
Mpeg-4
Future standard:
Combines:
Audio
Video
Vector Graphics
3D Graphics
MPEG-4
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
HANIM
Poser