Information Visualization Course

Information Visualization Course Web Design Prof. Anselm Spoerri aspoerri@rutgers.edu

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

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

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

Grid System – 8 Fields Example

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 method that shared the Bauhaus values of minimalism, universality, rationality, abstraction and structural expressionism. This fresh and highly professional graphic design was first transmitted beyond Switzerland to the rest of Europe and the U.S. through Swiss design magazines and a few books, notably Graphis and the "Swiss" bibles by Muller-Brockmann, Gertsner, Hoffmann and Ruder. Then, in the late 1960s, several professional offices began to practice these ideas to solve the needs of large corporate clients in Holland, Great Britain, Canada and the U.S. Caption Text The method, symbolized by the typeface Helvetica, was enthusiastically adopted by several corporate and institutional design groups, including Container Corporation, Ciba-Geigy, Herman Miller, IBM and Massachusetts Institute of Technology. Montreal's Expo '67 was a feast of Helvetica and systematic environmental signage, as well as advanced architecture. Eventually, American corporate culture embraced "Swiss" school graphic design as the ideal corporate style. 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.

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

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

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 …

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.

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.

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

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 burstsof 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 anditalic 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

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

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

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">

Images • <img> image tag • Use Attributes and Values (src and alt are required to be valid XHTML) • <imgsrc="pathname"alt="my image" [text to appear if image does not show]height="100" width="100" [improves time to load page]/> [XHTML requires />]

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

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

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

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

Mechanics – Save Image for Web • RGB Mode • 72 ppi • Indexed Color Mode • Reduced Color Palette • Adaptive Palette • Interlaced

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

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.

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

Information Visualization Course