Tải bản đầy đủ - 0 (trang)
Chapter 9. Design for the Non-Designer

Chapter 9. Design for the Non-Designer

Tải bản đầy đủ - 0trang

iscurrentlypopular;trendsinwebdesignchangeeverycouple

ofyears,anditcanbefunadaptingyourownsite'slookto

currenttrends.Inyourownuniqueway,ofcourse.

Havefunwithsitedesign.Ifyoudo,everythingfallsintoplace.

I'mindebtedtomanywebpagedesigners,too

manytolistinthischapter.Includedwiththe

bookexamplesisasetofwebpageswith

additionallinkstositescontainingtutorials,

articles,andsoonthathaveinspiredmeinthe

past,andwillhopefullyinspireyouinthefuture.



9.1.TheElementsofPageDesign

WhileIwaswritingthisbook,afriendsentmeapagefromthe

siteSmashingMagazinethatlistedseveralscreenshotsof

weblogstheeditorsfelthadexcellentsitedesigns.Unlikeother

"favoriteslists"ofthisnature,thepageactuallyprovidedsome

annotationwiththedesignsexplainingwhythatparticularsite

waspicked.Inaddition,allofthesitesusedthesametypeof

software—webloggingsoftware—sothatthepurposewasheld

consistentandjustthesitedesigndiffered.Thiswasan

exceptionallygoodwaytolearnsomeofthekeyelementsto

goodpagedesign,anditofferedachancetocheckoutsome

newandinterestingdesignideas.

SmashingMagazine's"45ExcellentBlogDesigns"

pagecanbefoundat

http://www.smashingmagazine.com/2007/08/28/45excellent-blog-designs.



InthedesignsatSmashingMagazine,andatothersI'veseen,

therearecertainelementspresentinmostofthedesignsthat



transcendwhateveristhecurrent,populartrend,formingaset

oftimelessclassicsandessentialsthateverysiteshouldhave

andthatweshouldabandononlywithgreatreluctance.These

are:

Clear,immediatelyapparentsitenavigation

Easytofindandreadsitecontent

Anunclutteredlook,regardlessofhowheavilyloadeddown

withitems

Adesignthatfitsthepurposeofthesite

Minimalconfusion:usability,accessibility,validity,and

meaning



9.1.1.ClearNavigation:Missouri'sDepartmentof

Conservation

Onecommonelementtomostpopularwebsitedesignsis

immediateaccesstohigh-levelnavigation.Inthelastchapter,

oneexamplemodifiedalistintoahorizontalmenuandplaced

themenudirectlyacrosstheverytopofthepage.Depending

onthecolorsused,aswellastherestofthesitedesign,sucha

menucanbeimmediatelyapparentwithoutbeingdistracting.In

fact,itcanaddanice,cleanedgetothesitedesign.

Oneofmyfavoritepagedesignsisthepagecreatedbythe

MissouriDepartmentofConservation(DC)thattracksthe

autumncolorsinthestate'sregion(see

http://mdc.mo.gov/nathis/seasons/fall/).Notonlydoesit

providealloftheessentialelementsofpagedesign,suchas

cleartext,anunclutteredlook,andeasilydeterminedpurpose;

italsoprovidesexcellentnavigation—bothatthetopand

bottomofthepage.

InFigure9-1,themenushownalongthetopofthepageis

repeatedinallpagesattheDCsite.Ratherthanmappingto

somehierarchywithinthedepartment,thehigh-levelmenu



splitsthesite'scontentsintogeneral,broadareasofuser,not

organizational,interest.Thisiskeytogoodsitedesign:

matchingtheneedsofthepeopleaccessingthesite,rather

thanmatchinganexistingorganizationalhierarchy.

Figure9-1.ScreenshotoftheMissouriDepartmentof

Conservation'sFallColorspage



Additionally,themenuisveryaccessibleandimmediately

visible,butdoesn'tobstructthesitedesign.Infact,havingthe

darkbandofcoloratthetopcanactuallyaddacleanedgeto

thesite—betterthanhavingtheDCsite'snormallyearth-toned

pagesbrushupagainstthetypicalchromelookofmostweb

browsers.

Alongthebottom,otherlinksaregiven,butthesearemorein

linewithan"ifyoulikedtheabove,youmightlikethe

following"categorythanbeingessentialdepartmentallinks.

Linkstoaneventcalendar,TVshow,weblog,andsooninvite

thepagevisitortokeepexploringthesiteeventhoughyou

foundoutwheretheprettyfallcolordriveis—look,there'sa



wholelotmoretothissitethancolorfulleavesinthefall.

Figure9-2alsoshowsthattheessentialwebsitelinksarealso

includedatthebottomofthepageandeasilyspotted.The

bottomofthepageisalmostalwayswhereyou'llwantsuch

links,becausemostpeoplehavebeen"trained"overtheyears

ofviewingwebsitestolookforcontactinformation,"aboutthis

site"links,andsoonatthebottomofthepage.

Figure9-2.BottomofthepagefortheDCFallColors

page



It'stemptingtogetcreativewithpagelayout,andperhaps

plunksuchbottomlinkselsewhereinthepage(inafloating

SVGbubble,perhaps?).However,youneverwanttobreakwith

webpagetraditionstothepointthatyouconfusepeopleabout

wheretofindessentialwebsiteinformation,suchaswhoto

contactifthere'saproblemwiththepage(likewhentheperson

isusingIEandcan'tseethatlovelySVGbubble).

NoticesomethingelsefromtheMissouriFallColorspage?No



sidebarlinks.Nosidebar,period,butnosidebarlinks.

We'vegottenintothehabitofplunkingone,two,orevenmore

sidebarsintoourpages.Formanypages,though,theyaren't

essential,andcanevendistractfromthepagecontent.Atthe

DCsite,sidebarsaren'tusedforsecondarypages,onlyforthe

top-levelpages,suchastheoneshowninFigure9-3.

Figure9-3.Top-levelpagefortheDCNaturesection



Thesidebarlinksarephrasedasquestions,too,ratherthan

formaltitlesorsubjectnouns.Thisisaneffectiveapproach,

particularlywhenyou'redealingwithpeoplewhoprobablyhave

differinglevelsofexperiencewiththeInternet.

AllthemainpagesattheDCsitehavethesametypeofpage

look,too,againwiththetophigh-levelmenu,bottom"about

thissite"menuitems,andthenewfocusedsidebarquestions.



IfIhaveonecriticismoftheDCsite,it'sthatitdoesn'tprovide

alinkbacktothemainsectionpagefromtheindividualpages,

makingitdifficulttofigureoutwhethertheFallColorspageis

locatedundertheNaturesectionortheEducationsection.

However,thepointalsocouldbethatnothavingthislink

shouldn'tmatter:eachpagecanstandonitsown,andthetop

menucangetyoutowhereyouwanttogo.

ThetextattheDCwebsiteisalsoeasilyfoundandvery

readable,leadingtothenextessentialwebdesignelement:

beingabletoactuallyfind,andread,thesitecontents.



9.1.2.TheReadabilityofaSite:TheCSSZen

Garden

AnotherexcellentplacetolearnaboutwebdesignistheCSS

ZenGarden(http://www.csszengarden.com/).Thebrainchildof

designerDaveShea,ZenGardenwascreatedtoencourage

peopletouseCSStostyletheirwebsites.

ThepremisebehindtheCSSZenGardenwastocreateone

standardwebpagewheretheonlythingthatcanbechangedis

theactualCSStostylethemarkup.Peopleweretheninvitedto

submitdifferentstylesheets,andthevarietyofdesignsatthe

sitedemonstrateshoweffectiveCSSisfordesign.

Thedesignsareincredible,alltheworkoftalentedpeople.I

noticed,however,thattherewasoneprimaryfactorthat

determinedwhetherIlikedthedesignornot:howeasywasit

tofindthesitecontent,andhoweasywasittoread?

Forinstance,oneofthedesigns,Vertigo,byAntonioCella,isan

interestingmixoftransparentimagesandhasaniceuseof

space,butthebackgroundimagesshowthroughthetext,

makingitextremelydifficulttoreadwhatwaswritten,asshown

inFigure9-4.

Figure9-4.CSSZenGardendesignbyAntonioCella



Anotherdesign,RetroTheaterbyEricRogé,madereally

excellentuseoffixedpositioningandthemedesign,notto

mentiongraphics,butthetextwasvirtuallyillegible,asshown

inFigure9-5.

Figure9-5.CSSZenGardendesignbyEricRogé



Comparethiswiththecleanreadingareadefinedinthedesign

ContemporaryNouveau,byDavidHellsing,asshowninFigure

9-6.IpickedthisnotonlybecauseIlikethedesignandthetext

areasarekeptcleanandeasytofindandread,butalsoto

demonstratethatthebackgroundbehindthetextdoesn'thave

tobewhiteandtextareablackinordertobelegible.What

mattersistheamountofcontrastbetweenthetwo.I'llgetinto

readabilityintermsofbackgroundcolorsandtextinmoredetail

alittlelaterinthischapter,inthesectionontypography.

Nomatterhowattractivethedesign,itshouldn'tcomeatthe

expenseofmakingitdifficultforyourwebpagereaderstofind

orreadtheall-importantsitetext.

Figure9-6.CSSZenGardendesignbyDavidHellsing



9.1.3.AnUnclutteredSite:TheGuardian

Unlimited

Oh,givemethedaysbeforewidgets.Returnmetothedays

whenIcouldloadawebpageanditwouldactuallyloadintomy

browserinlessthanaminute.WhenIwouldn'tbehitwithlists

ofpeople'spictures,andweathergadgets,anddancingreal

estateagents;wheremyeyeswouldn'tbeassailedbya

barrageofwhirling,massivecolorsandquintuplerowsof

materialfeaturingvideos,scrollingtext,andotherassorted

demandsformyattention.

Givemethedayswhenwebpageswerecleananduncluttered,

nomatterhowwildthedesignorcrazythecolors.

Therearetwoissueswithtoday'sclutteredwebsites.Thefirst

istheoveruseofwidgets,whichslowsdownpageloading,not

tomentionfreezingupmybrowsersothatIhavetokillitand

tryagain.However,thisisanissueforawebperformance



book,notoneonwebgraphics.Thisleadstothenextissue:we

onlyhaveonesetofeyesandonebrain,andbothcanbein

onlyoneplaceatonetime.

Likemostpeople,IliketothinkI'macapablemultitasker,but

whenIvisitasitethathasfivecolumnsofmaterial,twoor

moreofwhichfeaturesomethingmoving,scrolling,blinking,or

doingtheirbesttocaptureourmousecursorsforsomeplayful

action,myfirstreactionistoseewhetherthesitehasa

syndicationfeedIcansubscribeto,soIneverhavetoactually

visitthesiteagain.

There'snoharminamultiplecolumnlayoutortheuseofvisual

ads.Ihadafriendtellmeoncethatheincludedadsless

becausehewantedtomakemoneyandmoretomakethesite

look"moreprofessional."However,someonesomewhere

decidedthattoday'sgenerationofyoungpeoplehasgrownup

withabarrageofnoise,movement,andsound,andtherefore

aren'tcomfortable,orsupposedlywilling,tospendmoney

unlesshitwithsight,sound,andmovementfromadozenorso

differentspotsatonce.Thisbeliefhasseepedintowebdesign,

anditleadstothemostawfulwebsitesI'veseen.Tooawfulto

listinthebook.Yes,evenmoreawfulthantheunicornswith

purpleandpink.

Youcanhavemultiplecolumns,especiallycontainingexcerpts

thatleadtopageswithfewercolumnsandwidertextareas.You

canalsouseads,evensomeanimatedads.However,thereis

suchathingastoomuchcontentintoosmallanarea.

Noothertypeofwebsiterepresentsthechallengeofcramming

inalotofmaterialwhilestillbeinglegibleandnotpainfulto

accessthanonlinenewssites.Amongthesitesthatratehighly

inthisregardistheNewYorkTimes,withitscleanwhite

background,crisptext,andcarefuluseofimagesandvideo.

Mostimportantly,onlyoneanimatedimageisdisplayedonany

onepageatatime—youaren'thitwithabarrageofanimation

thatwouldmakeitdifficulttofocusonreadingtheactualtext.



Myfavoritesitefromadesignperspective,though,wouldbe

theGuardianUnlimited,showninFigure9-7.Ithaseasy-tospotnavigation,cleartext,littleanimationtodistract,niceuse

ofimagesinonecolumn,adsthataren'toverwhelming—notto

mentionit'squicktoload,withoutanyannoyingpopups.

Whatappliestothenewspapersitesalsoappliestopersonal

sites.Wedon'thavetousethestandardcentered-content,twocolumnlookwithonesidebar.Wecanusemultiplecolumns,as

wellassomewidgetsandimages.

Thekeytomakingthisworkisprovidingsecondarypageswith

fewercolumnsandensuringthatthetextareaiswideenough

tobereadable.Inaddition,useofwhitespacebetweencolumns

isessential,asisminimizingtheuseofwildcolorschemesand

heavyuseofbackgroundimages.



9.1.4.APurposefulSite:ILoveTypography

IfthereisanyruletotheInternet,it'sthattherearenorules.

This"norules"alsoincludesyoursitedesign.Atthesametime,

ifyouconfusetheheckoutofthepoorpeoplewhostopby,

yourfreedomfromruleswillalsocomewithfreedomfrom

visitors.

Figure9-7.GuardianUnlimitedwebsite:unclutteredand

clean



Tài liệu bạn tìm kiếm đã sẵn sàng tải về

Chapter 9. Design for the Non-Designer

Tải bản đầy đủ ngay(0 tr)

×