Information Visualization Course
Web Design
Prof. Anselm Spoerri
aspoerri@rutgers.edu
© Anselm Spoerri
Lecture 3 – Overview
Meaning
– Graphic Design | Grid Layout
Mechanics
– Create 1st Website Using Dreamweaver CS6
– Adding Navigation and Pages
– Adding menu bar
– Creating and linking multiple pages
– XHTML Basics - Links, Images
– Image Formats
– Short Assignment 1
© Anselm Spoerri
Practical Graphic Design
Graphic Design = Organic Process
– Cultural, Contextual, Personal
– Client & Designer Interaction
Good Design is “Stolen”
– Emulate what speaks to you
Need Practical Foundation
– Functional Swiss Design School
– Grid Systems
© Anselm Spoerri
Swiss Design School
Based on Bauhaus
– Form follows Function
– Minimalism, Universality, Rationality, Abstraction and Structure
Focus on Formal Purity rather than Content
Grid System
– Divide 2-D plane or 3-D space into Smaller Fields
– Intermediate Space so that Captions and Pictures Don’t Touch
© Anselm Spoerri
Grid System – 8 Fields Example
© Anselm Spoerri
Grid System – 8 Fields Example
Swiss Design School
The great Swiss innovators of the 1950s and
1960s can be seen as representing the classic
phase of modernism, the heirs to Bauhaus graphic
design and other early modern European graphic
designers. These Swiss innovators applied the
Bauhaus functionalist ethic to a systematic graphic
Caption Text
method that shared the Bauhaus values of
minimalism, universality, rationality, abstraction
The method, symbolized by the typeface Helvetica,
and structural expressionism. This fresh and
was enthusiastically adopted by several corporate
highly professional graphic design was first
and institutional design groups, including Container
transmitted beyond Switzerland to the rest of
Corporation, Ciba-Geigy, Herman Miller, IBM and
Europe and the U.S. through Swiss design
Massachusetts Institute of Technology. Montreal's
magazines and a few books, notably Graphis and
Expo '67 was a feast of Helvetica and systematic
the "Swiss" bibles by Muller-Brockmann, Gertsner,
environmental signage, as well as advanced
Hoffmann and Ruder.
architecture. Eventually, American corporate culture
Then, in the late 1960s, several professional
embraced "Swiss" school graphic design as the ideal
offices began to practice these ideas to solve the
corporate style. Although "Swiss" graphic design was
needs of large corporate clients in Holland, Great
first adopted in U.S. by professionals in their design
Britain, Canada and the U.S.
practices, soon several leading U.S. graphic design
schools followed suit, going directly to the source.
© Anselm Spoerri
Grid System – 8 Fields Example
Swiss Design School
The great Swiss innovators of the 1950s and
1960s can be seen as representing the classic
phase of modernism, the heirs to Bauhaus graphic
design and other early modern European graphic
designers. These Swiss innovators applied the
Bauhaus functionalist ethic to a systematic graphic
Caption Text
method that shared the Bauhaus values of
minimalism, universality, rationality, abstraction
The method, symbolized by the typeface Helvetica,
and structural expressionism. This fresh and
was enthusiastically adopted by several corporate
highly professional graphic design was first
and institutional design groups, including Container
transmitted beyond Switzerland to the rest of
Corporation, Ciba-Geigy, Herman Miller, IBM and
Europe and the U.S. through Swiss design
Massachusetts Institute of Technology. Montreal's
magazines and a few books, notably Graphis and
Expo '67 was a feast of Helvetica and systematic
the "Swiss" bibles by Muller-Brockmann, Gertsner,
environmental signage, as well as advanced
Hoffmann and Ruder.
architecture. Eventually, American corporate culture
Then, in the late 1960s, several professional
embraced "Swiss" school graphic design as the ideal
offices began to practice these ideas to solve the
corporate style. Although "Swiss" graphic design was
needs of large corporate clients in Holland, Great
first adopted in U.S. by professionals in their design
Britain, Canada and the U.S.
practices, soon several leading U.S. graphic design
schools followed suit, going directly to the source.
© Anselm Spoerri
Grid System - Motivation
Solve Visual Problems with Greater Speed
& Confidence
Maintain Consistency
– Title Location
– Navigation Location
– Image Rhythm
Create Visual Hierarchy & Rhythm
Invisible Guiding Hand
Information Presented Clearly & Logically
– Read More Quickly
– Understood Better
– Better Recall
© Anselm Spoerri
Grid Construction
Need to Know How Much Text
and How Many Images to Be Placed
Each Work Raises Many Questions
–
–
–
–
How Many Columns?
White Space and Margins Have Visual Function?
Annotations, Footnotes, Captions?
Large and Small Images? How Many?
Each Work Requires its Own Specific Grid
– Create Small Sketch
– Number of Columns Depends on Type Size
– Wider Columns Need Larger Type Size than Narrow Columns
© Anselm Spoerri
20 Fields Grid - Example 1
Swiss Design School
Although "Swiss" graphic design was first
adopted in U.S. by professionals in their
design practices, soon several leading
U.S. graphic design schools followed suit,
going directly to the source. A number of
Swiss teachers and their graduates, from
Armin Hoffman's Basel school in
particular, put down roots in schools
including Philadelphia College of Art,
University of Cincinnati and Yale. (The
Swiss influence seems to have been
particularly strong in U.S. and Canadian
schools; Europeans have often expressed
a certain mystification at this North
American reverence for the Basel
method.) Manfred Maier's book, Basic
Principles of Design, on the Basel
foundation program, was finally available
in the U.S. in 1977, spreading this method
farther. Under the influence of this highly
structured educational method and its
emphasis on the prolonged study of
abstract design and typographic form,
these American schools began to carefully
structure their curricula. Based on
objectivity and rationalism, this
educational system produced a codified
method that was easy to communicate to
students, giving them a foundation for a
visual design process and composition ..
This classic modernist graphic aesthetic
is distinctly different from the
predominantly semantic imagery of the
"big idea". It stresses the grammar of
design and is rather neutral to content.
Regrettably, this language of structural
geometry has often resulted in a
sameness of form that is more the look
of function than truly communicative
function-- an emphasis on formal purity
rather than content. As this aesthetic
spread, however, a number of
Europeans, particularly in conjunction
with the Ulm school in West Germany,
began to apply semiotics to visual
communications problems. Related
explorations in the science of signs
were taking place in structuralist
philosophy, linguistics, literature and
film theory. Other efforts to develop
scientific design processes through
communication theory and computer
design method began in Great Britain
and at the Illinois Institute of
Technology during this period. Although
the Swiss never embraced these
communication theories, some of the
sounder graphic design schools outside
Switzerland have gradually begun to
incorporate theory into their curricula …
© Anselm Spoerri
20 Fields Grid - Example 2
Swiss Design School
Poster Designs by
Josef Muller-Brockmann
Caption describing the poster
designs. When they were created.
Who the client was and their
effectiveness.
Although "Swiss" graphic design was first
adopted in U.S. by professionals in their
design practices, soon several leading
U.S. graphic design schools followed suit,
going directly to the source. A number of
Swiss teachers and their graduates, from
Armin Hoffman's Basel school in
particular, put down roots in schools
including Philadelphia College of Art,
University of Cincinnati and Yale.
(The Swiss influence seems to have been
particularly strong in U.S. and Canadian
schools; Europeans have often expressed
a certain mystification at this North
American reverence for the Basel
method.) Manfred Maier's book, Basic
Principles of Design, on the Basel
foundation program, was finally available
in the U.S. in 1977, spreading this method
farther.
Under the influence of this highly
structured educational method and its
emphasis on the prolonged study of
abstract design and typographic form,
these American schools began to carefully
structure their curricula. Based on
objectivity and rationalism, this
educational system produced a codified
method that was easy to communicate to
students, giving them a foundation for a
visual design process and composition
that went far beyond the superficial
emulation of their heroes.
This classic modernist graphic aesthetic is
distinctly different from the predominantly
semantic imagery of the "big idea". It
stresses the grammar of design and is
rather neutral to content.
© Anselm Spoerri
20 Fields Grid - Example 2a
Swiss Design School
Poster Designs by
Josef Muller-Brockmann
Caption describing the poster
designs. When they were created.
Who the client was and their
effectiveness.
Although "Swiss" graphic design was first
adopted in U.S. by professionals in their
design practices, soon several leading
U.S. graphic design schools followed suit,
going directly to the source. A number of
Swiss teachers and their graduates, from
Armin Hoffman's Basel school in
particular, put down roots in schools
including Philadelphia College of Art,
University of Cincinnati and Yale.
(The Swiss influence seems to have been
particularly strong in U.S. and Canadian
schools; Europeans have often expressed
a certain mystification at this North
American reverence for the Basel
method.) Manfred Maier's book, Basic
Principles of Design, on the Basel
foundation program, was finally available
in the U.S. in 1977, spreading this method
farther.
Under the influence of this highly
structured educational method and its
emphasis on the prolonged study of
abstract design and typographic form,
these American schools began to carefully
structure their curricula. Based on
objectivity and rationalism, this
educational system produced a codified
method that was easy to communicate to
students, giving them a foundation for a
visual design process and composition
that went far beyond the superficial
emulation of their heroes.
This classic modernist graphic aesthetic is
distinctly different from the predominantly
semantic imagery of the "big idea". It
stresses the grammar of design and is
rather neutral to content.
© Anselm Spoerri
Typography
Good Typography depends on Visual Contrast
– between one font and another
– between text blocks and the surrounding empty space.
 Read by recognizing overall shape of words
Avoid all-uppercase headlines
 monotonous rectangles
 few distinctive shapes to catch reader's eye
 Legibility depends on the tops of words
Choice of uppercase or lowercase letters can have dramatic effect on legibility.
Use Downstyle (capitalize only the first letter, and any proper nouns)
for your headlines and subheads
© Anselm Spoerri
Typography
(cont.)
Readability - how easy it is to read a lot of text
– Serif Typeface Better if a Lot of Text
– Type Size: 10 – 14pt
– Line Length
– Leading or Space between Lines
Legibility
- how easy it is to recognize short bursts of text
– Sans Serif Typeface is Easier to Read on Screen
7 - 10 Words Per Line
– Overlong or Overshort Lines Tire
Column Width Proportional to Type Size
Bold and italic used for small blocks of text
– If you make everything bold, then nothing stands out
– If you cram every page with dense text, users see a wall of gray
Enough Contrast between Type and Background
© Anselm Spoerri
Typography
(cont.)
Text = Graphic
– Only Way to Control Appearance
Type Displayed in Relation to Browser's Default Font & Size
– No way to know browser defaults
Standard Default = Times New Roman
Arial (PC) and Geneva (Mac) Always Installed
Verdana is Available on Both (newer Macs)
Rules
– "Paragraph" & "Normal" in browser's default font & size
– Heading size in relation to default browser typesize
– Special text displayed smaller or larger than browser typesize
Specify Font in CSS/HTML: Generally Overrides Default
© Anselm Spoerri
Mechanics – LyndaCampus: 1st Site using DW CS6
Adding Content
–
–
Sakai > Resources > Lec2: index_begin02.html
Structuring it using HTML tags (create hierarchy … h1, h2)
Styling tags using Modify > Page Properties
Adding and Stylizing Links
Lec2: index_begin03.html
–
How to customize link appearance: Modify > Page Properties
–
Preview local page in browser | Live view
Positing Elements
Lec3: index_beginAPelement.html
–
Look at structure of page layout sketch
–
Insert > Layout Panel: Draw AP div for logo
–
Draw AP div for navigation | enter navigation categories, right-aligned
–
Drawing more AP divs and adding text and leaving height unspecified
–
Changing z-index of AP divs: make sure on top: high z-index
Adding Navigation and Pages
Lec3: index_MenuBar.html
– Adding a menu bar: insert Spry Menu Bar
– Creating and linking multiple pages
Testing and Uploading Pages
© Anselm Spoerri
Hyperlinks
<a> hyperlink tag
Use Attributes and Values
<a href="absolute or relative pathname"
target="_self"
[opens page in same browser window]
target="_blank"
[opens page in new browser window]
>
Text of Hyperlink
</a>
Create Anchor: <a name="anchor name">
Link to Anchor: <a href="#anchor name">
© Anselm Spoerri
Images
<img> image tag
Use Attributes and Values
(src and alt are required to be valid XHTML)
<img src="pathname"
alt="my image"
[text to appear if image does not show]
height="100" width="100" [improves time to load page]
/>
[XHTML requires />]
© Anselm Spoerri
Mechanics – Color
Large Areas = Low Saturation = Subtle color
Background / minor elements = Subtle pastel colors
Small Areas = High Saturation = Bold color
Maximum emphasis = Bold, saturated primary colors
© Anselm Spoerri
Mechanics – Color
(cont.)
RGB Color used by Monitor
– Direct Light, Not Reflected
Indexed Color
– Limited Selection of Colors: up to 256 colors
– To Reduce File Size
– Color not in the Palette is Approximated and “Dithered”
Creating Web-Safe Colors
– All combinations of 0%, 20%, 40%, 60%, 80%, 100%
for Red, Green and Blue
– 6to3 = 216 colors
– Affects Illustrations, Drawings more than Photographs
– Fireworks has Web-safe Palette
© Anselm Spoerri
Mechanics – Web Graphics
Bitmapped or Raster Graphics
– Paint and Photo Programs
Object or Vector-based Graphics
– Draw and Illustration Programs
– Use Mathematical Representation for Shapes
– Used to Create Original Artwork
Artwork Converted into Bitmap using
Fireworks
Anti-aliasing (smoothing)
– Increases file size
© Anselm Spoerri
Mechanics – Image File Formats
GIF
–
–
–
–
–
–
Cross Platform & Lossless Compression
Indexed Colors: few GIFs need all colors, reduce it manually
Transparency (so no white box around graphic)
Interlacing & Progressive Download
Create Animations
Best for
– Images with Large Areas of Solid Color, Simple Illustrations
– Small Photos or thumbnails
JPEG
–
–
–
–
–
Cross Platform & LOSSY Compression
Progressive JPEG
No transparency
No Animation
Best for
– Photos: Millions of Colors and Subtle Changes
© Anselm Spoerri
Mechanics – Save Image for Web
RGB Mode
72 ppi
Indexed Color Mode
Reduced Color Palette
– Adaptive Palette
Interlaced
© Anselm Spoerri
Recap – Web Graphics
Bitmapped vs. Vector-based Graphics
Web Graphics File Formats
– GIF
–
–
–
–
Cross Platform & Lossless Compression
Indexed Colors
Transparency
Create Animations
– Best for: Solid Color, Simple Illustrations Small Photos
– JPEG
– Cross Platform & LOSSY Compression
– No transparency
– No Animation
– Best for: Photos with Subtle Color Changes
Save Image for Web
–
–
–
–
–
RGB Mode
72 ppi
Indexed Color Mode
Reduced Color Palette (e.g. Adaptive Palette)
Interlaced
Good Form: Alt-labels for Images
© Anselm Spoerri
Web Graphics
PNG
Fireworks saves its documents as PNGs
Best to export PNG content as GIF or JPEG, since PNG can
contain content not currently shown and produces larger file size.
Specify image size (width and height) for speedier
viewing
DW includes this info automatically in web page.
Scaling image in Web page does not affect download time.
Most browser surround clickable images with a border of same
color as the links (generally blue): for no border, use a border value = 0.
© Anselm Spoerri
Short Assignment 1 – Set up Local / Remote Site in DW
– Site > New Site
– Select “Site”
– Site > Site Name = “320course” for this demo
– Site > Local Site Folder = “320course” in “My Documents”
– Select “Servers" Category in New Site Dialog
– Click on + (Add new server)
– Specify Server Name
– Select “SFTP" in pull-down “Connect using” menu
– SFTP Host =“eden.rutgers.edu”
– Login = “yourusername”
– Password = “yourpassword”
– Root Directory = “public_html”
Test and if successful Save
– Connect to Server
– Select "Connect to Remote" icon
– Transfer files to server
– Manually
– File : drop onto file
OR drop into folder that contains file you want to up/download
– Folders: drop into folder that contains folder you want to up/download
– Set permissions: select file on server side, right click & select Permissions
© Anselm Spoerri