Transcript Chapter 02

Web Design, 2nd Edition
Chapter Objectives
Explain the advantages of Web publishing
Demonstrate currency in Web pages
Compare Web publishing to print publishing
Understand how to use basic design principles
to create successful Web pages and Web sites
Understand the effects of balance and
proximity of Web page elements
Chapter 2: Web Publishing Fundamentals
2
Chapter Objectives
Describe the importance of contrast and focus
on a Web page
Recognize the impact of unity within a Web
site
Explain and apply specific attributes for writing
effective Web content
Recognize the characteristics of easily read
Web pages
Apply the inverted pyramid style of writing
Chapter 2: Web Publishing Fundamentals
3
Chapter Objectives
Differentiate between paragraph format and
chunked format
Describe the impact of color on Web pages
and understand RGB color
Differentiate among primary, secondary,
complementary, warm, and cool colors
Discuss the legal, ethical, technical, and
special needs issues in Web site development
Chapter 2: Web Publishing Fundamentals
4
Advantages of Web Publishing
Web publishing offers distinct advantages over
print
– Timely content
– Connectivity
– Reduced production costs
– Rapid and economical delivery
Chapter 2: Web Publishing Fundamentals
5
Timely Content
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
Chapter 2: Web Publishing Fundamentals
6
Timely Content
Chapter 2: Web Publishing Fundamentals
7
Connectivity
Web pages offer the opportunity of connecting
with the audience
Two main ways to interact and gather
information:
– E-mail link
– Forms
Be sure to use e-mail to customers sparingly
so as to avoid the impression of “spam”
Build simple and convenient ways for your
users to connect with you
Chapter 2: Web Publishing Fundamentals
8
Connectivity
Chapter 2: Web Publishing Fundamentals
9
Reduced Production Costs
Web publishing is more cost effective than
print
Colorful designs, photographs, and text can
be included in a Web page for considerably
less cost
Don’t forget to consider file size, space
limitations, and load time
Chapter 2: Web Publishing Fundamentals
10
Rapid and Economical Delivery
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 Fundamentals
11
Basic Design Principles
Three things to consider when designing
a successful Web publication that will
leave a distinct impression:
– Balance and Proximity
– Contrast and Focus
– Unity
Chapter 2: Web Publishing Fundamentals
12
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 a fun, energetic mood
Chapter 2: Web Publishing Fundamentals
13
Balance and Proximity
Symmetrical
Chapter 2: Web Publishing Fundamentals
Asymmetrical
14
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
– not always white in color
Chapter 2: Web Publishing Fundamentals
15
Balance and Proximity
Notice text is
close to image
Chapter 2: Web Publishing Fundamentals
16
Balance and Proximity
Notice appropriate
use of white space
Chapter 2: Web Publishing Fundamentals
17
Contrast and Focus
Contrast is a mix of elements to stimulate
attention
By varying the size of Web page elements,
you can establish a visual hierarchy of
information that will show your visitors which
elements are most important
Chapter 2: Web Publishing Fundamentals
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
Chapter 2: Web Publishing Fundamentals
19
Contrast and Focus
Chapter 2: Web Publishing Fundamentals
20
Unity
Web pages and Web sites need unity, a sense
of oneness
Create unity with consistency and repetition
across your Web pages
Examples:
– Logo
– Font
– Colors
– Tag line (motto)
Chapter 2: Web Publishing Fundamentals
21
Unity
Chapter 2: Web Publishing Fundamentals
22
Unity
Focusing on alignment will ensure that your
Web pages have a consistent, structured
presentation
– Alignment is the arrangement of objects in fixed or
predetermined positions
Generate a sense of unity or oneness by
utilizing consistent alignment, a common
graphic theme, and a common color theme
Chapter 2: Web Publishing Fundamentals
23
Unity
Chapter 2: Web Publishing Fundamentals
24
Unity
Chapter 2: Web Publishing Fundamentals
25
Writing for the Web
The Web audience typically looks for
information that is:
– Accurate
– Easily Read
– Understandable
– Comprehensive and Concise
Chapter 2: Web Publishing Fundamentals
26
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 (even if content wasn’t changed)
– Be sure to avoid spelling and grammar errors as
they challenge your Web site’s credability
Chapter 2: Web Publishing Fundamentals
27
Writing for the Web
Easily Readable
– Make information easy to scan
– Use headings, subheads, lists, and highlighted
sections
– Begin each paragraph with a topic sentence
Chapter 2: Web Publishing Fundamentals
28
Writing for the Web
Suggestions to assist readability
– Use 12-point font for body
– Avoid typing in all uppercase and avoid underline
– Use a sans serif type font
– Use plain or subtle backgrounds
– Be cautious regarding humor
Chapter 2: Web Publishing Fundamentals
29
Writing for the Web
Understandability
– Write your copy in the inverted pyramid style
Conclusion:
Who, what, when,
where, why
Details
Background info
Chapter 2: Web Publishing Fundamentals
30
Writing for the Web
Comprehensive and Concise
– Web users prefer not to read long passages of text
on-screen
– Use chunked format instead of paragraph format
– Consider using hyperlinks for additional
information, such as historical backgrounds
– Format hyperlinks so that the linked page will
appear in a new browser window (to keep visitors
in contact with your home page)
Chapter 2: Web Publishing Fundamentals
31
Writing for the Web
Paragraph format vs. Chunked format
Chapter 2: Web Publishing Fundamentals
32
Color and the Web
Color is a powerful design tool
Improper use of color can detract from a Web
page’s appearance
– Excessive use
– Inappropriate use
– Lack of basic comprehension of how monitors
project color
Chapter 2: Web Publishing Fundamentals
33
Impact of Color
 Color enhances your Web site’s purpose and
personality
 Observe how others effectively use color
 Warm colors (yellow, orange, red) are associated
with activity and power
 Cool colors (green, blue, violet) suggest tranquility
and detachment
 Certain colors have come to symbolize particular
qualities (white – purity, purple – royalty)
 No absolute correct/incorrect choices
Chapter 2: Web Publishing Fundamentals
34
Impact of Color
Chapter 2: Web Publishing Fundamentals
35
RGB System
Monitors project color using an RGB System
– Combines red, green, and blue light
– Levels of intensity are measured from
0 – 255 (total of 256 levels for each color = 16.7
million total colors)
– PCs and MACs share 216 of the 256 color
intensities (known as the Web-safe palette)
– Not all monitors can display all colors, depending
on “bit” setting of monitors
Chapter 2: Web Publishing Fundamentals
36
RGB System
Enter color using hexadecimal system
– Example: FF6699
Chapter 2: Web Publishing Fundamentals
37
RGB Color
Colors outside of the Web-safe palette may appear dithered – spotty and uneven.
If an illustration includes colors in addition to the browser-safe palette
is viewed with an 8-bit monitor, the browser will substitute colors that
come close to the proposed colors
Chapter 2: Web Publishing Fundamentals
38
Noteworthy Issues Regarding
Web Development
Successful Web publishing includes
recognizing the following issues:
– Technical
– Legal and ethical considerations
– Universal access
Chapter 2: Web Publishing Fundamentals
39
Technical Issues
 Bandwidth is the quantity of data that can be
transmitted in a specific time frame
– Influenced by speed of the user’s and the ISP’s/OSP’s
connections, the amount of traffic, and size of the Web page
 Keep file sizes to a minimum
– Adobe Photoshop (and other photo editing programs) can
decrease image file size
– Consider using thumbnails (miniature versions of pictures
that link to larger photos)
 Differences among browsers (Graphical vs. Non-graphical
display) – may need to use the ALT tag
Chapter 2: Web Publishing Fundamentals
40
Technical Issues
A Web page also will display differently
depending on monitor’s resolution setting
– Resolution = the measure of sharpness and clarity
– Examples: 800 x 600, 1280 x 1024
– Measured in pixels (pixel - a single point in an electronic
image)
– Page elements display differently at different resolutions
(users may have to scroll more if resolution is set low;
horizontal scrolling is a no-no!)
– Use percentages (relative width) instead of pixels (fixed
width) to define width of elements
Chapter 2: Web Publishing Fundamentals
41
Legal and Ethical Considerations
 Copyright - the ownership of intellectual property
– Easy to acquire images from the Web (but don’t use
copyrighted ones)
– Published and unpublished works are protected by copyright
(even if they are not registered with the US Copyright Office)
– Make sure the material on your Web site is free of copyright
restrictions
– Obtain written permission from the owner to use any
copyrighted material
– Protect your work by copyrighting your material
– Example of notation: © 2008 Gore’s Computing
Chapter 2: Web Publishing Fundamentals
42
Legal and Ethical Issues
Privacy and Security
– Visitors are concerned with the legitimate use of
their information
• Examples: Social security numbers, credit card
numbers, bank account numbers
– Include a privacy statement on your Web site that
explains how the submitted data will be used
– E-commerce sites use encryption/decryption
• Secure Sockets Layer (SSL)
– https://
Chapter 2: Web Publishing Fundamentals
43
Legal and Ethical Issues
Chapter 2: Web Publishing Fundamentals
44
Universal Access
Accessibility
– Consider access by visitors with special needs
• W3C’s Web Accessibility Initiative (WAI)
– Utilize resources and tools to make your Web
pages more accessible to people with special
needs
Chapter 2: Web Publishing Fundamentals
45
Chapter Summary
 Explain the advantages of Web publishing
 Demonstrate currency in Web pages
 Compare Web publishing to print publishing
 Understand how to use basic design principles to
create successful Web pages and Web sites
 Understand the effects of balance and proximity of
Web page elements
Chapter 2: Web Publishing Fundamentals
46
Chapter Summary
 Describe the importance of contrast and focus on a
Web page
 Recognize the impact of unity within a Web site
 Explain and apply specific attributes for writing
effective Web content
 Recognize the characteristics of easily read Web
pages
 Apply the inverted pyramid style of writing
Chapter 2: Web Publishing Fundamentals
47
Chapter Summary
 Differentiate between paragraph format and chunked
format
 Describe the impact of color on Web pages and
understand RGB color
 Differentiate among primary, secondary,
complementary, warm, and cool colors
 Discuss the legal, ethical, technical, and special
needs issues in Web site development
Chapter 2: Web Publishing Fundamentals
48
Web Design, 2nd Edition