CHS Web Design Track

Advantages of Web Publishing

• Web publishing offers distinct advantages over print
  • Currency
  • Connectivity
  • Interactivity
  • Cost
  • Delivery

The Currency Advantage

• Websites 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
• Use Connectivity tools to
  • communicate with customers and enable social media sharing

The Connectivity Advantage

• The web’s connectivity advantage, or ability to instantaneously distribute and share content
• Content aggregators
  • Digg
  • StumbleUpon
  • Streamline the writing process

The Interactivity Advantage

• Internet and web technologies promote data and resource sharing
  • Page of contact information
  • Links to blog, Twitter feed, Facebook page
  • Account signups
  • Web-based forms
  • Comments

The Cost Advantage

• Updating web content
  • is more cost effective than updating print content
• Web publishing costs
  • do not vary based on length, color, or design complexity
• Developing a website can be expensive:
  • Web design
  • Content writing or adaptation
  • Multimedia development
  • Website hosting
  • Domain name registration
  • Promotional Services

The Delivery Advantage

• Distributing information via the web can be fast and inexpensive
• 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
• Use your website to expand upon printed content

Basic Web Design Principles

• Balance and Proximity
• Contrast and Focus
• Unity and Visual Identity

Balance and Proximity

• 
• Arrange web elements symmetrically (centered and balanced) to suggest a conservative, safe, peaceful atmosphere
• Arrange web elements asymmetrically (off balance) to create an energetic mood
  • Asymmetrical designs typically do not adapt well to mobile devices

• 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 webpage elements

Contrast and Focus

• Contrast is a mix of elements to stimulate attention
  • Use different text styles, colors, and size
• Focus is the center of interest or activity
• A webpage needs a focal point
• Create webpages with contrast to elicit awareness and establish a focal point, the center of interest or activity

Unity and Visual Identity

• 
• All pages at a website must have unity, a sense of oneness or belonging, create the visual identity
• Create unity with consistency and repetition throughout a website
• Unity is associated with branding
  • Branding specifications
  • Tag line
• Alignment is the arrangement of objects in fixed or predetermined positions
• Using grids for layout is part of RWD

Color as Web Design Tool

• Color can be a powerful design tool
  • Reinforces branding
  • Brings focus
  • Increases contrast
  • Improves readability
  • Sets mood

The Color Wheel

• 
• The color wheel can help you choose effective and appealing color combinations

  • Primary colors

    colors that cannot be created by mixing other colors together

  • Secondary colors

    combinding two primary colors

  • Cool colors

    green, blue, and purple colors

  • Warm colors

    yellow, orange, and red colors

  • Complementary colors

    those directly opposite each other on the color wheel

The RGB Color System

• 
• Monitors project color using the RGB color system
  • Combines red, green, and blue light (primary colors in RGB color system)

  • Values

    are the levels of intensity and are measured from 0 to 255

  • A monitor’s color depth is the actual number of colors that a monitor displays
  • The hexadecimal system uses 16 symbols to signify values

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 website
• Review several commercial and noncommercial website color schemes

Writing for the Web

• Use language that is:
  • Straightforward
  • Contemporary
  • Geared toward an educated audience
• Avoid overly-promotional language
• Use headings to communicate content
• Be cautious with humor
• Be accurate and current
• Be scannable
• Be organized

Accuracy and Currency

• Confirm the accuracy of your material with a reliable source
• Avoid spelling and grammar errors
• Keep content current
• Indicate the date and time of the last update to your website

Scannability

• 
• Chunked text is easier to scan
  • Small sections
    • Headings
    • Subheadings
    • Bulleted lists
• Use chunked text
• Begin long paragraphs with topic sentences
• Avoid colored text or underline for emphasis
• Avoid using only uppercase characters

Organization

• 
• Inverted pyramid style
  • Summary
  • Details
  • Background information

Web Publishing Issues

• Technical Issues
• Legal and Privacy Issues
• Accessibility and Usability Issues

Technical Issues

• 
• Bandwidth is the quantity of data that can be transmitted in a specific time frame
  • Keep file sizes to a minimum
  • Use thumbnails
  • Optimize graphics
• Browser differences
  • Graphical vs. non-graphical display
    • Alternative text
• Resolution
  • The measure of sharpness and clarity
  • A pixel is a single point in an electronic image
  • Page elements display differently at different resolutions
  • When designing websites for mobile devices, you must account for a smaller screen size and the auto-rotate feature included in many smartphones and tablets
• Mobile-friendly practices
  • RWD (Responsive Web Design)
  • Bandwidth
  • Mobile-first

Legal and Privacy Issues

• Legal Issues
  • Easy to acquire images from the web
  • Make sure the material on your website is free of copyright infringement
    • Ownership of intellectual property
  • Obtain permission from the owner to use any copyrighted material
  • Use connectivity tools
• Protect your work by copyrighting your material

• Privacy Issues
  • 
  • Cautiously give out personally identifiable information (PII)

  • Encryption

    process that encodes data into illegible content

  • Decryption

    remove the encryption and return data to its original format

  • Secure Sockets Layer (SSL)

    protocol safeguards and encrypts confidential information as it travels over the Internet

  • 

  • Cookies

    common web tracking method

  • Privacy policy statement

    explains the use of information submitted by a visitor or gathered automatically through server logs and cookies

Accessibility and Usability Issues

• 
• Web accessibility deals with ensuring access to web-based information
• W3C sets web standards

  • WAI

    Google for definition and write it here

• Section 508

  Google for definition and write it here

• Web usability involves designing a website and its pages so that all visitors to the website can easily and quickly satisfy their goals
• Web designers incorporate user experience (UX) practices into webpage design

Chapter Review

1. Describe the advantages of web publishing
   
   
2. Discuss basic web design principles
   
   
3. Define the requirements for writing for the web
   
   
4. Explain the use of color as a web design tool
   
   
5. Identify web publishing issues