comm 3353: communication web technologies i chapter 8b: web site design, production, and aesthetics,...
TRANSCRIPT
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.
Graphic Issues, Continued…Graphic Issues, Continued…
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.
Graphic Issues, Continued…Graphic Issues, Continued…
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.
Graphic Issues, Continued…Graphic Issues, Continued…
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.”
Graphic Issues, Continued…Graphic Issues, Continued…
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.
Graphic Issues, Continued…Graphic Issues, Continued…
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
Graphic Issues, Continued…Graphic Issues, Continued…
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.
Graphic Issues, Continued…Graphic Issues, Continued…
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. . .
Graphic Issues, Continued…Graphic Issues, Continued…
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 Issues, Continued…Graphic Issues, Continued…
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.
Graphic Issues, Continued…Graphic Issues, Continued…
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.
Graphic Issues, Continued…Graphic Issues, Continued…
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).
Graphic Issues, Continued…Graphic Issues, Continued…
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…
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.
Tips for Effective Web Site Design, Continued…
Tips for Effective Web Site Design, Continued…
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. . .
Tips for Effective Web Site Design, Continued…
Tips for Effective Web Site Design, Continued…
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.