Web Design Principles Joan Naturale NTID Reference Librarian.
Post on 21-Dec-2015
219 Views
Preview:
Transcript
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
top related