Presentación de PowerPoint

Presentación de PowerPoint

+ ICT Web Design LESSON 1 PRINCIPLES OF WEB DESIGN V2.0 + Lesson 1 - Principles of Web Design Objectives 3.1.1: Identify Web site domains, and relate a site's domain to its purpose. 3.1.2: Relate basic components of a Web page (e.g., color, space, written content, typography, images, links, multimedia) to aesthetic, functional and/or usable design principles.

3.1.3: Define aesthetic design, and explain how aesthetics can affect a visitor's perception of a Web site's information. 3.1.4: Demonstrate knowledge of color wheel concepts and effective use of color on a Web site. 3.1.6: Critique the aesthetic design, usability and accessibility of sample Web sites. + Web Site Categories & Domains Top Level

Domain .com .edu .uk Identifies the type of organization to which the Web site belongs .org Domain suffix, provides visitors with a clue to the purpose or location of the organization that owns the Web site Server Name Top level Domain

+ Web addresses Home address Certification Partners 1230 West Washington St Suite 208 Tempe, AZ 85281-1247 Web address IP: 1. Server (host) name: name given to a server (usually www) assigned by the network administrator 2. Domain name: the registered company domain name 3. Top level domain: tends to identify what type of Web site it is All 3 parts together create a unique address just like a street address +

Top level domains + Aesthetic Web Design + Aesthetic Web Design What does aesthetics mean? The look and feel of a Web site How engaging it is to viewers Invites exploration, etc. Is more than just graphics and images: Layout Color scheme Typography +

Aesthetic Web Design - Layout The layout helps form relationships and define meaning of page elements Creates visual hierarchy and visual interest Increases readability and usability Should follow the CARP design principles Contrast Alignment Repetition Proximity CARP +

CARP Contrast: Two or more page elements display differently in color, size, shape, texture, orientation, position or movement to group or separate elements on the page Alignment: The placement, position, orientation and grouping of elements. Repetition: Repeated elements can include colors, shapes, textures, fonts, typography, graphics, spatial relationships and so on.

Proximity: The use of white space and logical structure (such as grouping related items) to create visual unity. + Aesthetic Web Design Color Web sites color scheme should enhance the page and help establish or reinforce branding. Should provide a good contrast Color Psyhology Infographic + Color Wheel Primary colors: Red

Blue Green Secondary colors (Two Primary Colors) Magenta Cyan Yellow Tertiary colors (1 Primary & 1 Secondary) + Color Schemes Monochromatic color schemes use varying colors,

shades or tints of the same hue. (See Figure 1-6.) Start with a base color, generally darker, and then choose at least two other shades of the base color. Analogous color schemes use colors that are next to each other on the color wheel. They are usually a good match and create eyepleasing effects. Complementary colors are across from each other on the color wheel.

Triadic colors are colors that are evenly spaced around the color wheel. + Color Schemes + Aesthetic Web Design Graphics Can enhance Web pages and help to create an engaging, interesting experience. Popular graphics applications: Adobe Photoshop Adobe Fireworks GIMP Inkscape Pixlr

+ Aesthetic Web Design Graphics High-quality, web-optimized images are needed Raster images made of pixels (small dots) Vector composed of lines and curves Raster Image Vector Image + Bitmap - Raster Made up of grid of pixels File Extensions: JPG (JPEG) PNG GIF BMP - TIFF Used for:

Graphics - pictures Web & print Loses clarity when enlarged + Graphics - Compression JPEG GIF PNG Use for photographs

Use for line art, cartoons, shapes, illustrations and drawings Use for photographs, fine art drawings Can be used for prints Best used for electronic display Best used for electronic display Does NOT support transparency or animation

Supports transparency and animation Supports transparency and supports animations with APNG extension Lossy compression, small file size Lossless compression, larger than JPEG and PNG Lossless compression, larger file size than JPEG Graphics should complement and be relevant to the Web sites look and feel.

Media Compression: Lossless compression = an image is compressed & all the information can be restored Lossy compression = permanently eliminates certain information and image cannot be fully restored + Graphic File Formats JPEG Most common file type No transparent background

Lossy compression file is compressed from original size and loses some of its detail PNG Now commonly used on the Web Does maintain a transparent background Lossless compression

Animated with the .APNG extension + Common File Types GIF Can be animated Maintains transparent background Fewer colors (256 RGB)

+ Aesthetic Web Design Typography Typography Typography Typography Typography is is is is fun! fun! fun! fun! Color and font styles affect the mood of the text.

+ Fonts & Typography Fonts Fonts are the style of "type face" used to display text, numbers, characters and other "glyphs". The most effective way to control font and other typographical styles is through the use of Cascading Style Sheets (CSS). + Fonts & Typography Typography Typography refers to the arrangement and appearance of text. Typography concerns not only the look of the glyphs,

but how they are placed on the page. Typography includes page margins, the amount of empty space between paragraphs or lines, the alignment of text, etc.) + Fonts & Typography Text as Graphics It is important to use real text as opposed to text as graphics. Text as graphics can become pixelated when enlarged Font Readability

Best practice is to use the most readable fonts. It is best to use fonts that are native to modern operating systems (installed on pc). + Font Families Fonts are categorized into "families" based on their characteristics. The most common font families are serif

sans-serif cursive fantasy monospace + Font Families Serif fonts Serif fonts are characterized by the flared extensions, or strokes, on

the tips of such letters as f, l, and i, as seen in the screen shot below: Serif fonts also usually have a combination of thick and thin strokes, as seen in the curve of the letter "f" above. Examples of serif fonts include Times New Roman Georgia Book Antiqua

+ Font Families Sans-serif Sans-serif fonts have plain endings, and appear blockier than serif fonts. They do not have the flared extensions, strokes, or other kinds of ornamentation. "Sans" means without, and "serif" refers to the extra strokes, or lines. + Font Families Cursive Cursive fonts resemble hand-written pen or brush strokes.

Often have artistic ornamentation, and sometimes have strokes that connect the letters together. Generally more difficult to read - they are usually a poor choice in terms of usability or accessibility + Fantasy Fantasy fonts are primarily decorative, and are not

designed to be used as the main font for long passages of text. Fantasy fonts vary wildly in their appearance and artistic content. There are no elements or particular characteristics that categorize fantasy fonts other than their decorativeness. Monospace Monospace fonts get their name from the fact that each letter takes up the same width of space. Even letters which might seem to

require different widths, such as an uppercase "W" and a lowercase "i" take up the same width in monospace fonts. Even the empty spaces between words are the same width as all of the letters themselves. Common monospace fonts are Courier and Courier New. Both of these fonts have the appearance of old typewriter font faces, and are commonly used to display computer code, HTML markup, and other technical content.

+ Electronic Media Fonts Verdana Verdana is one of the most popular of the fonts designed for on-screen viewing. It has a simple, straightforward design, and the characters or glyphs are not easily confused. For example, the upper-case "I" and the lower-case "L" have unique shapes, unlike Arial, in which the two glyphs may be easily confused. Tahoma

Tahoma is another alternative to the Arial/Helvetica style of font. Tahoma is somewhat larger than Arial, but smaller than Verdana. The spacing between letters in Tahoma is tighter than either Arial or Verdana, giving a somewhat "scrunched together" appearance, especially when compared to Verdana, and especially when used for long passages of text. + Proper use of fonts Number of fonts

Use limited number of fonts Using too many fonts can clutter the document and make it more confusing. Documents with no more than 2 or 3 font faces look more organized, more streamlined, and more coherent. Font Variations Two elements in HTML create a bold text appearance, the element and the element.

The element has no semantic meaning. The element means "strong emphasis. If the purpose in using bold text is to emphasize content or give its meaning importance, the element is appropriate. If the purpose is to simply present fatter text, the is appropriate as this is purely cosmetic or stylistic. Capitalization Typing sentences or phrases IN

ALL CAPITALS is rarely a good idea. It may make sense under some circumstances, but only rarely. Aesthetic Web Design Typography Improve a Web site's readability, establish branding, and enhance the tone or style of the Web site Font techniques link: Functional and Usable + Design

Objectives 3.1.2: Relate basic components of a Web page (e.g., color, space, written content, typography, images, links, multimedia) to aesthetic, functional and/or usable design principles. 3.1.5: Compare functional and usable design principles, and explain how usability can affect a Web site's success. 3.1.6: Critique the aesthetic design, usability and accessibility of sample Web sites. + Functional and Usable Design

A functional Web site renders without error and functions as expected: All internal and external links work All forms of interactivity function The page loads quickly + Functional and Usable Design Usability assesses how easy a user interface is to use. Measures the quality of a persons experience while interacting with a Web site. Anticipate and responds to the needs of visitors

(FAQ) Visitors can quickly and easily locate needed information +Functional and Usable Design HCI and Writing Web Content Human-Computer Interaction (HCI) = the study, planning, design and uses of the interaction between people and computers. Learnability How easy is it for people to use the first time they try? Efficiency Once users are familiar with the design, how quickly can they do what they want or need to do? Memorability If someone doesn't use the design for some

time, how easy will it be for them to become familiar with it again? Errors How many errors users make, how quickly do they recover from them and how much trouble is it to fix? Satisfaction How pleasant is it to use this product? +Functional and Usable Design HCI and Writing Web Content Writing Tips for the Web: Do not use industry jargon or slang Be cautious using humor or clever headings Write headings that clearly communicate the content of the Web page or subtopic Do not underline text or headings. They may be confused for hyperlinks

+ Functional and Usable Design Browser Compatibility Web sites should be tested in variety of browsers and devices to verify that they display consistently + Functional and Usable Design Accessibility Accessibility is the practice of making Web sites usable by people of all abilities and disabilities. Provide text links as an alternative to image links. Choose a high amount of contrast between page background and text colors. Do not use color alone to convey meaning, because you will

exclude people who are color blind or use screen readers. Provide alternative text description for images and other visual elements. Summarize tables and provide headings as appropriate for lineby-line reading. Provide transcripts for audio and captioning for video. + Multi-media & Interactivity Objectives 3.1.7: Define multimedia, and identify its role in Web page interactivity. + Multimedia and Interactivity Multimedia is the combined use of audio, video, animation and other interactive features.

Common Web page interactivity components Clicking a link Moving the mouse to cause an image to appear Clicking buttons on a form or survey Customizing a Web page view or contents Watching a video or listening to audio Taking surveys or live chats Multimedia and interactivity can make Web pages more interesting and informative

Recently Viewed Presentations

  • The Stone Ages The Paleolithic Era  (Old Stone

    The Stone Ages The Paleolithic Era (Old Stone

    Arial MS Pゴシック Times New Roman Blank Presentation The Stone Ages The Paleolithic Era (Old Stone Age) PowerPoint Presentation Probable Early Human Migration Routes Paleolithic Societies PowerPoint Presentation PowerPoint Presentation PowerPoint Presentation PowerPoint Presentation PowerPoint Presentation PowerPoint Presentation
  • Ancient Global History - University of Warwick

    Ancient Global History - University of Warwick

    Modern push for more comparisons - University of Athens and China signing co-operation agreements. See recent joint conference re closer cooperation in September 2018 (66 people from 30 Chinese institutions in Athens), Professor Huang Huilin, Dean of Academy for International...
  • HealthPartners Recycling Program Friday, April 6, 2018 1

    HealthPartners Recycling Program Friday, April 6, 2018 1

    RH process: The recycling containers for anesthesia are in the OR all the time. Only clean materials from setting up, such as syringe covers, packaging etc. go in there. ... in partnerships with the local high school, 2 local church...
  • Income Taxes in Capital Budgeting Decisions Appendix 8C

    Income Taxes in Capital Budgeting Decisions Appendix 8C

    The tax rate is a flat percentage of taxable income. An expenditure net of its tax effect is known as after-tax cost. The equation for determining the after-tax cost of any tax-deductible cash expense is as shown. Assume a company...
  • Developing Critical Thinking: an exercise in social welfare ...

    Developing Critical Thinking: an exercise in social welfare ...

    The Challenged Thinker. Challenged thinkers know there are ideas "out there" that may challenge their belief system, but they may not be aware how to identify other ideas and concepts. The task here is to develop what Elder and Paul...
  • Measuring Nutritional & Functional Outcomes in Head &

    Measuring Nutritional & Functional Outcomes in Head &

    Planning Committee: Tricia Hutchison, Alberta Health Services Brittany Oster, Alberta Health Services Lorena Gerl, Cancer Care Manitoba Megan McLeod, CancerCare Manitoba Ryna Levy-Milne, B.C. Cancer Agency Elaine Shearer, B.C. Cancer Agency Courtney McKay, Saskatchewan Cancer Agency Rhonda Brockman, Saskatchewan Cancer...
  • Warm - Up # 7

    Warm - Up # 7

    Beginning of Class . 1. Get a chrome book and get logged on! 2. Take Russian Revolution Quiz. On Mr. Mathews Website . 3. Complete Analytical Thesis Practice Quiz
  • Copyright Enforcement in the Traditional and Online ...

    Copyright Enforcement in the Traditional and Online ...

    (2) It is understood that, at the time a country becomes bound by this Convention, it will be in a position under its domestic law to give effect to the provisions of this Convention. Article 26 of the Rome Convention...