comm 3353: communication web technologies i chapter 8b: web site design, production, and aesthetics,...

COMM 3353:Communication Web Technologies I

COMM 3353:Communication Web Technologies I

Chapter 8b:Web Site Design, Production, and Aesthetics, Continued…

Chapter 8b:Web Site Design, Production, and Aesthetics, Continued…

By Dr. Shawn McCombs - http://soc.class.uh.edu/~smccombs

Web Site Design, Production, and Aesthetics, Continued…

Web Site Design, Production, and Aesthetics, Continued…

Graphic Issues Organization (Commercial) Site

Analysis Tips For Effective Web Site Design Evaluating A Web Site The Future of Web Site Design

Graphic Issues Organization (Commercial) Site

Analysis Tips For Effective Web Site Design Evaluating A Web Site The Future of Web Site Design

Graphic IssuesGraphic Issues Graphics attract people to a site.

Must be of good quality and load quickly Graphics can get people’s attention long

enough to get out the desired message. If good, can cause return visits.

Primary Types of Graphic Files GIF Files JPG Files

Graphics attract people to a site. Must be of good quality and load quickly Graphics can get people’s attention long

enough to get out the desired message. If good, can cause return visits.

Primary Types of Graphic Files GIF Files JPG Files

GIF ( .gif) Files Graphic Interchange Format Most common type of graphic files to date Developed and originally owned by CompuServe (AOL). Companies and organizations which profit from GIF

usage are supposed to obtain licensing from CompuServe Just doesn’t happen, except for the largest of the players

(Microsoft, IBM, etc.) Microsoft developed it’s own “gif” and “bmp” formats to combat

CompuServe’s market share.

GIF ( .gif) Files Graphic Interchange Format Most common type of graphic files to date Developed and originally owned by CompuServe (AOL). Companies and organizations which profit from GIF

usage are supposed to obtain licensing from CompuServe Just doesn’t happen, except for the largest of the players

(Microsoft, IBM, etc.) Microsoft developed it’s own “gif” and “bmp” formats to combat

CompuServe’s market share.

Graphic Issues, Continued…Graphic Issues, Continued…

GIF Files, Cont. GIF Formats:

GIF87a (developed in 1987, single layering capability).

GIF89a (developed in 1989, multi-layering capability).

Most commonly used today. Transparent imaging a must in web design and

development.

GIF Files, Cont. GIF Formats:

GIF87a (developed in 1987, single layering capability).

GIF89a (developed in 1989, multi-layering capability).

Most commonly used today. Transparent imaging a must in web design and

development.


JPeG ( .jpg) Files Joint Photographic Experts Group. High-quality complex imaging. Utilizes compression algorithms to make

files “appear” smaller. Compression eliminates redundant information

in order that the file take up less space The higher the level of compression, the

greater the sacrifice in quality.

JPeG ( .jpg) Files Joint Photographic Experts Group. High-quality complex imaging. Utilizes compression algorithms to make

files “appear” smaller. Compression eliminates redundant information

in order that the file take up less space The higher the level of compression, the

greater the sacrifice in quality.


JPeG Files, Continued… Best used for images or photographs that require

a “natural” look. The higher the resolution, the more natural an image

appears.

JPeG compression can (and usually does) result in image rastering.

JPeG Files are usually better for screen viewing, whereas GIF Files are better for printing because of their simplicity.

JPeG Files, Continued… Best used for images or photographs that require

a “natural” look. The higher the resolution, the more natural an image

appears.

JPeG compression can (and usually does) result in image rastering.

JPeG Files are usually better for screen viewing, whereas GIF Files are better for printing because of their simplicity.


File Size Three Elements of File Size:

Physical image size. Resolution. Amount of colors associated with the image.

Generally, the best way to cut down on file size is to limit the number of colors. 256 to 16 or 8 bit to 4 bit

Mac uses 16 bit or “millions of colors.”

File Size Three Elements of File Size:

Physical image size. Resolution. Amount of colors associated with the image.

Generally, the best way to cut down on file size is to limit the number of colors. 256 to 16 or 8 bit to 4 bit

Mac uses 16 bit or “millions of colors.”


File Size You MUST Optimize your images in

PhotoShop or some other photo optimization utility.

The goal is to learn and master the ability to manipulate file size, then learn compression methods (the easiest is to use the “Save for Web and Devices” option in the file menu of PhotoShop.

File Size You MUST Optimize your images in

PhotoShop or some other photo optimization utility.

The goal is to learn and master the ability to manipulate file size, then learn compression methods (the easiest is to use the “Save for Web and Devices” option in the file menu of PhotoShop.


Downloading Graphics Many ways to obtain graphics online.

Click on a download link and the computer will prompt a “Save As” dialog box.

“Cold” download or “right-click (long-hold on Mac).”

Security issues Virus considerations and protection

Downloading Graphics Many ways to obtain graphics online.

Click on a download link and the computer will prompt a “Save As” dialog box.

“Cold” download or “right-click (long-hold on Mac).”

Security issues Virus considerations and protection


Legal Considerations Many legal issues must be considered

when downloading copyrighted graphics Academic requirements are somewhat lax

about permission, generally only requiring sources to be sited.

This is entirely different for the commercial world.

Copyright laws protect all reproducible data, and the internet is no exception.

Legal Considerations Many legal issues must be considered

when downloading copyrighted graphics Academic requirements are somewhat lax

about permission, generally only requiring sources to be sited.

This is entirely different for the commercial world.

Copyright laws protect all reproducible data, and the internet is no exception.


Legal Considerations, Continued. . . You MUST ask permission Before using

someone else’s stuff. Not normally required or enforced for academic

or personal use, but it’s a good idea to make it habitual.

Once permission is received and construction of the site occurs, the graphic or data MUST be cited somewhere on your web page, giving credit where credit is due. . .

Legal Considerations, Continued. . . You MUST ask permission Before using

someone else’s stuff. Not normally required or enforced for academic

or personal use, but it’s a good idea to make it habitual.

Once permission is received and construction of the site occurs, the graphic or data MUST be cited somewhere on your web page, giving credit where credit is due. . .


Whenever in doubt, always play it safe and get permission. A simple or generic, non-trademarked

graphic is probably exempt, but . . . Don’t use Mickey Mouse without Disney’s

permission.

Rule of thumb: “When in doubt, ask permission. . .”

Whenever in doubt, always play it safe and get permission. A simple or generic, non-trademarked

graphic is probably exempt, but . . . Don’t use Mickey Mouse without Disney’s

permission.

Rule of thumb: “When in doubt, ask permission. . .”


Graphic Differences Among Browsers Until recently, browsers treated graphic

files significantly different. Caused severe problems for web developers

and users as well, often forcing them to choose the “better” browser for their needs.

No longer the case as intrinsic browser functions have been standardized by IEEE.

Graphic Differences Among Browsers Until recently, browsers treated graphic

files significantly different. Caused severe problems for web developers

and users as well, often forcing them to choose the “better” browser for their needs.

No longer the case as intrinsic browser functions have been standardized by IEEE.


Using Graphics Wisely Less is more!

A busy web page = a bad web page unless that’s your niche. . .

Four Rules for Graphic Use: 1) Select appealing, appropriate fonts. 2) Keep graphics simple, use only NEEDED graphics. 3) Keep file size small as possible. 4) Select or manipulate an image that speaks to the three colors

you’ve selected for your overall site design. Keep the site simple. Busy sites are not revisited because they’re too confusing.

Using Graphics Wisely Less is more!

A busy web page = a bad web page unless that’s your niche. . .

Four Rules for Graphic Use: 1) Select appealing, appropriate fonts. 2) Keep graphics simple, use only NEEDED graphics. 3) Keep file size small as possible. 4) Select or manipulate an image that speaks to the three colors

you’ve selected for your overall site design. Keep the site simple. Busy sites are not revisited because they’re too confusing.


Using Graphics Wisely, Continued. . . Thumbnail technique

Drastically limits download time and allows more images per page. Use applet, scripts, or even image linking (<a href…>) to the “bigger” version if the user desires to see it in better detail.

The typical method for this class (especially during assignment two) is to generate two version of the same graphic file – one larger, one smaller (the smaller serving as thumbnail).

Using Graphics Wisely, Continued. . . Thumbnail technique

Drastically limits download time and allows more images per page. Use applet, scripts, or even image linking (<a href…>) to the “bigger” version if the user desires to see it in better detail.

The typical method for this class (especially during assignment two) is to generate two version of the same graphic file – one larger, one smaller (the smaller serving as thumbnail).


Tips for Effective Web Site DesignTips for Effective Web Site Design The Basic Principles of Good Web Site

Design: 1) Start small, letting the site take on a life

of it’s own. “Test the Water” before making significant changes to the site.

2) Begin with an attractive, easy to understand “home” or “index” page.

3) Have a contact or email address for feedback

The Basic Principles of Good Web Site Design: 1) Start small, letting the site take on a life

of it’s own. “Test the Water” before making significant changes to the site.

2) Begin with an attractive, easy to understand “home” or “index” page.

3) Have a contact or email address for feedback

The Basic Principles of Good Web Site Design, Continued. . . 4) Keep the opening page simple. 5) Post clickable icons and buttons in

obvious locations; avoid complexity. 6) Link pages back to the Homepage

(wagon wheel navigation) 7) Include a Search Engine on complex

sites.

The Basic Principles of Good Web Site Design, Continued. . . 4) Keep the opening page simple. 5) Post clickable icons and buttons in

obvious locations; avoid complexity. 6) Link pages back to the Homepage

(wagon wheel navigation) 7) Include a Search Engine on complex

sites.

Tips for Effective Web Site Design, Continued…


The Basic Principles of Good Web Site Design, Continued. . . 8) Stay Consistent throughout. 9) Use Visually stimulating graphics/audio. 10) Stress interactivity. 11) Keep sales-pitches and advertising at a

minimum (unless this is your focus). 12) Keep a balance between text,

graphics, and audio.

The Basic Principles of Good Web Site Design, Continued. . . 8) Stay Consistent throughout. 9) Use Visually stimulating graphics/audio. 10) Stress interactivity. 11) Keep sales-pitches and advertising at a

minimum (unless this is your focus). 12) Keep a balance between text,

graphics, and audio.



The Basic Principles of Good Web Site Design, Continued. . . 13) Make policy clear and available

(privacy, etc. . .). 14) Always include email and contact

information. 15) Link to other sites with caution. 16) Give visitors a reason to return.

Update frequently, value-added content, etc. . .

The Basic Principles of Good Web Site Design, Continued. . . 13) Make policy clear and available

(privacy, etc. . .). 14) Always include email and contact

information. 15) Link to other sites with caution. 16) Give visitors a reason to return.

Update frequently, value-added content, etc. . .



Evaluating a web site is measuring that web site’s success. Site evaluation = measurement of achieved goals and

objectives. Site evaluation in great detail checks the integrity of

each page and its functionality. Primarily to prevent major problems and technical glitches.

Site evaluation requires clear, thorough, and systematic method. Rating system and statistical analysis.

Evaluating a web site is measuring that web site’s success. Site evaluation = measurement of achieved goals and

objectives. Site evaluation in great detail checks the integrity of

each page and its functionality. Primarily to prevent major problems and technical glitches.

Site evaluation requires clear, thorough, and systematic method. Rating system and statistical analysis.

Evaluating a WebsiteEvaluating a Website

The Future of WebSite DesignThe Future of WebSite Design A Successful web site requires a strong

online presence. In order to achieve a strong presence, the

web requires imagination and creativity. A thorough “plan” should be in place before

the first tag is written. Future Web Design will look more like

Systems Analysis, using a SDLC.

A Successful web site requires a strong online presence.

In order to achieve a strong presence, the web requires imagination and creativity.

A thorough “plan” should be in place before the first tag is written.

Future Web Design will look more like Systems Analysis, using a SDLC.

Assignment 3 GradingAssignment 3 Grading A couple of relevant changes, based on the text and

the lecture: Use “Planning” to better help you in revamping your web site. The goal of this

component of the assignment is to help you redesign and develop a brand new website based on what you learn in chap 8, etc. Create a Site Plan and turn it in by 5:00pm the date the assignment is due. Your Site Plan should be reflective of your work and not others; if it is determined that your site plan followed a template or format belonging to someone else, you will not receive credit for the assignment. In other words, do your own work.

If you borrow a graphic from the web, email the owner of the image or site administrator (or whomever owns the site) for permission. Copy and paste both your email requesting permission – and the reply/response you receive in return – into your site plan; do so by including them as addendum components

with your site planning pages. A3 will be graded using the scales on pages 309 and 311.

A couple of relevant changes, based on the text and the lecture:

Use “Planning” to better help you in revamping your web site. The goal of this component of the assignment is to help you redesign and develop a brand new website based on what you learn in chap 8, etc. Create a Site Plan and turn it in by 5:00pm the date the assignment is due. Your Site Plan should be reflective of your work and not others; if it is determined that your site plan followed a template or format belonging to someone else, you will not receive credit for the assignment. In other words, do your own work.

If you borrow a graphic from the web, email the owner of the image or site administrator (or whomever owns the site) for permission. Copy and paste both your email requesting permission – and the reply/response you receive in return – into your site plan; do so by including them as addendum components

with your site planning pages. A3 will be graded using the scales on pages 309 and 311.

The Internet and theWorld Wide Web

The Internet and theWorld Wide Web

• End Chapter 8, Part II.

• End Chapter 8, Part II.

comm 3353: communication web technologies i chapter 8b: web site design, production, and aesthetics,...

Documents