Download to read offline
More Related Content
Similar to Lecture 1 Advance concept in Visual Graphics
Lecture 1 Advance concept in Visual Graphics
- 1. Lecture 1 Visual Graphics (Advance) Prof.Lucita C. Gamboa
- 2. Graphic design forthe Web encompasses a very wide range of decisions about the visual dimension of a website. On one hand, graphic design is broad and integrative.
- 3. These are themain goals of graphic design for the Web: – • Adding aesthetic appeal – • Helping to express the theme of the website – • Helping to show the logical relationships among all elements that appear on the page, both core content elements and elements of the interface
- 4. – Web developmentprojects include a professional graphic designer. Ideally, the graphic designer is involved from the earliest stages when concept sketches are being drawn. – On large projects, the graphic designer may be working full-time; on smaller projects, the graphic designer may be brought in at strategic intervals. When there is no professional graphic designer, someone must step into this role, though it is a challenge for a non-specialist to achieve really good results.
- 5. – Professional graphicdesigners cross many boundaries in their work. They are often skilled at interface design, information design, and creating core visual content, especially illustrations. – Many small Web design firms are staffed entirely by graphic designers or consist of a single graphic designer.
- 6. – Although thischapter can point you toward success in graphic design, it cannot do the whole job. You should develop the habit of carefully considering the visual design of the websites you visit, and you should take note of magazine advertisements, posters, commercial signage, and roadside billboards. It is very valuable to read books, take courses, and work closely on a project with a trained graphic designer. The readings suggested in this chapter can contribute greatly to your sophistication in graphic design and related areas.
- 7. –You should strivefor sophistication in graphic design even if you don't plan to practice graphic design. You should be able to communicate clearly with a graphic designer in order to explain what you want. You should be able to recognize when a website's visual design is unsuccessful and to articulate the reasons for your judgment.
- 8. –To achieve goodresults in your own designs, follow well-established design principles. Also, be patient: What a professional designer can do quickly, you may need to achieve by successive approximation-and by soliciting lotsl:lf feedback. When you finally get it right, it's not so important that you had to discard numerous bad versions of your design.
- 9. Aesthetic Appeal onthe Web – The word "aesthetic" refers to the human response we associate with beauty. Aesthetic appeal is a key goal of graphic design on the Web because it engages users. Aesthetics is especially important on the home page, where users make a split-second decision whether to stay or leave. Furthermore, an aesthetic design lends prestige and credibility to the organization that owns the website, subtly asserting, "These people know what they're doing."
- 10. –Aesthetic design doesnot mean that the pages of a website should be regarded as objects of fine art and evoke the response, "How beautiful!" You don't need flowers or sunsets on your website. Done well, even a bus schedule will be perceived as visually attractive. If a website communicates about starvation and disease, the graphic design may be stark and grim. But users can still recognize the aesthetic quality of the design, just as they recognize the ugliness in a thoughtless or misguided design.
- 11.
- 12. – Uses ofLine, Shape, and Color Line, shape, and color are always present. You can think of them as resources, or "raw materials," of graphic design.
- 13. Line – Lines connecttwo or more points and are the essential element of graphic design. Lines can be given a variety of stylistic attributes. For example, there are hard edged lines and soft-edged lines that fade into their backgrounds. All these attributes can be created easily with illustration software applications.
- 14. – The mainstylistic attributes are listed below: – • Straight lines – • Curved or swirly lines – • Jagged lines – • Irregular or hand-drawn lines – • Dotted and dashed lines – • Lines with high or low contrast against their backgrounds – • Lines with hard or soft edges – • Lines that are thin or thick – • Lines whose orientation is vertical, horizontal, or diagonal
- 15. – These linetypes, of course, can be used in combination: There are jagged dotted lines, and a line can change from jagged to straight. – In many cases our response to a line is influenced by our notion of how someone might draw that kind of line. – So, for example, jagged lines suggest energy and informality and, possibly, damage and violence. – Swirly lines also suggest energy and informality but at the same time suggest freedom of movement and joy. Dotted lines suggest thoughtfulness, someone with a message to communicate.
- 16. Shape – Shapes areformed by lines. Shapes can also be implied by lines that do not fully complete a shape. When lines are sufficiently thick, we perceive them as shapes. Shapes are a fundamental component of almost any possible Web page. Shapes define objects and suggest planes. As we show later, shapes are the basis of page layout.
- 17. – Shapes asObjects in a Design Shapes and lines make up the objects that appear as core content elements. – Extremely complex, often irregular shapes, combinations of shapes, and lines (with or without color) make up drawings of people, buildings, products, and so forth. – When the artist is skillful, we don't even think of these representations as shapes: We don't notice that the shoulders and chest of Napoleon Bonaparte approximate a blue trapezoid (wider at the shoulders, narrower at the waist) and that the head is a complex oval. In addition, regular geometric shapes- circles, octagons, stars, diamonds, and so forth-serve many roles in our designs.
- 18. – Shapes asPlanes Perspective drawing, shadowing, and other techniques have been used for centuries to create the illusion of 3-D space. – But simple juxtapositions and modifications of shapes can subtly suggest multiple planes and give extra interest to an image. One prevalent technique is to allow shapes to overlap so that one seems to be sitting on top of another. Another prevalent technique is a "reverse-out": The designer visually cuts out pieces of a shape to suggest an underlying plane showing through.
- 19. Color – Color affectsus strongly and in complex ways. It is a major aspect of almost any website design. Color and in particular color for the Web make for a complex subject encompassing the properties of light, differences among operating systems and Web browsers, and the physiology and psychology of human perception.
- 20. –Here we offerjust the briefest introduction to Web color. – We approach the topic from the perspective of a designer working with the color-selection features of a software application. A good resource for color theory and design is Jill Morton (1998)
- 21. The Make-Up ofColor – The Capable computers give us a choice of 255 different hues, ranging through the full color spectrum (red, orange, yellow, green, blue, indigo, violet). – Sponds to a particular wavelength of light. Black, white, and gray are not hues: Black is the absence of light; white comes from mixing red, green and blue light; gray is a mixture of white and black.
- 22. – A huein its pure form is said to be "fully saturated." Most often, however, we do not use hues in their fully saturated form. We can modify a hue by changing its "value" (or "luminance"), its lightness or darkness. This is the equivalent of adding white or black to the hue. The computer's color- selection feature offers 128 gradations of white and 128 gradations of black. Lighter values of a color are often called "tints"; darker values "shades." We can, for example, lighten the hue of red to various tints of pink or darken it to various shades of scarlet. We get shades of brown by darkening yellow.
- 23. – Very oftendesigners also want to "dull" or "mute" a color. This is the equivalent of adding different quantities of gray, at any given value of a hue. Computers allow us to de-saturate a hue with gray in 255 gradations (or "tones"). So, for example, having tinted the fully saturated red hue to a light pink, you can mute the light pink to a dull light pink and even further to a pinkish light gray.
- 24. – You mayhave noticed that all the combinations of hue, value, and de-saturation with gray amount to approxin1ately 16 million colors. Clearly, then, it is no small feat for computers to faithfully reproduce the colors intended by the designer. Even with capable computers, there are a variety of minor problems in displaying color.
- 25. – Furthermore, toavoid Significant display problems for people using computers with 8- bit color capability, you must restrict yourself to the 216 guaranteed ("browser-safe") colors. You must therefore decide whether to take advantage of 16 million colors or restrict yourself to this subset, depending on the computer capabilities of the audience you intend to serve.
- 26. How We Respondto Color? – Colors are perceived as warm or cool. – The warm colors are red, orange, and yellow. The cool colors are green and blue. – People respond strongly to the warmness or coolness of colors, and so this "warm-cool color contrast" must be an important consideration in your design.
- 27. – Colors alsohave various associations. For example, green is associated with vegetation and fertility, with envy, and with the visual signal "Go." . Some color associations operate across many cultures (green as vegetation and fertility) while others do not (green as envy). Furthermore, the context greatly affects how people respond to any color. Red appearing as flowing blood is very different from a sumptuous red carpet.
- 28.
- 31. – A significantnumber of people, mostly males, have some kind of difficulty in interpreting colors ("color blindness"). – Therefore, avoid color coding as the sole cue for important information; for example, don't use color coding as the only means to distinguish among easy, moderate, and difficult hiking trails.
- 32. – Color Combinations andColor Harmony – When designing Web pages, think in terms of color schemes and color harmony rather than individual colors.
- 33. The five mostimportant kinds of color harmony are described below using the standard color wheel. These harmonies, broadly speaking, pertain to hues in their various values and levels of de- saturation with gray.
- 34. Monochromatic Monochromatic is thesimplest kind of color harmony. It consists of only a single hue with variations in value and saturation.
- 35. Complementary. – Complementary colorharmony consists of any two colors that are opposite or nearly opposite on the color wheel. Complementary harmony provides very strong contrasts. Therefore, if a design makes extensive use of a particular color, you may want to employ the complementary color over a much smaller area as an accent color.
- 36. Analogous. – Analogous harmonyemploys three to five colors that are neighbors on the color wheel. The differences among these hues are not extreme; they form a pleasing progression of related colors. Often the most important, or "key" color, is the middle color in this progression
- 37. Triadic – Triadic harmonyemploys any three colors spaced fairly evenly on the color wheel. Usually the key color is saturated while the others appear in darker values.
- 38. Split complementary – Splitcomplementary color harmony consists of a key color, the complementary (opposite) color on the color wheel, often used as an accent, and the two neighbors of the key color or the complementary color.
- 39. – Enhancement ofGraphic Files Image editing software applications, such as Photoshop and Paint Shop Pro, give designers many ways to enhance a graphic. For example, it is possible to soften the focus of a photograph or add a rippled look or texture to a drawn graphic. Many enhancements entail modifying color. Two of the most important color enhancements are brightening an image and colorizing an image.
- 40. – Colorizing canalso give a group of images greater unity. For example, a designer scans and digitizes three graphics to make a collage. She then brightens and softens the focus of the border areas so the graphics blend better. Even so, the result is not attractive because the original graphics represent very different styles and use very different colors.
- 41. –There is ablack-and-white newspaper photograph from the 1920s, a painted poster for a 1950s Hollywood movie with pastel tints, and a contemporary color photograph with a sharp focus and fully saturated colors. By colorizing the entire collage in values of medium green, the designer adds a strong element of visual unity. Note that the colorized image exhibits monochromatic color harmony
- 42. – There isa black-and-white newspaper photograph from the 1920s, a painted poster for a 1950s Hollywood movie with pastel tints, and a contemporary color photograph with a sharp focus and fully saturated colors. By colorizing the entire collage in values of medium green, the designer adds a strong element of visual unity. Note that the colorized image exhibits monochromatic color harmony
- 43. Designing Screen Text –Many decisions about the appearance of words on the screen are considered an aspect of graphic design. Fonts – In print, we distinguish between body fonts and display fonts. Body fonts are those well suited for extended ("body") text. Display fonts are suited for headings, titles, and other brief but prominent text elements, referred to as "display" text. This distinction also pertains to the Web. Most link text can be considered a special kind of display text.
- 44. Body Fonts – Forbody text, designers must choose fonts with good screen legibility. Some fonts have been designed specifically for screen use, including Verdana and Georgia from Microsoft and Myriad and Minion from Adobe. Various established print fonts, such as Palatino and Helvetica, also display well on screen. – Fonts are highly legible when they are composed of strong, clear strokes that are not distorted by the relatively poor resolution of most computer monitors.
- 45. – Many fonts(among them Georgia, Minion, and Palatino) include serifs. These are the small horizontal "feet" at the base of vertical strokes and other small cross strokes that finish off such letters as E and s. Many good print fonts are unsuitable as body fonts on the screen because of their small, delicate serifs. Another consideration is font size.
- 46. – Make sureyour fonts are large enough for easy reading. A generally reliable choice is 12 point (HTML font size 3). The optimum size, however, depends on the particular font you are using and other factors. Align body text on the left; use boldface, italics, and all upper-case characters sparingly; and avoid underlining entirely except to indicate a link.
- 47. What the UserSees ? – There can be differences between the fonts you specify and what individual users actually view. If you specify a font that is not installed on the user's machine, the system will display a substitute font. – Also, consult the World Wide Web Consortium website (www.w3.org) for the latest standards on specifying fonts and formatting text.
- 49. Text and Background –An important factor in text legibility is ample contrast between text and background. – It is surprising how many websites employ dark text over a dark background color, text over an overwhelmingly complex pattern, and other nearly illegible combinations of text and background.
- 50. – Nothing ismore legible than black text on a plain white or near white background, although various dark text colors do provide ample contrast against light background colors. Light blue, for example, often works well as the background for black text. A sound strategy is to strongly favor black text on a light background for body text and to reserve strong colors for headings and other display elements and, more generally, for drawing the user's attention to some aspect of the design – White or other light fonts against black and other dark backgrounds may also be legible, but you should carefully judge legibility on a case-by-case basis. One font and font size may be significantly better than another.
- 51. Expressing Theme withStyle and Mood – The theme is the core message that connects a website to its audience. Helping to express the theme is a key role of graphic design. While every page contributes to the theme, this is, in particular, the job of the home page.
- 52. Some Moods Producedby Graphic Design Playful, cheerful Happy, joyful Warm, welcoming Cool, hip Dramatic Mysterious, spooky Energetic, dynamic Sleek and modern Business-like, direct Staid, stolid, settled Dignified Somber, grave
- 53. Mood in WebDesign – The term "mood" describes emotions, attitudes, or associations that users experience when they view and read the pages of a website. The appropriate mood helps to establish the theme. Because moods are general responses rather than specific messages or statements, we use single words or phrases to describe moods. – Human beings have a very complex emotional life, and so there are many moods and many ways to describe moods in words.
- 55. Expressing Theme witha Set of Tabs – One aspect of Web graphic design is contributing to the styling of interface elements. Buttons, navigation columns, tabs, and other interface elements, no less than core content elements, possess such stylistic attributes as line, shape, color, and font choice.