You are on page 1of 52

Thewebhasbecomesointegraltomanypeopleslivesforallages. Designingfordifferentagegroupsisimportantfortworeasons. 1. Whywouldwewanttoignoreaspecificagegroup?Onedaywewillallgetoldand wouldntwanttobeignoredwouldwe? 1. Butthereareinstanceswewouldwanttoignoreyoungerusersfromsiteswith alcoholoradultcontent. 2. Youngeruserscouldbetomorrowsadultusers.Iftheyhaveaterribleexperience,then thatcouldleavealastingimpression. Lookovertheprinciples Knowingthisshouldwedesignoursitesforallages? Thenreadlastsectionontheblog.

Point1Youllneverbecomethedesigneryoualwaysdreamtofbeingbydoingthework youneverwantedtodo.Thisissotrue;tobecomethedesigneryouwanttobe,youneed tobedesigningthethingsyourepassionateaboutdesigning. Whichisoftennotwhatwearepaidtodesign?Sowhatdowedo?Designthingsonour freetimetobuildourportfoliotoshowpotentialemployerswhatwecando.Andorhope youhaveclassesthatallowyoutochoosethetopicforapresentation,project,website, etc.Perhapsamoviegenrewebsiteandgiveityourall. Point4isareallygoodpointbutnotourfocusrightnow.Itsuggestsnotgivingtheclient designstochoosefrom.Itsuggestscreatingonedesignandthenofferingtheclient opportunitiestofinetoo.Thisisdifferentthanthewaymanyfirmswork. Point5suggestshavingaverylimitedcolorpalletthatiscleanandimpactfulratherthana hodgepodgeofnonconsistentcolorsthatdonotaddvaluetotheusersexperience. Points6and7dealwithcreativitywhichisnotsomethingthatcanbetrainedhowtodo. Creativityisintheeyeofthebeholder.Thebestwayforustolearntobecreativeisfrom seeingcreativethingsandgettingideasandtryingnewthings.IhopeourGood,Bad,and theUglyhelpuswiththat.WhatMikesuggestsisforustonotonlythinkofwaystobe

creativewiththevisualdesignofourwebsite,e.g.,images,colors,etc.butalsolookfor interactiveways.Butthefunctionalityanddesign! Sofarinthecourseandyourpriorexperience,whatyoudothinkisthemostimportant thingthatyouhavelearnedsofarwhenitcomestodesign?(NoticeIdidntsaywebor graphic).

Ifyouaregoingtocreateawebsitemakesurethatitissomethingthatwillactuallyhelp solveaproblemfortheuser.Thisthenisessentiallythepurposeofthewebsite.Thenthe solepurposeofthewebsiteistomakesurethattheusercandoX.Thatiswhythewebsite isthereinthefirstplace.Thenknowingthiswecanleverageourentiredesignand functionalitybasedonthatpurpose. Thisthenallowsustoconsiderhowthewebsitefunctionsasameansofsolvingthe problemoransweringaquestion,ratherthanjusthavingcoolfunctionalityfor functionalitysake. Readquoteonslide

Thedesignphaseisprobablythemostexcitingphasebecausethisiswhentheweb designer'screativitycomesoutandyoustartbrainstormingthedesignofthesitepriorto development.Butbeforeyoucanmoretothatphaseyouneedtomakesurethatyouhave afirmhandleonthepreviousphases,i.e.,theintended"plan"ofthesiteandthe"analysis" oftheclient'spurpose,goals,users,usertasks,etc.Knowingthisinformationwillallowyou tocontinuewiththedesignanddevelopmentofthewebsite.Justbecausewearenow designing,doesn'tmeanwhatwediscussedintheplanningandanalysisisoutthewindow! Reviewthepoints

So,don'tthrowoutthebabywiththebathwater!Thedatathatyougatheredwiththe clientinthoseearlyphasesissocrucial!Don'tthrowitout!Soweneedtodrawfromthe allofinformationgathereduptothispointandfinallystarttodeterminethelookandfeel ofyoursite. Somekeyconsiderationswhendeterminingasitesdesignare (1) Defininghowtoorganizewebpagecontentand (2) Designingusernavigation.

Remember,intermsofdesigningweneedtofocusonthecontentofthesiteandmaking thatcontentcentraltothedesign.RememberContentIsKing!Togetusthatpoint,we mustdrawuponalloftheinformationgathereduptothispointanddeterminethelook andfeelofthesite. Oursitescouldhavereallycoolimagesandvideosbutifourcontentisntclearand accessible,thenoursitesfailforourusers. LikeIsaid,thesitescontentisbasedontheresultsofthepreviousphases,e.g.,the purpose&analysis.Itisalsohighlypossiblethatasitedesignanddevelopmentteammight havetogobackwardsandrethinkthepreviousphasesbecauseofwhatisfoundoutinthe designphase.

10

Sometimesasitesdesignactuallyrestrictswhattheuserislookingfor.Agooddesignis clear,concise,anduncluttered.Thevisualsofasiteshouldenhancetheuserexperience anddrawattentiontothecontentandnotdistractthemfromit.Ifyoucannotjustifyusing somethingthatcreatesamorecompellinganddirectcontent...thendontuseit!Because itscoolisnotajustification!RememberwhatImentionedinoursyllabusintheterm projectsection: Ifthereiseveraquestionaboutwhetheranimage,video,color,etc.meetstheneedsof theuser,thendiscussitwithyourinstructor.Itmaybedeterminedthattheobjectortag shouldnotbeincluded.Allattributesofawebsiteshouldalwaysbepurposefulandnot distractingtotheuser. Therefore,thetargetaudienceisoneofthekeyfactorstakenintoconsiderationhere.A siteaimedatteenagers,forexample,willlookmuchdifferentthanonemeantforthe elderly.Intermsofdesign,thinkofhowtoincorporateelementssuchasthecompanylogo orcolorstohelpstrengthentheidentityofthecompanyonthewebsite. Whoisouraudience?

11

Bythispointinthecoursemoststudentsarealwayseagertostartbuilding,becauseweall havegreatideasaboutthedesign.Itoohavefallenintothatsnareaswellasadesignerand theoutcomehasbeengoodandsometimesbad.Thisiswhyconsultationswithaclientand analyzingourusersissokey. Also,don'tforgetthatalloftheinformationgatheredhereshouldbereviewedinlightof theinformationgatheredfromthepreviousphases.

12

Intermsofdiscussingthedevelopmentphase,thinkabouthowtodiscussleveragingthe medium,i.e.,theinternet,browsers,etc.thatcanbestmeetstheusersneedsforour moviegenrefanwebsites.ForourpurposesthiswillbeinHTMLandCSS.Somesiteswill requirecustomimagecreation,Flashinteractivity,orJavaScript.LikeIhavebeensaying, feelfreetogoaboveandbeyondthescopeofthisclass.Thekeyistolearnsomethingnew anduseitorapplyittosomethingthatmeetsyourneeds Ifyouthinkyoursiteneedsacustomimage,feelfreetotrytocreateone.Thesamegoes foraJavaScriptmenu,oraFlashAnimationsplashpage.Ijustwantyoutohavefunand learn!Iknowmanyofyourareattheendofthiscertificateandhavemuchyoucanbringto theclientbasedonyourexperience. Also,itisveryimportanttonotethatintherealworld,workingwithrealclients,they wouldactuallygiveyouthewordingtoincludeforabiopageorthetextimagestoinclude foracontactpage.Awebdesigner/developershouldneverbecreatingcontentforaclient unlesstheyareaskedtodoso(intherealworldthisisrare).Theroleofawebdesigneris todesignthecontentforthewebandnotcreatethecontentitselfunlessitisyourown personalwebsite.

Whatitmeansisthatifweweretodothingsinthewrongorder"badthings"areoften doomedtohappen.Ifyoualreadyhavebeenbuildingsomethatisfine.Nottoworry.This classisasimulation.Butbesurethatyourememberthesewarningsinthefuturewhenyou areworkinginafirmorhandlingafutureclientsasafreelancer.

Demouploadinganimageandgettingacolorpallette

16

<bodystyle="backgroundcolor:#CCCCCC">

<h1style="textalign:center;color:#FF0000;fontfamily:courier;">??????????</h1>

<pstyle="fontfamily:verdana;">??????????</p>

<h2style="textalign:right;color:#0000FF">????????</h2>

<pstyle="fontfamily:verdana;">????????</p>

<h2style="textalign:right;color:#0000FF">?????</h2>

<pstyle="fontfamily:verdana;">??????????</p>

</body>

21

26

<styletype="text/css">

body{backgroundcolor:#CCCCCC;}

h1{textalign:center; color:#FF0000; fontfamily:courier;}

h2{textalign:right; color:#0000FF;}

p{fontfamily:verdana;}

</style>

29

Filesavedasmain.css Pagelinkintheheader:

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

32

1. Providestudentswiththehtmlfilesforthetableevolvingfromnostructureordesign tostructure+inlinedesign. 2. Thentalkthroughtheevolution.

33

34

35

36

1. Democreatingtheclassselectorsselectorsinembeddedcssasatwopartprocess.

37

38

<style type="text/css"> td { vertical-align:top; } #header { font-weight: bold; color: #FFF; background-color: #000; text-align:center; } .grey { background-color: #CCC; }

39

.leftCol { font-weight: bold; } </style>

39

Createanewfolderonthedesktop.Pasteinthesample.htmlpageandrenameit index.html Democreatingthetemplateindexpagewithnavigationwithinatablerow.Thisthencould beusedasatemplateforotherpages.Democreatinganewpageusingthetemplateand savingitinarootfolderonthedesktop. <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>

41

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

41

42

AListApartisagreatblogfor"peoplewhomakewebsites."Itexploresthedesign, development,andmeaningofwebcontent,withaspecialfocusonwebstandardsandbest practices.ThisweekspostisalittleCSSheavybutthepointsthatIwanteveryonetowalk awaywiththetheoverarchingtheme,i.e.,separatingthecontentfromthevisualdesign. Thisisanimportantthingtothinkaboutasweareallgettingstartedworkingonourmovie genrefanwebsites.

47