Web Design PrinciplesWeb Design Principles

Joan NaturaleJoan Naturale

NTID Reference LibrarianNTID Reference Librarian

Web Design PrinciplesWeb Design Principles

Set design for home page at 640 x 460 pixel Set design for home page at 640 x 460 pixel rectangular area (standard browser window rectangular area (standard browser window size). Think about designing all important size). Think about designing all important elements within this rectangular space area. elements within this rectangular space area. The page is wider than it is tall which is different The page is wider than it is tall which is different from a book page design.from a book page design.

Keep design simple, clear and cleanKeep design simple, clear and clean Make good use of graphic elements to break up Make good use of graphic elements to break up

large text areaslarge text areas

Web Design PrinciplesWeb Design Principles

Put credits, dates and unimportant details at Put credits, dates and unimportant details at the bottom of your pagethe bottom of your page

No scrolling sideways or down to get to the No scrolling sideways or down to get to the navigation areanavigation area

You want folks to visit your site. Put links on a You want folks to visit your site. Put links on a separate page or at the bottom of your pageseparate page or at the bottom of your page

Avoid cluttering up the page with too much text Avoid cluttering up the page with too much text or too many graphics or too many graphics

Align all elements properlyAlign all elements properly

Web Design PrinciplesWeb Design Principles

If there are a lot of graphics, create an If there are a lot of graphics, create an alternative text only pagealternative text only page

Every page looks like it belongs there with the Every page looks like it belongs there with the use of repetitive elementsuse of repetitive elements

Avoid the use of a “splash” page. Visitors do Avoid the use of a “splash” page. Visitors do not want to waste timenot want to waste time

Page should look good on most browsers. Page should look good on most browsers. Preview pages using different browsersPreview pages using different browsers

Web Design PrinciplesWeb Design Principles Include contact info, especially an e.mail Include contact info, especially an e.mail

address. You may also include your address. You may also include your institution’s address, phone and/or fax institution’s address, phone and/or fax number(s) and/or a feedback formnumber(s) and/or a feedback form

If there is a lot of content, break it up into If there is a lot of content, break it up into separate pages. You can also use headings separate pages. You can also use headings and anchorsand anchors

Do not use more than 2 or 3 graphics on a Do not use more than 2 or 3 graphics on a pagepage

Do not insert too many horizontal rules or bars Do not insert too many horizontal rules or bars across your pageacross your page

Web Page ExamplesWeb Page Examples

http://http://trfntrfn..clpghclpgh.org/About/bad/badexample4.html .org/About/bad/badexample4.html http://http://trfntrfn..clpghclpgh.org/About/.org/About/trfnfaqtrfnfaq..shtml shtml

http://www.http://www.ocfocf..berkeleyberkeley..eduedu/~/~chenjchenj//bruceleebrucelee//bruceleebrucelee.html.html

Focal Point On Web PagesFocal Point On Web Pages

You need something that draws your eye in and pulls You need something that draws your eye in and pulls you to the pageyou to the page

Focal point is usually a logo or image and it’s the Focal point is usually a logo or image and it’s the dominating design. Helps to create a hierarchy of dominating design. Helps to create a hierarchy of informationinformation

Logo text size is usually the biggest so make other text Logo text size is usually the biggest so make other text headings smaller in size. If it’s an image, reduce all headings smaller in size. If it’s an image, reduce all other images in size.other images in size.

Do not use large navigation buttons as the only source Do not use large navigation buttons as the only source of interestof interest

Create contrast in logo design by using different type Create contrast in logo design by using different type (bold, size, style, color)(bold, size, style, color)

Navigation DesignNavigation Design

Buttons and bars are easy to understand Buttons and bars are easy to understand and use. The visitor knows what page and use. The visitor knows what page they are visiting and where they are goingthey are visiting and where they are going

Consistent navigation design on all pagesConsistent navigation design on all pages Avoid navigation images where you have Avoid navigation images where you have

to roll your mouse over it to read the linksto roll your mouse over it to read the links If your site is large, consider a site or If your site is large, consider a site or

index mapindex map

Navigation Web Page ExamplesNavigation Web Page Examples

http://www.http://www.sarahmclachlansarahmclachlan.com/index2.html.com/index2.htmlhttp://www.http://www.potlatchpaperpotlatchpaper.com/.com/http://www.http://www.michaeldouglasmichaeldouglas.com/html/html/.com/html/html/

michaelmichael__douglasdouglas.html.html

Frames DesignFrames Design

Avoid using frames until you become more Avoid using frames until you become more skilled at web designskilled at web design

If you use them, keep them unobtrusive. Don’t If you use them, keep them unobtrusive. Don’t use bordersuse borders

Do not use multiple frames or multiple scrolling Do not use multiple frames or multiple scrolling barsbars

Do not use complicated framesDo not use complicated frames Avoid frames that make you scroll sidewaysAvoid frames that make you scroll sideways

Frames DesignFrames Design

Frames are used as navigational aidsFrames are used as navigational aids Use tables instead of framesUse tables instead of frames Can use frames for thumbnail images-Can use frames for thumbnail images-

portfoliosportfolios

Frame Web Page ExamplesFrame Web Page Examples

http://www.http://www.signenhancerssignenhancers.com/.com/http://www.http://www.

joelnakamurajoelnakamura.com/.com/http://http://wallywally..ritrit..eduedu//javawallyjavawally//

Background DesignBackground Design Use a background color that contrasts with the text Use a background color that contrasts with the text

and graphicsand graphics Use browser safe colorsUse browser safe colors Do not use busy, distracting, or weird backgrounds. Do not use busy, distracting, or weird backgrounds.

Backgrounds are supposed to enhance your text and Backgrounds are supposed to enhance your text and graphics. Backgrounds are unobtrusive and are not graphics. Backgrounds are unobtrusive and are not focal pointsfocal points

Do not use the default gray colorDo not use the default gray color Avoid black backgrounds. Black backgrounds are Avoid black backgrounds. Black backgrounds are

suitable for remembrance sites or for skilled web suitable for remembrance sites or for skilled web designersdesigners

Background Web Page ExamplesBackground Web Page Examples

http://www.users.http://www.users.nacnac.net/.net/falkenfalken/annoying/backgrounds.html/annoying/backgrounds.html

http://www.users.http://www.users.nacnac.net/.net/falkenfalken/annoying/static_/annoying/static_bgbg..htmhtmhttp://members.tripod.com/~http://members.tripod.com/~jamwiredjamwired/bwd2./bwd2.htmhtm

Text Design PrinciplesText Design Principles

Text size should not be smaller than 10 point. Do not Text size should not be smaller than 10 point. Do not ITALICIZEITALICIZE small text small text

Text size should not be bigger than 14 point. It’s hard Text size should not be bigger than 14 point. It’s hard to read whole phrases at a time and it looks to read whole phrases at a time and it looks unsophisticatedunsophisticated

Use text color that contrasts with the backgroundUse text color that contrasts with the background Do not write text across the screen. Break up your Do not write text across the screen. Break up your

text into columns. No more than 8-10 wordstext into columns. No more than 8-10 words Sans-serif text is easier to read on the screen but Sans-serif text is easier to read on the screen but

serif text is easier to read in print. Arial and Verdana serif text is easier to read in print. Arial and Verdana are good sans serif fontsare good sans serif fonts

Text Design PrinciplesText Design Principles

Avoid using a different color for each letterAvoid using a different color for each letter Limit text colors to 2 or 3.Limit text colors to 2 or 3. Do not use more than 2 type font stylesDo not use more than 2 type font styles Align text on the left, not right. It’s hard to Align text on the left, not right. It’s hard to

read right aligned textread right aligned text Avoid centered text as each line starts in a Avoid centered text as each line starts in a

different place and makes it hard to readdifferent place and makes it hard to read

Text Design PrinciplesText Design Principles Avoid text crowding against the left edge of the Avoid text crowding against the left edge of the

pagepage If you need to change text design, change the If you need to change text design, change the

type font, not size. type font, not size. Avoid all CAPS, Avoid all CAPS, BOLD BOLD or or ITALIC ITALIC text. Use text. Use

these to emphasize words. Don’t’ use these in these to emphasize words. Don’t’ use these in paragraphsparagraphs

Do not underline text if it’s not a linkDo not underline text if it’s not a link Use the spell-checker for spelling errorsUse the spell-checker for spelling errors

Text Web Page ExamplesText Web Page Examples

http://http://trfntrfn..clpghclpgh.org/About/bad/badexample2.html.org/About/bad/badexample2.htmlhttp://www.http://www.infovillageinfovillage.com/.com/PatronSaintsPatronSaints//McLuhanMcLuhan.html.html

Links DesignLinks Design Underline links unless the links are an Underline links unless the links are an

obvious contrasting colorobvious contrasting color Avoid “click here” links. Links should be Avoid “click here” links. Links should be

clear where they will take the visitorclear where they will take the visitor Avoid links that distract readers and Avoid links that distract readers and

take them to useless pagestake them to useless pages Check links frequentlyCheck links frequently

Links DesignLinks Design

Links should coordinate with the text Links should coordinate with the text and background color. and background color.

Avoid the blue default colorAvoid the blue default color Use not use form buttons as linksUse not use form buttons as links

Links Web Page ExamplesLinks Web Page Examples

http://www.users.http://www.users.nacnac.net/.net/falkenfalken/annoying/links.html/annoying/links.htmlhttp://http://wallywally..ritrit..eduedu/instruction/tree.html/instruction/tree.html

Table Design PrinciplesTable Design Principles

Graphics, text and links can be put in Graphics, text and links can be put in tables for a neater effecttables for a neater effect

If you have many links, consider using a If you have many links, consider using a tabletable

Tables can be used as sidebarsTables can be used as sidebars Tables are better than frames especially Tables are better than frames especially

if you are a beginning web designerif you are a beginning web designer Put different colors in cells for bordersPut different colors in cells for borders

Table and Column Web Page Table and Column Web Page ExamplesExamples

http://http://wallywally..ritrit..eduedu/information/information.html/information/information.htmlhttp://http://wallywally..ritrit..eduedu//deptsdepts/ref/instruction/tutorial/engines.html/ref/instruction/tutorial/engines.html

Alignment Design PrinciplesAlignment Design Principles

All items should be aligned with each other, All items should be aligned with each other, especially headlines and textespecially headlines and text

Choose one alignment and stick with it (all left, Choose one alignment and stick with it (all left, all right, centered). Do not mix alignmentsall right, centered). Do not mix alignments

Left or right alignment looks more sophisticatedLeft or right alignment looks more sophisticated Links inside buttons or tables should be on Links inside buttons or tables should be on

same baseline for a neater and more same baseline for a neater and more organized appearanceorganized appearance

Spacing and Proximity PrinciplesSpacing and Proximity Principles

Cluster related items together. Grouped items are Cluster related items together. Grouped items are easier to readeasier to read

Headlines or subheads should be close to the text it Headlines or subheads should be close to the text it belongs with. Keep spacing consistent between belongs with. Keep spacing consistent between elements. Use bold or different font style for headingselements. Use bold or different font style for headings

Paragraphs. Use either a space between them or Paragraphs. Use either a space between them or indents. Do not use bothindents. Do not use both

Good use of spacing creates a unified, organized Good use of spacing creates a unified, organized layout with clear relationships between elementslayout with clear relationships between elements

Keep columns short. Do not force readers to scroll up Keep columns short. Do not force readers to scroll up and down to the next column. and down to the next column.

Repetition Design PrinciplesRepetition Design Principles

Repeat elements that tie all of your web Repeat elements that tie all of your web pages to unify your sitepages to unify your site

Use consistent navigation, buttons, Use consistent navigation, buttons, colors, text, layout, format and colors, text, layout, format and typography throughout your pagestypography throughout your pages

Use colors from sidebar and logo for Use colors from sidebar and logo for headings or important wordsheadings or important words

Web Page ExamplesWeb Page Examples

httphttp://://wwwwww..puebloharvestpuebloharvest..comcom//http://www.http://www.sarahlovettsarahlovett.com/.com/

Graphic Design PrinciplesGraphic Design Principles Buttons are small and used for links, not Buttons are small and used for links, not

decorationdecoration Have ALT tags for blind and text based Have ALT tags for blind and text based

browser usersbrowser users Keep graphic size small and use Keep graphic size small and use

height/width pixel tags for faster height/width pixel tags for faster downloadingdownloading

Graphics relate to your pages. Don’t use Graphics relate to your pages. Don’t use meaningless graphicsmeaningless graphics

Graphic Design PrinciplesGraphic Design Principles

If you use graphics as links, create text If you use graphics as links, create text linkslinks

Avoid using boxes around graphicsAvoid using boxes around graphics Consider using thumbnail images and a Consider using thumbnail images and a

Javascript link to view the whole imageJavascript link to view the whole image Save JPEG (photo images) to lowest Save JPEG (photo images) to lowest

quality/highest compressionquality/highest compression

Graphics Design PrinciplesGraphics Design Principles

Right or left aligned graphics are not Right or left aligned graphics are not wider than 400 pixelswider than 400 pixels

Avoid use of FlashAvoid use of Flash Avoid “missing” graphicsAvoid “missing” graphics Avoid using graphics as text. Takes up Avoid using graphics as text. Takes up

space and search engines can’t search space and search engines can’t search graphics for textgraphics for text

Graphic Web Page ExamplesGraphic Web Page Examples

http://http://trfntrfn..clpghclpgh.org/About/bad/badexample6.html.org/About/bad/badexample6.htmlhttp://http://trfntrfn..clpghclpgh.org/About/bad/goodexample6.html.org/About/bad/goodexample6.html

Flash Web ExampleFlash Web Example

http://www.users.http://www.users.nacnac.net/.net/falkenfalken/annoying/flash./annoying/flash.htmhtm

Junk On Web PagesJunk On Web Pages

Spinning logosSpinning logos 3D logo graphics3D logo graphics Blinking text or imagesBlinking text or images Rainbow, animated or blinking rulesRainbow, animated or blinking rules Scrolling textScrolling text

Junk on Web PagesJunk on Web Pages

E.mail animationE.mail animation Running animation that never stopsRunning animation that never stops ““Under Construction” signsUnder Construction” signs CountersCounters Advertising (separate page)Advertising (separate page) Awards (separate page)Awards (separate page)

Junk On Web PagesJunk On Web Pages

Cute pictures like smiley facesCute pictures like smiley faces GuestbooksGuestbooks Pop - Up window adsPop - Up window ads Plug-Ins. If you web page requires plug-ins, create Plug-Ins. If you web page requires plug-ins, create

alternative pages for those who don’t have the plug-alternative pages for those who don’t have the plug-ins and don’t want to download themins and don’t want to download them

Specifying browser, pixel width, font size and type Specifying browser, pixel width, font size and type default in order to view pagesdefault in order to view pages

Animated GIFs Web Page ExampleAnimated GIFs Web Page Example

http://www.users.http://www.users.nacnac.net/.net/falkenfalken/annoying//annoying/aniani_gif.html_gif.html

Bars Web Page ExampleBars Web Page Example

http://www.users.http://www.users.nacnac.net/.net/falkenfalken/annoying/bars.html/annoying/bars.html

Java Web Page ExamplesJava Web Page Examples

Fade In Fade In http://www.users.http://www.users.nacnac.net/.net/falkenfalken

/annoying/java/fade.html/annoying/java/fade.html

Java CubeJava Cubehttp://www.http://www.montcopamontcopa.org/.org/dada/cube./cube.htmhtm

Counter Web ExampleCounter Web Example

http://www.users.http://www.users.nacnac.net/.net/falkenfalken/annoying/counters./annoying/counters.htmhtm

Browser Specifications ExampleBrowser Specifications Example

http://www.users.http://www.users.nacnac.net/.net/falkenfalken/annoying//annoying/browspecbrowspec..htmhtm

Bad Web Pages ExamplesBad Web Pages Examples

http://www.http://www.artcenterartcenter.edu/.edu/

http://http://trfntrfn..clpghclpgh.org/About/bad/.org/About/bad/badquizbadquiz.html.html

Good Web Pages ExamplesGood Web Pages Examples

http://http://wallywally..ritrit..eduedu//http://www.http://www.ritrit..eduedu/~624www//~624www/fipsefipse//http://http://ntidwebntidweb..ritrit..eduedu//

Educational Resources Educational Resources Examples of Web CoursesExamples of Web Courses

Ideas in EnglishIdeas in English Making a DifferenceMaking a Difference NetS@vvy Career Exploration NetS@vvy Career Exploration

TutorialTutorial Information Literacy Tutorial-VirgilInformation Literacy Tutorial-Virgil Search Engines Practice ModuleSearch Engines Practice Module

Deaf ResourcesDeaf Resources

Deaf Subject Page at RIT LibraryDeaf Subject Page at RIT Library

Deaf Internet ResourcesDeaf Internet Resources

Education Subject PageEducation Subject Page

Education Internet ResourcesEducation Internet Resources