Thewebhasbecomesointegraltomanypeopleslivesforallages. Designingfordifferentagegroupsisimportantfortworeasons. 1. Whywouldwewanttoignoreaspecificagegroup?Onedaywewillallgetold andwouldntwanttobeignoredwouldwe? 1. Butthereareinstanceswewouldwanttoignoreyoungerusersfromsites withalcoholoradultcontent. 2. Youngeruserscouldbetomorrowsadultusers.Iftheyhaveaterribleexperience, thenthatcouldleavealastingimpression. Lookovertheprinciples Knowingthisshouldwedesignoursitesforallages? Thenreadlastsectionontheblog.

Point1Youllneverbecomethedesigneryoualwaysdreamtofbeingbydoingthe workyouneverwantedtodo.Thisissotrue;tobecomethedesigneryouwantto be,youneedtobedesigningthethingsyourepassionateaboutdesigning. Whichisoftennotwhatwearepaidtodesign?Sowhatdowedo?Designthingson ourfreetimetobuildourportfoliotoshowpotentialemployerswhatwecando.And orhopeyouhaveclassesthatallowyoutochoosethetopicforapresentation, project,website,etc.Perhapsamoviegenrewebsiteandgiveityourall. Point4isareallygoodpointbutnotourfocusrightnow.Itsuggestsnotgivingthe clientdesignstochoosefrom.Itsuggestscreatingonedesignandthenofferingthe clientopportunitiestofinetoo.Thisisdifferentthanthewaymanyfirmswork. Point5suggestshavingaverylimitedcolorpalletthatiscleanandimpactfulrather thanahodgepodgeofnonconsistentcolorsthatdonotaddvaluetotheusers experience. Points6and7dealwithcreativitywhichisnotsomethingthatcanbetrainedhowto do.Creativityisintheeyeofthebeholder.Thebestwayforustolearntobecreative

isfromseeingcreativethingsandgettingideasandtryingnewthings.Ihopeour Good,Bad,andtheUglyhelpuswiththat.WhatMikesuggestsisforustonotonly thinkofwaystobecreativewiththevisualdesignofourwebsite,e.g.,images,colors, etc.butalsolookforinteractiveways.Butthefunctionalityanddesign! Sofarinthecourseandyourpriorexperience,whatyoudothinkisthemost importantthingthatyouhavelearnedsofarwhenitcomestodesign?(NoticeI didntsayweborgraphic).

Ifyouaregoingtocreateawebsitemakesurethatitissomethingthatwillactually helpsolveaproblemfortheuser.Thisthenisessentiallythepurposeofthewebsite. ThenthesolepurposeofthewebsiteistomakesurethattheusercandoX.Thatis whythewebsiteisthereinthefirstplace.Thenknowingthiswecanleverageour entiredesignandfunctionalitybasedonthatpurpose. Thisthenallowsustoconsiderhowthewebsitefunctionsasameansofsolvingthe problemoransweringaquestion,ratherthanjusthavingcoolfunctionalityfor functionalitysake. Readquoteonslide

Thedesignphaseisprobablythemostexcitingphasebecausethisiswhentheweb designer'screativitycomesoutandyoustartbrainstormingthedesignofthesite priortodevelopment.Butbeforeyoucanmoretothatphaseyouneedtomakesure thatyouhaveafirmhandleonthepreviousphases,i.e.,theintended"plan"ofthe siteandthe"analysis"oftheclient'spurpose,goals,users,usertasks,etc.Knowing thisinformationwillallowyoutocontinuewiththedesignanddevelopmentofthe website.Justbecausewearenowdesigning,doesn'tmeanwhatwediscussedinthe planningandanalysisisoutthewindow! Reviewthepoints

So,don'tthrowoutthebabywiththebathwater!Thedatathatyougatheredwith theclientinthoseearlyphasesissocrucial!Don'tthrowitout!Soweneedtodraw fromtheallofinformationgathereduptothispointandfinallystarttodeterminethe lookandfeelofyoursite. Somekeyconsiderationswhendeterminingasitesdesignare (1) Defininghowtoorganizewebpagecontentand (2) Designingusernavigation.

Thereisevenadebategoingontoday.Whichismoreimportant?Thecontent,the design,orthefunctionality?ThiscouldbeaveryengagingdiscussionforCOAP2150, WebDesignPrinciplesI. Ultimatelyitreallyisjustabalancingactbetweencreatingsomethingthatisvisually impressivewebsitewithoutjeopardizingtheusability.Butalsowhatifsomethingis visuallyimpressivebutthecontentispoor?Whatthen? HonestlysubliminallyIhaveputcontentuphereatthetopforareason.Thisiswhat theuserismostlikelylookingfor?Theydontgosearchingforateakettleandbuy onefromthemostimpressivevisuallystunningwebsite?Dothey?Areusersthat superficial? Thinkaboutit.Ifthewebsiteseemstobetootrickytonavigate?Whathappensthen? Theymaythenleavethesitealtogether,whichdefeatsthepurposeofthewebsite.It shouldbeRULE#1.Givetheuserwhattheyneedbeforetheyleave!

Remember,intermsofdesigningweneedtofocusonthecontentofthesiteand makingthatcontentcentraltothedesign.RememberContentIsKing!Togetus thatpoint,wemustdrawuponalloftheinformationgathereduptothispointand determinethelookandfeelofthesite. Oursitescouldhavereallycoolimagesandvideosbutifourcontentisntclearand accessible,thenoursitesfailforourusers. LikeIsaid,thesitescontentisbasedontheresultsofthepreviousphases,e.g.,the purpose&analysis.Itisalsohighlypossiblethatasitedesignanddevelopmentteam mighthavetogobackwardsandrethinkthepreviousphasesbecauseofwhatis foundoutinthedesignphase.

Sometimesasitesdesignactuallyrestrictswhattheuserislookingfor.Agooddesign isclear,concise,anduncluttered.Thevisualsofasiteshouldenhancetheuser experienceanddrawattentiontothecontentandnotdistractthemfromit.Ifyou cannotjustifyusingsomethingthatcreatesamorecompellinganddirectcontent... thendontuseit!Becauseitscoolisnotajustification!RememberwhatImentioned inoursyllabusinthetermprojectsection: Ifthereiseveraquestionaboutwhetheranimage,video,color,etc.meetstheneeds oftheuser,thendiscussitwithyourinstructor.Itmaybedeterminedthattheobject ortagshouldnotbeincluded.Allattributesofawebsiteshouldalwaysbepurposeful andnotdistractingtotheuser. Therefore,thetargetaudienceisoneofthekeyfactorstakenintoconsiderationhere. Asiteaimedatteenagers,forexample,willlookmuchdifferentthanonemeantfor theelderly.Intermsofdesign,thinkofhowtoincorporateelementssuchasthe companylogoorcolorstohelpstrengthentheidentityofthecompanyontheweb site. Whoisouraudience?

10

Bythispointinthecoursemoststudentsarealwayseagertostartbuilding,because weallhavegreatideasaboutthedesign.Itoohavefallenintothatsnareaswellasa designerandtheoutcomehasbeengoodandsometimesbad.Thisiswhy consultationswithaclientandanalyzingourusersissokey. Also,don'tforgetthatalloftheinformationgatheredhereshouldbereviewedinlight oftheinformationgatheredfromthepreviousphases.

11

12

<table> <tr> <td>Title</td> <td>Year</td> <td>Director</td> <td>Writer</td> <td>Actors</td> </tr> <tr> <td>BatmanBegins</td> <td>2005</td> <td>Nolan</td> <td>Nolan</td> <td>Bale</td> </tr> <tr> <td>TheDarkKnight</td>

13

<td>2008</td> <td>Nolan</td> <td>Nolan</td> <td>Bale</td> </tr> <tr> <td>DarkKnightRises</td> <td>2012</td> <td>Nolan</td> <td>Nolan</td> <td>Bale</td> </tr> <tr> <td>UntitledRobinProject</td> <td>2015</td> <td>Nolan</td> <td>Nolan</td> <td>Levitt</td> </tr> </table>

13

Intermsofdiscussingthedevelopmentphase,thinkabouthowtodiscuss leveragingthemedium,i.e.,theinternet,browsers,etc.thatcanbestmeetsthe usersneedsforourmoviegenrefanwebsites.ForourpurposesthiswillbeinHTML andCSS.Somesiteswillrequirecustomimagecreation,Flashinteractivity,or JavaScript.LikeIhavebeensaying,feelfreetogoaboveandbeyondthescopeofthis class.Thekeyistolearnsomethingnewanduseitorapplyittosomethingthat meetsyourneeds Ifyouthinkyoursiteneedsacustomimage,feelfreetotrytocreateone.Thesame goesforaJavaScriptmenu,oraFlashAnimationsplashpage.Ijustwantyoutohave funandlearn!Iknowmanyofyourareattheendofthiscertificateandhavemuch youcanbringtotheclientbasedonyourexperience. Also,itisveryimportanttonotethatintherealworld,workingwithrealclients,they wouldactuallygiveyouthewordingtoincludeforabiopageorthetextimagesto includeforacontactpage.Awebdesigner/developershouldneverbecreating contentforaclientunlesstheyareaskedtodoso(intherealworldthisisrare).The roleofawebdesigneristodesignthecontentforthewebandnotcreatethecontent itselfunlessitisyourownpersonalwebsite.

Whatitmeansisthatifweweretodothingsinthewrongorder"badthings"are oftendoomedtohappen.Ifyoualreadyhavebeenbuildingsomethatisfine.Notto worry.Thisclassisasimulation.Butbesurethatyourememberthesewarningsin thefuturewhenyouareworkinginafirmorhandlingafutureclientsasafreelancer.

Remember,intermsofdesigningweneedtofocusonthecontentofthesiteand makingthatcontentcentraltothedesign.RememberContentIsKing!Togetus thatpoint,wemustdrawuponalloftheinformationgathereduptothispointand determinethelookandfeelofthesite. Oursitescouldhavereallycoolimagesandvideosbutifourcontentisntclearand accessible,thenoursitesfailforourusers. LikeIsaid,thesitescontentisbasedontheresultsofthepreviousphases,e.g.,the purpose&analysis.Itisalsohighlypossiblethatasitedesignanddevelopmentteam mighthavetogobackwardsandrethinkthepreviousphasesbecauseofwhatis foundoutinthedesignphase.

16

Evencolorsshouldaddvalue

17

Demouploadinganimageandgettingacolorpallette

Isthisveryeasytoread?

19

<tablewidth="400"border="4"cellspacing="4"cellpadding="4"> <caption>BatmanProjects</caption> <tr> <td><strong>Title</strong></td> <td><strong>Year</strong></td> <td><strong>Director</strong></td> <td><strong>Writer</strong></td> <td><strong>Actors</strong></td> </tr>

20

21

Howmanystylesdoweseehere? Howmanydeclarationsdoweseehere? Whatisapropertythatweseehere? Whatisavaluethatweseehere?

Whatwouldbesomeothervisualstylethatwecanaddtothistablethatwouldadd valueforourusers?Makeiteasierforthemtoread?

29

style="backgroundcolor:#CCC style="backgroundcolor:#000 style="backgroundcolor:#CCC style=color:#FFF; style="fontsize:24px; style="fontfamily:verdana; style="textalign:center" Havestudentsapplyabackgroundcolortothewholetableaftertheyhavecolored specificrowsandthendiscussprecedencebecausethebackgroundcolorsofthose rowsdonotchangecolor.

30

36

1. Providestudentswiththehtmlfilesforthetableevolvingfromnostructureor designtostructure+inlinedesign. 2. Thentalkthroughtheevolutiontillembedded.

38

39

40

41

42

Demotheembedded. <styletype="text/css"> td{ verticalalign:top; } .grey{ backgroundcolor:#CCC; } #header{ fontweight:bold; color:#FFF; backgroundcolor:#000; textalign:center; } .LeftCol{ fontweight:bold; }

43

</style>

43

44

Filesavedasmain.css Pagelinkintheheader:

<link href=inc/main.css" rel="stylesheet" type="text/css" />

<styletype="text/css"> body{backgroundcolor:____;} p{color:_____;} h1{textalign:______;fontfamily:______;} h2{textalign:______;fontfamily:______;} .float{float:right;marginleft:10px;marginbottom:10px;}

</style> <imgsrc=_______width=___height=____alt=______/> class=float

Createanewfolderonthedesktop.Pasteinthesample.htmlpageandrenameit index.html Democreatingthetemplateindexpagewithnavigationwithinatablerow.Thisthen couldbeusedasatemplateforotherpages.Democreatinganewpageusingthe templateandsavingitinarootfolderonthedesktop. <tablewidth="800"border="5"align="center"cellpadding="20"> <tr><td> <palign="center"> <ahref="index.html">Home</a>| <ahref="about.html">About</a>| <ahref="movies.html">Movies</a>| <ahref="characters.html">Characters</a>| <ahref="contact.html">Contact</a> </p> </td></tr>

50

<tr><td> CONTENT </td></tr> </table>

50

51

AListApartisagreatblogfor"peoplewhomakewebsites."Itexploresthedesign, development,andmeaningofwebcontent,withaspecialfocusonwebstandards andbestpractices.ThisweekspostisalittleCSSheavybutthepointsthatIwant everyonetowalkawaywiththetheoverarchingtheme,i.e.,separatingthecontent fromthevisualdesign.Thisisanimportantthingtothinkaboutasweareallgetting startedworkingonourmoviegenrefanwebsites.

57

58