Wesite Design nd Projet Plnning Ojetive This module provides n overview of the onepts of wesite design nd liner workflow for produing wesite. Prtiipnts will outline the sope of wesite projet, inluding sujet tegories nd ontent for we pges, nd design site rhiteture pln. Why Crete Projet Pln? Produing wesite tht onveys ler messge requires thoughtful preplnning nd onsious ttention to the detils of the site. A projet pln provides frmework for the retion of the wesite. It should fous on the needs of the site visitors nd, if refully plnned, n e used s n outline tht will keep your projet from growing out of ontrol. 1. Defining the Sope of your Site 1 Creting sope sttement tht generlly defines your we site is the first step in defining your projet. Defining the sope entils oth outlining the generl purpose of the site nd defining the udiene. A. Stting the generl purpose of the wesite will help strt the retive proess. i. Wesite Ctegory i Wesite Purpose The wesite theme is rief sttement intended to get you thinking in the generl llprk. Exmples follow. Professionl/Informtionl http://demi.evergreen.edu/urriulr/nhomsky/home.htm (exmple: My wesite will support the urriulum of my progrm nd provide students with onvenient ess to lss mterils nd resoures. Community-sed or Edutionl http://www.idelist.org/ (exmple: The theme of the Deshutes Wtershed we site is to edute residents out wtershed news nd enourge ommunity memers to get involved in proteting wter qulity.) Personl http://www.100portfolios.om/dt/still2/hl.html (exmple: The theme of my wesite is to post pitures from my trip to Frne.) 1 Referene: Johnson, S. 2001. Creting Good Wesites. http://www.lefdigitl.om/lss/. Dy1_wedesign.do Pge 1 We Design Lst Revised: g 08/04/03
Wesite Design nd Projet Plnning B. Define the trget udiene 2 The design of your we site should tke into ount the needs, skills, nd interests of ll users who visit the site. KNOW YOUR AUDIENCE Osionl users rely on ler struture, overviews, visul ues, nd grphis tht help them rememer where they re in your site. Regulr visitors wnt quik ess to informtion, fst-loding text menus, detiled nd orgnized nvigtion, nd site indexes. i. Knowledge Level How muh knowledge do you expet your udiene to hve? i iv. Visittion Frequeny How often do you expet people to visit your site? Geogrphi/Culturl Considertions Is your udiene lol, regionl, ntionl, or interntionl? Aessiility Lnguge: olloquil or multi-lingul trnsltions Interntionl dtes Wht rowser, monitor size, ndwidth do the mjority of your users hve ess to? Does your udiene hve visul impirments? v. Wht is the personlity of your udiene? 2 Referene: Johnson, S. 2001. Creting Good Wesites. http://www.lefdigitl.om/lss/ Dy1_wedesign.do Pge 2 We Design Lst Revised: g 08/04/03
Wesite Design nd Projet Plnning 2. Content Outline When outlining the ontent of your wesite put yourself in the ple of typil visitor nd sk yourself wht informtion would I wnt? wht would e the most logil wy to ess tht informtion? how might I esily get onfused or frustrted nd give up? A. Wesite s Tootsie Pop How mny liks does it tke to get to the enter of tootsie pop? It s hrd to sy, ut we n determine how mny liks it will tke user to get to the ore informtion they re looking for in your we site. i. Py ttention to how mny lyers (or liks) deep you keep importnt informtion. Think out reting shortuts to frequently used informtion so tht folks who like to runh n get to the enter from the front pge. Dy1_wedesign.do Pge 3 We Design Lst Revised: g 08/04/03
Wesite Design nd Projet Plnning B. Crete Content Ctegories to orgnize the different types of informtion you will offer on the wesite into individul we pges. For exmple, let s sy tht the theme of your wesite is to provide support for your progrm s urriulum nd provide students with onvenient ess to lss mterils nd resoures. It will lso serve s n dditionl mens of peer-to-peer ommunition nd fulty-to-student ommunition. i. One tegory might e for lss lendr i Another tegory might provide the syllus for the progrm. Another tegory might e for the reding list. C. The supporting ontent provides greter detil for eh of the ontent tegories. i. Continuing with the exmple from ove, the supporting ontent for eh tegory might e s follows. For the lss lendr you might post listing of dtes, times, nd lotions for lsses, seminrs, nd field trips. For the syllus tegory the supporting ontent might e n outline of the qurter s lesson plns with links to leture notes or supporting mteril. For the reding list tegory the supporting mteril would e list of the ooks needed for the lss. Write for the we We udienes sn, they don t red. () () () Orgnize ontent into smll, stnd-lone groupings (http://www.erkeley.edu) Keep lnguge simple, ler, nd onise Use ullets nd numered lists Keep ontent relevnt to the pge tegory. Consider your udiene Dy1_wedesign.do Pge 4 We Design Lst Revised: g 08/04/03
Wesite Design nd Projet Plnning 3. Pge Lyout nd Themti Considertions A. Site Arhiteture i. The site rhiteture is hierrhil digrm depiting ll the link reltionships etween the we pges of your we site. Hierrhil Levels - When designing the rhiteture it my e helpful to orgnize your pges into tiers or levels. Home pge () () () Designed to give synopsis of the ontents of the entire wesite nd to entie visitors to delve deeper into the site. The home pge provides onvenient wy to nvigte the rest of the site. The most effetive home pges re ompt nd orgnized in their lyout, offering regulrly hnging links to fresh ontent. Seondry pges () () () Design n e different thn the home pge s long s it retins enough in ommon to e reognizle s prt of the sme wesite. Typilly foused on one sujet. Inorportes key informtion to help visitors esily identify the ext pge lotion in the wesite. This n e s simple s title on the top of the pge, or highlighting the nvigtion link of the visited pge. Mintin onsistent nvigtion on every pge to void onfusing your visitors. B. Pge Lyout i. Different Types of Nvigtion Links Grphi Links HTML Links (http://www.rown.edu/wemster/lerning_units.html) Nvigtion Br Lyout Possiilities Vertil: http://www.wellesley.edu/, Horizontl: http://www.whitmn.edu/ Dy1_wedesign.do Pge 5 We Design Lst Revised: g 08/04/03
Wesite Design nd Projet Plnning d IS YOUR SITE EASY TO USE? Chek out these links to lern more out site funtionlity. http://hotwired.lyos.om/wemonkey/ http://www.useit.om/ Drop-down or Flyout: http://www.rleton.edu/ () () Used when omplex nd long list of links re needed. These re tehnilly more hllenging to onstrut nd require reful plnning to orgnize informtion in logil tegories. Redundnt Nvigtion: Mny sites tody use oth text-sed nd grphis sed nvigtion http://www.uddyprojet.org/tool/design/3lyout.sp C. Grphi Design The est wy to deide on wht you wnt in site design is to disover wht you do nd don t like in other sites. When you find site tht you like, refer to it for inspirtion. i. Color i Typestyles Type rules re different for the we thn they re for print. d Serif (typilly used for lrge titles, usully presented s grphi) Times New Romn is n exmple of Serif Font () (http://www.rown.edu/ Sn-serif (typilly used for smller hedings nd pge text.) Using fonts s grphis Using HTML fonts (limittions) Tehnil onsidertions Cross Browser nd Operting System Comptiility On every pge inlude () () () (d) informtive title, uthor or institution nme (inluding ontt informtion), retion or revision dte, Inlude the "home pge" URL or link on mjor menu pges (This is often logo imge) Dy1_wedesign.do Pge 6 We Design Lst Revised: g 08/04/03
Wesite Design nd Projet Plnning Exerise : SITE ARCHITECTURE AND DESIGN Brek into smll groups, nd do the following. 1 Design the rhiteture of your site nd orgnize the pges hierrhilly. Sketh site rhiteture mp. Indite ll the pges of the we site nd how they re linked to one nother. Indite nmes of links nd.htm pge titles. 2 Design the wesite s look nd feel Sketh 2 pge design prototypes inluding nvigtion pperne for the home pge nd seondry pges of your wesite. Indite olor, imges, nd type styles. Indite the lyout of the nvigtion. (Horizontl nd/or Vertil, text-sed nd/or grphil, flyouts or no flyouts, grphi-sed or text-sed.) Indite link pperne (suh s rollovers, underlined links, link olor, et.). Try vertil nd horizontl nvigtion. Experiment with text plement. Indite olor shemes Desrie grphis Dy1_wedesign.do Pge 7 We Design Lst Revised: g 08/04/03