Slide 1

Slide 2

Web Design, 3 rd Edition 2 Web Publishing Fundamentals

Slide 3

Chapter Objectives Describe the advantages of Web publishing Discuss basic Web design principles Define the requirements for writing for the Web Explain the use of color as a Web design tool Identify Web publishing issues Chapter 2: Web Publishing Fundamentals2

Slide 4

Advantages of Web Publishing Web publishing offers distinct advantages over print Currency Interactivity Reduced production costs Rapid, economical delivery Chapter 2: Web Publishing Fundamentals3

Slide 5

The Currency Advantage Web sites can be updated continuously, while print publications are only as current as their date of publication To keep visitors on your site, always supply timely, changing material USA TODAY USA TODAY Chapter 2: Web Publishing Fundamentals4

Slide 6

The Currency Advantage Chapter 2: Web Publishing Fundamentals5

Slide 7

The Interactivity Advantage Internet and Web technologies promote data and resource sharing Four main ways to interact: Page of contact information Blogs Web-based forms Member pages Chapter 2: Web Publishing Fundamentals6

Slide 8

The Interactivity Advantage Chapter 2: Web Publishing Fundamentals7

Slide 9

Your Turn! (page 44) Exploring Currency and Interactivity 1.Visit the Web Design Chapter 1 Online Companion Web page scsite.com/web3e/ch2/ and click FOX, K2 Snowboarding, and Office in the Your Turn links.scsite.com/web3e/ch2/FOXK2 SnowboardingOffice 2.Explore each Web site and answer the following questions: a.Is the site's content current, or does it appear to be outdated? Give examples to support your answer. b.What tools does the site use to promote interactivity and communication? 3.Write a report discussing your site exploration and describe how similar methods and tools could be incorporated at your Web site.

Slide 10

The Cost Advantage Web publishing is more cost effective than print Colorful designs, photographs, and text can be included in a Web page for considerably less cost Dont forget to consider file size, space limitations, and load time Chapter 2: Web Publishing Fundamentals9

Slide 11

The Delivery Advantage Distributing information via the Web can be much faster and less expensive With the same immediacy and cost, the Web can reach both global and local audiences Consider the Web when the need exists for economical and rapid distribution of information Chapter 2: Web Publishing Fundamentals10

Slide 12

Basic Web Design Principles Three things to consider when designing a successful Web publication that will leave a distinct impression: 1.Balance and Proximity 2.Contrast and Focus 3.Unity and Visual Identity Chapter 2: Web Publishing Fundamentals11 More on Web

Slide 13

Balance and Proximity Arrange Web elements symmetrically (centered and balanced) to suggest a conservative, safe, peaceful atmosphere Avoid too much symmetry Arrange Web elements asymmetrically (off balance) to create an fun, energetic mood Chapter 2: Web Publishing Fundamentals12

Slide 14

Balance and Proximity Chapter 2: Web Publishing Fundamentals13 symmetrically center-aligned page elements create balance and a conservative mood asymmetrically positioned page elements create an energetic, light-hearted mood

Slide 15

Balance and Proximity Proximity (closeness) is closely associated with balance Elements that have a relationship should be placed close to each other White space can help define proximity and organize Web page elements Chapter 2: Web Publishing Fundamentals14

Slide 16

Balance and Proximity Chapter 2: Web Publishing Fundamentals15 white space Logo and name white space Headings and subheadings Image above or to left of text or caption

Slide 17

Contrast and Focus Contrast is a mix of elements to stimulate attention Use different text styles, colors, and size Chapter 2: Web Publishing Fundamentals16 element size contrast typeface contrast

Slide 18

Contrast and Focus Focus is the center of interest or activity A Web page needs a focal point This is where you want your visitors to focus their attention Create Web pages with contrast to elicit awareness and establish a focal point, the center of interest or activity Chapter 2: Web Publishing Fundamentals17

Slide 19

Unity and Visual Identity Web pages and Web sites need unity, a sense of oneness Create unity with consistency and repetition across your Web pages Brand is the assurance or guarantee that a business or organization offers customers Tag line is a concise statement that a consumer readily associates with a business, organization or product. Chapter 2: Web Publishing Fundamentals18 More on Web

Slide 20

Unity and Visual Identity Chapter 2: Web Publishing Fundamentals19

Slide 21

Unity and Visual Identity Alignment is the arrangement of objects in fixed or predetermined positions Choose one method of alignment and use it regularly not aligned page perceived as inconsistent aligned assists readability, organized appearance Web site builds on established visual identity found on billboards, television, newspaper, and magazine advertisements for a company. Chapter 2: Web Publishing Fundamentals20

Slide 22

Unity and Visual Identity Chapter 2: Web Publishing Fundamentals21

Slide 23

Unity and Visual Identity Chapter 2: Web Publishing Fundamentals22 left alignment of text in columns vertical alignment of product links

Slide 24

Writing for the Web Visitors typically look for information with: Accuracy and currency Scannability Organization Understandable Comprehensive and Concise Chapter 2: Web Publishing Fundamentals23

Slide 25

Writing for the Web Accuracy Confirm the accuracy of your material with a reliable source Indicate the date of the last update to your Web site Be sure to avoid spelling and grammar errors Challenge Web sites credibility Write content in Word processing program first and perform spelling and grammar checks Chapter 2: Web Publishing Fundamentals24

Slide 26

Writing for the Web Scannability Make information easy to scan Use headings, subheads, and bulleted lists Begin each paragraph with a topic sentence Chapter 2: Web Publishing Fundamentals25 More on Web

Slide 27

Writing for the Web To assist readability Use 12 point font Avoid typing in all uppercase (shouting) Avoid colors that suggest a hyperlink Use a sans serif type font Use plain or subtle backgrounds

Slide 28

Writing for the Web Understandability Write your copy in the inverted pyramid style (classic newswriting style) Places conclusion (lead) first, followed by details (body), then background information. summary details background

Slide 29

Writing for the Web Comprehensive and Concise Web publications should have half the copy of a printed publication Use chunked format instead of paragraph format more significant points focuses on a specific topic Consider using hyperlinks for additional information, such as historical backgrounds

Slide 30

Color and the Web Color can be a powerful design tool The color wheel can help you choose effective and appealing color combinations Primary colors Secondary colors Cool colors Warm colors Complementary colors Chapter 2: Web Publishing Fundamentals29

Slide 31

Impact of Color Cool colors left side of wheel Primary colors red, yellow, and blue Secondary colors orange, green, and violet Warm colors right side of wheel Complementary colors opposite each other on wheel

Slide 32

Impact of Color Color enhances your Web sites purpose and personality Observe how others effectively use color Warm colors are associated with activity and power Cool colors suggest tranquility and detachment

Slide 33

The RGB Color System Monitors project color using an RGB System Combines red, green, and blue light Levels of intensity are measured from 0 255 (color has hexadecimal code) RGB value of 255:102:153 is FF6699 (dusty rose color) Not all monitors can display all colors Web-safe palette browsers share 216 of 256 colors WYSIWYG editors, graphics and illustration programs offer Web-safe palettes. Dithering browser will substitute color for one of the missing colors in group of 256 Cause graphics to look spotty or uneven Chapter 2: Web Publishing Fundamentals32

Slide 34

Target Audience Expectations Certain colors have come to symbolize particular qualities Keep in mind the qualities generally associated with different colors when selecting colors for your Web site Review several commercial and noncommercial Web site color schemes Chapter 2: Web Publishing Fundamentals33 More on Web

Slide 35

Web Publishing Issues Successful Web publishing includes recognizing the following issues: Technical Legal and ethical Accessibility Usability Design techniques Chapter 2: Web Publishing Fundamentals34

Slide 36

Technical Bandwidth is the quantity of data that can be transmitted in a specific time frame (bits per second) Keep file sizes to a minimum Adobe Photoshop can decrease image file size Thumbnails miniature photo version that links to larger photos Differences among browsers Graphical vs. Non-graphical display Browsers vary in support for HTML, CSS, and JavaScript ALT tag added to ATTRIBUTE to describe the graphic in case the graphics mode in browser is turned off.

Slide 37

Technical Issues How alternative text works Chapter 2: Web Publishing Fundamentals36 Web page in browser with images turned on Web page in browser with images turned off displaying alternative text

Slide 38

Technical Issues Monitor Resolution The measure of sharpness and clarity A pixel (picture element) is a single point in an electronic image (96 pixels per inch default) Page elements display differently at different resolutions Use percentages instead of pixels to define width Solution use relative width tables (define width with percentages) as opposed to fixed width tables (define width with pixels) More on Web

Slide 39

Your Turn! (page 57) Exploring Screen Resolution and Page Layout 1.Visit the Web Design Chapter 2 Online Companion Web page scsite.com/web3e/ch2/ and click Barnes & Noble or Amazon.com in the Your Turn links. scsite.com/web3e/ch2/Barnes & NobleAmazon.com 2.View the Web page using at least three of the following screen resolution settings: 800 x 600, 1024 x 768, 1280 x 720, and 1280 x 1024. a.Right-click the desktop. b.Click Personalize on the shortcut menu. c.Click Display Setting in the Personalize appearance and sounds window. d.Drag the Resolution slider to the desired setting in the Display Settings dialog box. e.Click OK. 3.Document the difference in the display of each page when viewed at the different resolutions. Return your monitor to its original setting when finished. 4.Write a report discussing how viewing a Web page at different resolutions can affect Web page design.

Slide 40

Legal and Privacy Issues Copyright Easy to acquire images from the Web Make sure the material on your Web site is free of copyright infringement Ownership of intellectual property Obtain written permission from the owner to use any copyrighted material Protect your work by copyrighting your material Chapter 2: Web Publishing Fundamentals39

Slide 41

Legal and Privacy Issues Privacy Issues Cautiously give out personally identifiable information (PII) Encryption Decryption Secure Sockets Layer (SSL) Cookies Privacy policy statement Chapter 2: Web Publishing Fundamentals40

Slide 42

Legal and Privacy Issues Chapter 2: Web Publishing Fundamentals41

Slide 43

Accessibility and Usability Issues Web Accessibility Consider access by visitors with special needs Web Accessibility Initiative (WAI) Utilize resources and tools to make your Web pages more accessible to people with special needs Section 508 Chapter 2: Web Publishing Fundamentals42 More on Web

Slide 44

Chapter Summary Describe the advantages of Web publishing Discuss basic Web design principles Define the requirements for writing for the Web Explain the use of color as a Web design tool Identify Web publishing issues Chapter 2: Web Publishing Fundamentals43

Slide 45

Case Study # 2 Case Study Page 67 Do steps 1-2 to produce 2 page paper using Word. See assignment web page for details.web page

Slide 46

Web Design, 3 rd Edition 2 Web Publishing Fundamentals