effective web design shamick gaworski

Effective Web Effective Web DesignDesign

Shamick GaworskiShamick Gaworski

http://http://www.ca.uky.edu/calewww.ca.uky.edu/cale//

Effective Web DesignEffective Web Design

►1 - Process and Planning1 - Process and Planning►2 - Interface, Site and Page Design2 - Interface, Site and Page Design►3 - Graphics, Multimedia, 3 - Graphics, Multimedia,

AccessibilityAccessibility►4 - UK specific requirements4 - UK specific requirements►5 - Web New Trends, Questions 5 - Web New Trends, Questions

Ad 1 - Process and Ad 1 - Process and PlanningPlanning

► Organize Organize Analyze your needs and goals Analyze your needs and goals

► Site Specific DocumentSite Specific Document Detail why and what you intend to do? Detail why and what you intend to do? How long the process will take? How long the process will take?

► PlanningPlanning Web sites are developed by groups of people for the Web sites are developed by groups of people for the

needs of other groups of people. Design is needs of other groups of people. Design is (hopefully elegant) “addition” to useful information. (hopefully elegant) “addition” to useful information.

"Technology Problem" - enthusiasms for Web "Technology Problem" - enthusiasms for Web techniques. Less is better! Elegant designs - no techniques. Less is better! Elegant designs - no clutter. clutter.

Ad 1 - Process and Ad 1 - Process and PlanningPlanning

►Two Types of Web SitesTwo Types of Web Sites Entertainment or artistic Entertainment or artistic Informational SitesInformational Sites

►Is design more important than the Is design more important than the written content or sites deliver written content or sites deliver useful information enhanced by useful information enhanced by some design elements?some design elements?

Ad 1 - Process and Ad 1 - Process and PlanningPlanningPlanning QuestionsPlanning Questions

► How will creating a Web site support your purpose?How will creating a Web site support your purpose?► What are two or three important goals for your site?What are two or three important goals for your site?► Who is the primary audience for the Web sites?Who is the primary audience for the Web sites?► What do you want the end user do after visiting your site?What do you want the end user do after visiting your site?► How will you measure the success of your site?How will you measure the success of your site?► How will you adequately maintain the finished site?How will you adequately maintain the finished site?► How many pages will the site contain?How many pages will the site contain?► What special technical or functional requirements are What special technical or functional requirements are

needed?needed?► What is the production schedule for the site? What is the production schedule for the site?

Ad 1 - Process and Ad 1 - Process and Planning Planning

► Avoid "scope creep"Avoid "scope creep" Scope creep is the gradual process by which Scope creep is the gradual process by which unplanned "features" are added.unplanned "features" are added. more content, interactive functionality, changes in site more content, interactive functionality, changes in site

structurestructure no single over commitment is fatal, but the slow, steady no single over commitment is fatal, but the slow, steady

accumulation of additions and changes is often what buries accumulation of additions and changes is often what buries a project under megabytes of muddle and confusion.a project under megabytes of muddle and confusion.

► How do you control it? How do you control it? Make the plan carefully, and then stick to it. Make the plan carefully, and then stick to it. If you discover something later, ask yourself if this would If you discover something later, ask yourself if this would

be good for 1.1 release of your site, for the next release.be good for 1.1 release of your site, for the next release.

Ad 2 - Interface, Site and Ad 2 - Interface, Site and Page Page

►Make your web pages freestandingMake your web pages freestanding►Web pages differ from other documents, Web pages differ from other documents,

such as books, in that they allow users to such as books, in that they allow users to access single pages so it is important to access single pages so it is important to include elaborate information on every include elaborate information on every page. Your identity, copyright page. Your identity, copyright information and links to your homepage information and links to your homepage should be on every page. should be on every page.


Every Web page needs:Every Web page needs:►An informative title (this also becomes An informative title (this also becomes

the bookmark text) the bookmark text) ►The creator's identity The creator's identity ►A creation or revision date on A creation or revision date on

applicable documents applicable documents ►A link to the homepage or site index A link to the homepage or site index

page page


Interface/Page DesignInterface/Page Design

► Would casual user be able to find what they are looking for? Would casual user be able to find what they are looking for? ► Use consistent, easy-to-understand icons and graphic Use consistent, easy-to-understand icons and graphic

elements elements ► Design your pages so that the main content is only one or Design your pages so that the main content is only one or

two clicks away from the main page and on top of each pagetwo clicks away from the main page and on top of each page► Avoid large graphics and multimedia that takes a long time Avoid large graphics and multimedia that takes a long time

to loadto load► Avoid using technologies inappropriately. Scrolling text Avoid using technologies inappropriately. Scrolling text

marquees, Flash, Java applets or JavaScript marquees, Flash, Java applets or JavaScript ► Keep the interface simple, familiar and logical. "Creative" Keep the interface simple, familiar and logical. "Creative"

navigation can frustrate users. Users should feel comfortable navigation can frustrate users. Users should feel comfortable exploring your site. exploring your site.

► Screen resolution aspects, font size, accessibility, height of Screen resolution aspects, font size, accessibility, height of pages – web is not print, it is fluid and ‘unpredictable’ pages – web is not print, it is fluid and ‘unpredictable’

► Check your page in different browsers if possible to make Check your page in different browsers if possible to make sure they work.sure they work.

Ad 2 - Interface, Site and Ad 2 - Interface, Site and PagePage

► Site ElementsSite Elements► Most web sites include a home page, menus and submenus, Most web sites include a home page, menus and submenus,

other links page, site index, what's new page, search other links page, site index, what's new page, search features, and contact information. features, and contact information.

► The top left corner of the page is the most visible area of The top left corner of the page is the most visible area of your web site. Many designers use this area to focus on the your web site. Many designers use this area to focus on the site identity. site identity.

► Live information makes a home page more attractive and Live information makes a home page more attractive and more likely to make users return. What's new information more likely to make users return. What's new information and calendar of events are often good to have on the home and calendar of events are often good to have on the home page. page.

► Splash screens are just annoying. Avoid them.Splash screens are just annoying. Avoid them.► If your web site is also part of a larger site, it is good to If your web site is also part of a larger site, it is good to

consider the design elements of that site. You should keep consider the design elements of that site. You should keep logos, links, and design elements consistent across the entire logos, links, and design elements consistent across the entire site so that the user feels like they are still on the same site. site so that the user feels like they are still on the same site.

► Always provide at least one link to an email address in a Always provide at least one link to an email address in a convenient location for feedback or contact information convenient location for feedback or contact information


Page DesignPage Design

► Without graphics, color and contrast pages are uninteresting and have less Without graphics, color and contrast pages are uninteresting and have less appeal for viewers. By creating columns, using blocks of color and appeal for viewers. By creating columns, using blocks of color and strategically placing graphics, a page becomes more visually appealing and strategically placing graphics, a page becomes more visually appealing and easier to read. easier to read.

► Graphic design is creating a visual hierarchy where more important elements Graphic design is creating a visual hierarchy where more important elements are emphasized and the content is organized logically. Often there is a main are emphasized and the content is organized logically. Often there is a main header, sub heads and contributing graphics. header, sub heads and contributing graphics.

► The most effective designs for most internet users use a balance of text, links The most effective designs for most internet users use a balance of text, links and small graphics and small graphics

► The choice of colors for your web site is important in many ways. Color The choice of colors for your web site is important in many ways. Color Scheme http://wellstyled.com/tools/colorscheme2/index-en.html Readability Scheme http://wellstyled.com/tools/colorscheme2/index-en.html Readability is also an issue. The contrast of the text on the page relative to the is also an issue. The contrast of the text on the page relative to the background color can make the difference in your users easily reading your background color can make the difference in your users easily reading your content. content.

► Use only common fonts that most users have are Arial, Verdana, Helvetica, Use only common fonts that most users have are Arial, Verdana, Helvetica, Times New Roman and Courier. Most designers try to use one of these fonts Times New Roman and Courier. Most designers try to use one of these fonts for the HTML text parts of the page. for the HTML text parts of the page. Bold, blocky fonts are for emphasisBold, blocky fonts are for emphasis


Numerous issues in web display:Numerous issues in web display:► monitor screen resolution monitor screen resolution ► monitor color support monitor color support ► monitor gamma setup monitor gamma setup ► operating systems (Mac, PC, UNIX, Linux) operating systems (Mac, PC, UNIX, Linux) ► browsers (IE, Netscape, Opera, AOL) browsers (IE, Netscape, Opera, AOL) ► font size preferences font size preferences ► print static, web … scrolling, unpredictable.print static, web … scrolling, unpredictable.

There are also more settle differences between Print and Web such as:There are also more settle differences between Print and Web such as:► Margins on the paper are defined, on the web they are not clear and vary Margins on the paper are defined, on the web they are not clear and vary

depending on screen size and resolutions. depending on screen size and resolutions. ► Once can also purposefully make windows smaller than the size of the screen. Once can also purposefully make windows smaller than the size of the screen. ► 2 page layout, so popular in Print, is simply impossible to be reproduced on 2 page layout, so popular in Print, is simply impossible to be reproduced on

web site where everything is more or less about one page web site where everything is more or less about one page ► Only the top of that page is visible, therefore the rest can be only accessed by Only the top of that page is visible, therefore the rest can be only accessed by

scrolling. There is no scrolling on any paper magazine, newspaper, etc. Vital scrolling. There is no scrolling on any paper magazine, newspaper, etc. Vital information must only relay on top of the screen. In print, because eye can information must only relay on top of the screen. In print, because eye can catch entire page or even two pages (left and right), the information can be catch entire page or even two pages (left and right), the information can be ‘spread’ on two pages, top and bottom.‘spread’ on two pages, top and bottom.


Useful Resources on the InternetUseful Resources on the Internet► www.webmonkey.com - HTML, design, usability and www.webmonkey.com - HTML, design, usability and

moremore► www.webstyleguide.com - An overall web design guide www.webstyleguide.com - An overall web design guide ► http://about.extension.org/wiki/http://about.extension.org/wiki/

Recordings_of_eXtension_Professional_Development_SRecordings_of_eXtension_Professional_Development_Sessionsessions

► Color Scheme Color Scheme ► http://wellstyled.com/tools/colorscheme2/index-http://wellstyled.com/tools/colorscheme2/index-

en.html en.html ► Project Seven - spend 60 dollars and have cool web Project Seven - spend 60 dollars and have cool web

sitesite► www.projectseven.com/products/templates/index.htm www.projectseven.com/products/templates/index.htm

Ad 3 - Graphics, Media, Ad 3 - Graphics, Media, AccessibilityAccessibility

GraphicsGraphics►Graphics on the web vs. Print materials. Graphics on the web vs. Print materials.

Concept of dpi. 72 vs. 300.Concept of dpi. 72 vs. 300.► Resizing low resolution picture vs. high Resizing low resolution picture vs. high

resolution picture. resolution picture. ►Graphics size versus bandwidth. Loading Graphics size versus bandwidth. Loading

Time Understanding optimization and Time Understanding optimization and special web graphic types.special web graphic types.

► Two major compression web graphics Two major compression web graphics formats – GIF, JPG (PNG) formats – GIF, JPG (PNG)


GIFGIF► 256 Web Safe colors 256 Web Safe colors ► Support of transparency. Support of transparency. ►GIF gives the ability to animate. Loading GIF gives the ability to animate. Loading

time and looping, taste issues. time and looping, taste issues. ►GIF cannot be stopped! GIF cannot be stopped! ►GIF images good for cartoon like few colors GIF images good for cartoon like few colors

illustrations, not photos from your new illustrations, not photos from your new camera.camera.


JPG JPG ►Any compression is good, most is Any compression is good, most is

undistinguishable in quality and undistinguishable in quality and decreases memory size. decreases memory size.

► JPG does not support transparency, JPG does not support transparency, neither does it allow animation. neither does it allow animation.


MultimediaMultimedia

► What is multimedia? Use it or not and if so how to do it right? What is multimedia? Use it or not and if so how to do it right? ► Bandwidth Problems Bandwidth Problems ► Clear details video requires many Mega Bytes of memory. A second of a video Clear details video requires many Mega Bytes of memory. A second of a video

takes often 1-3 MB! That is 3000K. (1MB = 1000K) takes often 1-3 MB! That is 3000K. (1MB = 1000K)

Strategies for web multimedia:Strategies for web multimedia:

► If you like full screen displays than you should stick to DVDs and VHS tapes, If you like full screen displays than you should stick to DVDs and VHS tapes, Internet is not for you. Internet is not for you.

► Third, the small short display does not have to compete with Star Wars in its Third, the small short display does not have to compete with Star Wars in its level of details and audio quality. You must “optimize” video the same way we level of details and audio quality. You must “optimize” video the same way we optimize JPG or GIF images. optimize JPG or GIF images.

► Finally, you may consider dropping picture all together and use only audio. Finally, you may consider dropping picture all together and use only audio. ► Streaming software. (Quick Time, Real Player, Windows Player and Flash) Streaming software. (Quick Time, Real Player, Windows Player and Flash) ► Connection speed versus video quality, fps, audio, etc. Connection speed versus video quality, fps, audio, etc. ► Worse case scenario - Slide Show. Worse case scenario - Slide Show.


► Prepare video and audio for the internet. Prepare video and audio for the internet. ► It boils down to a need for professional It boils down to a need for professional

software to accomplish the takes of software to accomplish the takes of compressing audio and video for the web – compressing audio and video for the web – example, Sorenson Squeeze - example, Sorenson Squeeze - http://http://sorensonmedia.comsorensonmedia.com//

► Also, Quick Time Pro allows for web Also, Quick Time Pro allows for web preparation. There are probably other softwarepreparation. There are probably other software

►How does YouTube doing it?How does YouTube doing it?


Design and MultimediaDesign and Multimedia► Clear display. No Surprises. Communicate, communicate, and communicate. Warn, warn Clear display. No Surprises. Communicate, communicate, and communicate. Warn, warn

the user!the user!► Prepare for all users. Must code right! Give alternatives to the user - Prepare for all users. Must code right! Give alternatives to the user - http://http://

www.ca.uky.eduwww.ca.uky.edu/sustainability/sustainability

Flash!Flash!► Vector vs. Pixels and bandwidth issues. Vector vs. Pixels and bandwidth issues. ► Streaming capabilities of Flash – another reason Flash became so popular. Streaming capabilities of Flash – another reason Flash became so popular. ► Cleverly design flash streams almost transparently to the user and require no loading Cleverly design flash streams almost transparently to the user and require no loading

time. time. ► Tasteful use of Flash. Tasteful use of Flash. ► Examples of Flash applications:Examples of Flash applications:

http://http://www.ca.uky.edu/agripediawww.ca.uky.edu/agripedia//http://http://www.ca.uky.eduwww.ca.uky.edu/CALE/CALE

Multimedia Plug-In ProblemMultimedia Plug-In Problemss► All technologies need plug-in. All technologies need plug-in. ► Responsibility of the designer to make the first time user getting the plug-in in the most Responsibility of the designer to make the first time user getting the plug-in in the most

elegant, easy and trouble-free way possible.elegant, easy and trouble-free way possible.


► Accessibility - designing with people with disabilities in Accessibility - designing with people with disabilities in mind as well as other devices accessing our pages mind as well as other devices accessing our pages

► Four stagesFour stages denialdenial angeranger bargainingbargaining and acceptance. and acceptance.

► Set Internet Preferences “do not load images”Set Internet Preferences “do not load images”► Think of alternative ways to display anything that you have on Think of alternative ways to display anything that you have on

the web. Text is king! If you can’t for now separate content the web. Text is king! If you can’t for now separate content from design, think of your user equipped with the limited from design, think of your user equipped with the limited technology.technology.

► Sites that use CSS and content-layout separation are already Sites that use CSS and content-layout separation are already very accessible. Examples:very accessible. Examples:

► http://www.ca.uky.edu/horticulture http://www.ca.uky.edu/horticulture ► http://www.ca.uky.edu/sustainability http://www.ca.uky.edu/sustainability

Ad 4 – UK specific Ad 4 – UK specific requirementsrequirements

►UK Official Requirements can be UK Official Requirements can be always found on UK Web Publishers always found on UK Web Publishers web site.web site.

http://www.uky.edu/Home/http://www.uky.edu/Home/WebPublishers/ WebPublishers/

Ad 4 – UK specific Ad 4 – UK specific requirementsrequirements

The essence of requirements The essence of requirements ► Every site and page should make it clear that it is in Every site and page should make it clear that it is in

association with UK - association with UK - www.uky.edu/Home/WebPublishers/mount_inst.html www.uky.edu/Home/WebPublishers/mount_inst.html

► Use of UK logo is strict! It is a TRADE mark and Use of UK logo is strict! It is a TRADE mark and must be used appropriately - must be used appropriately - www.uky.edu/Regs/Graphics/logo-signature.html www.uky.edu/Regs/Graphics/logo-signature.html

► Secondary logos (College, Departments) – College Secondary logos (College, Departments) – College of Agriculture has one linked from Publishers of Agriculture has one linked from Publishers Resources page (linked from Internal page) - Resources page (linked from Internal page) - http://www.ca.uky.edu/agc/sections/pubrel/resourcehttp://www.ca.uky.edu/agc/sections/pubrel/resources/ s/

► College - http://www.ca.uky.edu/agc/test/navbars/ College - http://www.ca.uky.edu/agc/test/navbars/

Ad 4 – New Trends/QuestionsAd 4 – New Trends/Questions

►What is blog? (Examples)What is blog? (Examples)►What is CMS (Content Management What is CMS (Content Management

System)System)►Free Services provided by College Free Services provided by College

(CALE)(CALE)►Questions?Questions?

effective web design shamick gaworski

Documents

site index page slide

site structure

finished site

web page needs

planning web sites

page interfacepage design

web techniques

main page