Download
1 / 78
780 likes | 812 Views
Lecture 3 – Overview. Meaning Graphic Design User Behavior Design Implications Design Specifics Colors Magazine Mechanics CSS Cascade External & Internal Style Sheets Selectors Predesigned CSS Layouts in DW Dreamweaver Demo Exercise 1 – Step–by–Step CSS Navigation using Lists
E N D
Lecture 3 – Overview • Meaning • Graphic Design • User Behavior Design Implications Design Specifics • Colors Magazine • Mechanics • CSS • Cascade • External & Internal Style Sheets • Selectors • Predesigned CSS Layouts in DW • Dreamweaver Demo • Exercise 1 – Step–by–Step • CSS Navigation using Lists • HTML5 & CSS3 • HTML5 Key New Features • CSS3 Key New Features
User Behavior • Scan pages - don't read them • Look for anything = Search Interest • Decide quickly • Choose first “reasonable item” • Muddle through • Don't figure out how things work • Resist forming models • Stick to what works
Design Implications • Scan pages - don't read them • Design for ScanningMake text short - cut words • Make page work at a glanceSufficient left margin,640x480 = main message • Create Visual Hierarchy • Look for anything = Search Interest • Decide quickly • Choose first “reasonable item” • Make obvious what you can do on a page • Make obvious what is clickable • Muddle through • Don't figure out how things work • Resist forming models • Don't make users thinkGet rid of question marksEach item = clear purpose • Stick to what works • Repetition & ConsistencyGrid Layout, Easy Navigation, Graphics, • Color Coding, Typography
Meaning • Graphic Design • Education History • Practical Foundation • Swiss Design School & Grid System • Sources • Katherine McCoy, “Education in an Adolescent Profession” • Josef Mueller-Brockmann, “Grid Systems in graphic design”
Brief History of Graphic Design Education • Pre-Modernism • Focus on Image Associations • Lack of Formalized Method: early luminaries self-taught • Premium on Creativity: “BIG IDEA” • Learn from “Samples and Examples” • Functional Modernism • "Swiss School" of Graphic Design • Based on Bauhaus • Focus on Formal Purity rather than Content • Post-Modernism • Influenced by French Literary Theory • Variety of Cultural Contexts and Personal Experiences • Possibility of Multiple Interpretations • Question Rigidity, Minimalism of Graphic Modernism • Subjective, Personal Layers of Meaning & Complexity
Future of Graphic Design • Digital Communications Design • Different Design Strategy than Perfectionist Graphic Design • Less Control, More Conceptual, More Interaction • Users Co-Creators • Requires Deeper Understanding of the Communications Process • Combines Art, Science and Language • Needed Expertise • Multimedia Design: Visual Art, Music, Film • Communications Theory • Cognitive & Perceptual Psychology • Social Sciences & Cultural Anthropology • Computer Science
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 • 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 – 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.
Grid System – Heuristics • One Column • Little Freedom for Pictures in Small, Medium and Large Size • Two Columns • Text can go in First Column • Illustrations, Images in the Second Column • Text and Images can be Placed in Same Column • Three Columns • Variety of Ways of Placing Text and Graphics • Four Columns • If a lot of Text or Images Need to be Placed • Statistics with Copious Figures and Graphs • Can be Subdivided into 8 or 16 columns
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
User Behavior Design Implications Design Specifics • User Behavior • User Behavior Design Implications • User Behavior Design Implications Design Specifics • Scan pages - don't read them • Design for ScanningMake text short - cut words • Make page work at a glanceSufficient left margin,640x480 = main message • Create Visual Hierarchy • Look for anything = Search Interest • Decide quickly • Choose first “reasonable item” • Make obvious what you can do • Make obvious what is clickable • Muddle through • Don't figure out how things work • Resist forming models • Don't make users thinkGet rid of question marksEach item = clear purpose • Stick to what works • Repetition & ConsistencyGrid Layout, Easy Navigation, • Graphics,Color Coding, Typography • 1 Use Grid System • Maintain ConsistencyHelps you decide: location of primary & secondary navigation; location and sizes of images; location of headlines, main text, annotations etc. • Create Visual Hierarchy & Rhythm • Present Information Clearly & LogicallyUsers can read info more quickly.Facilitates understanding and recall. • Invisible Hand guiding users and creating sense of place
User Behavior Design Implications Design Specifics • User Behavior • User Behavior Design Implications • User Behavior Design Implications Design Specifics • Scan pages - don't read them • Design for ScanningMake text short - cut words • Make page work at a glanceSufficient left margin,640x480 = main message • Create Visual Hierarchy • Look for anything = Search Interest • Decide quickly • Choose first “reasonable item” • Make obvious what you can do • Make obvious what is clickable • Muddle through • Don't figure out how things work • Resist forming models • Don't make users thinkGet rid of question marksEach item = clear purpose • Stick to what works • Repetition & ConsistencyGrid Layout, Easy Navigation, • Graphics,Color Coding, Typography • 2 Create Visual Hierarchy & Guide Eye • Important Things = Visually Prominent(More Important = Larger / Sharp Contrast)Use headlines to guide the eye • Visual ContrastUse sharp changes in size (headline), light intensity (bold), color, texture, motion to create contrast. • Proximity: related things spatially closeSpatial separation = conceptual separation.Don't mix alignment styles. • Use Grouping & Nesting to Increase Information Density(Short-term Memory = 3-7)Use bounding shapes.
User Behavior Design Implications Design Specifics • User Behavior • User Behavior Design Implications • User Behavior Design Implications Design Specifics • Scan pages - don't read them • Design for ScanningMake text short - cut words • Make page work at a glanceSufficient left margin,640x480 = main message • Create Visual Hierarchy • Look for anything = Search Interest • Decide quickly • Choose first “reasonable item” • Make obvious what you can do • Make obvious what is clickable • Muddle through • Don't figure out how things work • Resist forming models • Don't make users thinkGet rid of question marksEach item = clear purpose • Stick to what works • Repetition & ConsistencyGrid Layout, Easy Navigation, • Graphics,Color Coding, Typography • 3 Typography Heuristics • Sans Serif type is easier to read on screen • Type size 10 -14 points • 7 - 10 words per line • Column width proportional to type size • Bold and italic for small blocks of text • Enough contrast between type & background
User Behavior Design Implications Design Specifics • User Behavior • User Behavior Design Implications • User Behavior Design Implications Design Specifics • Scan pages - don't read them • Design for ScanningMake text short - cut words • Make page work at a glanceSufficient left margin,640x480 = main message • Create Visual Hierarchy • Look for anything = Search Interest • Decide quickly • Choose first “reasonable item” • Make obvious what you can do • Make obvious what is clickable • Muddle through • Don't figure out how things work • Resist forming models • Don't make users thinkGet rid of question marksEach item = clear purpose • Stick to what works • Repetition & ConsistencyGrid Layout, Easy Navigation, • Graphics,Color Coding, Typography • 1 Use Grid System • Maintain ConsistencyHelps you decide: location of primary & secondary navigation; location and sizes of images; location of headlines, main text, annotations etc. • Create Visual Hierarchy & Rhythm • Present Information Clearly & LogicallyUsers can read info more quickly.Facilitates understanding and recall. • Invisible Hand guiding users and creating sense of place • 2 Create Visual Hierarchy & Guide Eye • Important Things = Visually Prominent(More Important = Larger / Sharp Contrast)Use headlines to guide the eye • Visual ContrastUse sharp changes in size (headline), light intensity (bold), color, texture, motion to create contrast. • Proximity: related things spatially close.Spatial separation = conceptual separation.Don't mix alignment styles. • Use Grouping & Nesting to Increase Information Density (Short-term Memory = 3-7)Use bounding shapes. • 3 Typography Heuristics • Sans Serif type is easier to read on screen • Type size 10 -14 points • 7 - 10 words per line • Column width proportional to type size • Bold and italic used for small blocks of text • Enough contrast between type and background
Requirements for Web Pages • Web Page needs to easily answer • Web Navigation needs to easily answer • What can I do here? • Layout Presents Info Clearly & LogicallyFacilitates Understanding & Recall • Where do I start? • Visual Hierarchy Guides Eye to Important Things • What site is this? • Site ID – logo, image, text • What page am I on? • Page name • Major sections of site? Primary Navigation Top Row or Left Column Simple text hyperlinks, icons, rollovers, image-maps, pull-downs • Options at this level? Secondary Navigation Below Top Line or Left Column Expanding / Nesting Hierarchies Static or Dynamic Outlines • Where I am? Go higher or home? Color Coding, BreadcrumbsPrimary / Secondary Navigation
Mechanics – CSS: Cascade • Cascade: Inheritance, Specificity and Location. • Inheritance • Html = Hierarchical Structure of the content Elements are contained / appear with other elements (h1 resides inside a table). • Many properties, but not all, inherited by descendants of elements h1 is blue and has red border … blue is inherited but not red border by elements residing inside h1 element. • Inherited rules are considered the most general of all and are overruled by any other rule. • Specificity • The more specific the selector, the stronger the rule h1 with class X rule will overrule h1 rule. • The id attribute is considered the most specific.
Mechanics – CSS: Cascade • Cascade: Inheritance, Specificity and Location. • Location • Rules that appear later have more weight. • You can declare a rule to be more important than others by adding !important at the end of the rule. • Summary • In the absence of a rule, many styles are inherited from parent element to child. With two competing rules, the more specific the rule, the more weight or importance it has – regardless of its location. With two rules of equal specificity, the one that appears later wins. • Some CSS properties allow you to specify the URL of another file: if it is a relative URL, then it needs to relative to the external style sheet.
