Gera og ekki gera frábæra vefhönnun

Þegar henni er fylgt eftir mun þessi handbók reynast mjög dýrmætt vefhönnunarúrræði, sérstaklega ef þú ætlar að nota hugbúnaður til að þróa vefsíður í framtíðinni. Frá óreyndum til reynda, þessi handbók hefur eitthvað fyrir alla.

Ferlið frábærrar vefhönnunar Bara til að vera viss um að við séum öll á sömu síðu skulum við byrja á grunnskilgreiningunni fyrir „vefhönnun“. Samkvæmt Wikipedia er vefhönnun:

„ferli við hugmyndagerð, áætlanagerð, líkanagerð og framkvæmd rafrænna miðlunar í gegnum internetið í formi merkjamáls sem hentar til túlkunar með vafra og birtingar sem grafískt notendaviðmót“ .

Ferlið við vefhönnun má líkja við ferlið við að skrifa rannsóknarritgerð. Á hugmynda-/skipulagsstigi eru flæðirit (útlínan) búin til sem sýna leiðsöguskipulag vefsíðunnar þinnar. Á líkanastigi eru fastir vírrammar búnir til (gróft uppkast) sem sýnir beinagrind skipulag fyrir hvern hluta vefsíðunnar þinnar. Eftir að vírrammar eru búnir til er grafík, litir og texti notaður til að búa til hönnun vefsíðunnar þinna út frá útliti vírrammana. Á framkvæmdarstiginu er hönnun þinni breytt í snið sem styður vefvafra, texta og efni er bætt við og að lokum er vefsíðan þín birt í beinni útsendingu á internetinu svo að heimurinn sjái (endanleg drög).

Öll þrjú stig hönnunarferlisins eru jafn mikilvæg. Margir vefhönnuðir sleppa stigi til að spara tíma eða vegna þess að þeir telja það ekki nauðsynlegt. Hins vegar eru öll þrjú stigin nauðsynleg ef markmið þitt er að búa til farsæla hönnun og virðulega vefsíðu. Jafnvel þótt þrepin séu notuð eru mörg mistök sem vefhönnuðir geta gert sem leiða til lélegra, ónotendavænna vefsíðna. Það er kominn tími til að hreinsa út skápinn af slæmum vefhönnunaraðferðum og endurnýja hann með þeim góðu.

Stig 1: Hugmyndagerð og áætlanagerð
Þessu stigi er sleppt oftar en hinum tveimur stigunum. Flestir rithöfundar hafa ekki gaman af því að búa til útlínur fyrir rannsóknargreinar og flestir vefhönnuðir líkar ekki við að búa til flæðirit heldur. Ekki vera latur. Ef þú leggur þig fram og skipuleggur vefsíðuna þína, þá muntu finna að vefhönnunarferlið gengur snurðulaust með færri mistökum á leiðinni.

Það eru nokkrir hlutir sem þú þarft til að skilgreina og skipuleggja vefsíðuna þína á áhrifaríkan hátt:

• heila
• penni og pappír
• (valfrjálst) flæðiritshugbúnaður
• almenn hugmynd um mismunandi hluta vefsíðunnar þinnar

Til að byrja skaltu grípa pennann þinn og blaðið eða ræstu uppáhalds flæðiritshugbúnaðinn þinn. Við notum OmniGraffle Professiona fyrir Mac OS X sem kostar $150 fyrir hvert leyfi en er vel þess virði ef þú býrð til vefsíður reglulega. Ef þú ert á tölvu, þá er SmartDraw frábær ÓKEYPIS flæðiritshugbúnaður sem þú getur notað. Penni og pappír virka bara vel.

Það eru margar aðferðir til að búa til flæðirit. Við ætlum að sýna þér grunnleiðina til að gera það vegna tímans og lengdar þessarar greinar. Ef þú vilt læra meira um flæðirit leitaðu að flæðiritum á Google eða Yahoo.

Skoðaðu flæðiritið sem við bjuggum til þegar við gerðum krómatískar síður. (1) Efst á flæðiritinu listum við nafn vefsíðunnar okkar. (2) Næst tökum við inn hvern aðalhluta vefsíðu okkar: Heimili, Um og Þjónusta. Þessir hlutar eru aðalleiðsögnin fyrir vefsíðuna þína. Hver nöfn hvers hluta verða er algjörlega háð innihaldi vefsíðunnar þinnar. Reyndu að nota eins fáa hluta og mögulegt er svo að gestum þínum verði ekki ofviða þegar þeir vafra um vefsíðuna þína.

(3) Næst skaltu bæta við öllum aukasíðum (undirkafla) sem verða skráðar á hverri aðalsíðu. Fyrir heimili höfum við innifalið faglega vefhönnun, vefþróun og leitarvélabestun. Aukaleiðsögnin þarf að vera meira lýsandi en aðalleiðsögnin. Því dýpra sem siglingastigveldi vefsíðna þinna fer, því meira lýsandi ætti hvert merki að vera.

Dos

• Minna er meira; halda fjölda frumdeilda í lágmarki. Við notum 6 hluta á vefsíðunni okkar sem er meira en nóg
• Hvort sem þú notar penna og pappír eða flæðiritshugbúnað, hafðu hlutina eins hreina og skipulagða og mögulegt er. Þó að þú (og allir sem vinna með þér) sért þeir einu sem notið flæðiritsins, þá þarf það samt að vera skynsamlegt - Aðalhlutar þínir ættu að nota víðtækari hugtök, en auka- og háskólahugtök ættu að vera meira lýsandi

The Donts
Að búa til flæðirit er frekar einfalt; Hins vegar eru nokkrar mistök sem auðvelt er að gera:

• Ekki nota mjög lýsandi hugtök í aðalleiðsögninni þinni nema öll vefsíðan þín einblíni á eitt þröngt efni - Ekki reyna að setja saman mörg efni á sömu síðu. Búðu til almennan hluta fyrir þessi efni og búðu til undirkafla úr þeim hluta. Þetta mun gera undirkafla (lýsandi) vefsíður líklegri til að fá betri stöðu í leitarvélunum (Google, Yahoo, MSN, Ask) Þegar þú hefur búið til hnitmiðað og lýsandi flæðirit ertu tilbúinn að halda áfram á annað stig af vefhönnunarferlinu:

Stig 2: Líkangerð
Á líkanastiginu eru búnar til kyrrstæðir „wireframe“ líkingar. Hver mockup sýnir beinagrind af útliti hverrar vefsíðu sem verður með á vefsíðunni þinni. Þetta stig er mikilvægt vegna þess að það gefur okkur hugmynd um hvar mismunandi þættir verða settir í hönnun okkar. Sumir þessara þátta eru:

• logo
• siglingavalmynd
• efni
• myndir, myndbönd

Til að búa til þessar mockups geturðu notað penna og pappír eða valinn mockup hugbúnað. Áður höfum við notað Photoshop, en undanfarið höfum við notað OmniGraffle Professional. OmniGraffle er ekki eins auðlindafrekt og Photoshop er og það gerir okkur kleift að setja saman wireframe mockups okkar mun hraðar.

Að auki, vertu viss um að þú hafir flæðiritið/flæðiritin sem þú bjóst til í nágrenninu þar sem þú þarft að vísa til þeirra af og til til að ganga úr skugga um að þú sért að hæðast að öllum síðunum sem munu birtast á vefsíðunni þinni.

Hér er dæmi okkar um hvernig wireframe mockup ætti að líta út. Eins og þú sérð eru engir litir eða grafík innifalin. Þetta er nákvæmlega hvernig wireframe mockup ætti að vera - beinagrind skipulag á hönnuninni þinni. Tilgangurinn er að geta haft almenna hugmynd um hvar hver og einn þáttur vefsíðunnar verður staðsettur.

Við byrjum venjulega efst til vinstri og vinnum okkur niður í botn. Það er engin sérstök leið sem vírrammi ætti að líta út. Notaðu ímyndunaraflið. Gakktu úr skugga um að þegar þú býrð til þráðarrammana gleymirðu ekki að innihalda mikilvægustu þætti vefsíðunnar (lógó, leiðsöguvalmynd, staðsetning efnis, staðsetningu mynda/myndbanda).

Ef sumar síðurnar þínar munu nota sama skipulag, þá er ekki nauðsynlegt að hæðast að öllum þessum síðum (þó svo að þú getir það vissulega). Vertu bara viss um að líkja eftir einstöku skipulagi sem vefsíðan þín mun hafa. Þú munt þakka þér seinna.

The Do's

• mockup allar einstakar síður
• innihalda mikilvæga þætti (lógó, flakk, staðsetning efnis, myndum/myndbandsstaðsetningu) -byrjaðu að ofan og vinnðu þig niður -vísaðu til flæðiritsins sem búið var til á stigi 1 til að láta þig ekki gleyma að teikna upp hvaða síður sem er -vista, vista, vista – eins og með allt í tölvunni, vistaðu mockup(s) á 10 mínútna fresti eða svo
• einbeittu þér að hreinu, notendavænu skipulagi - merktu þættina þína svo þú gleymir ekki hvað þeir eru þegar þú vísar til þeirra á stigi 3, framkvæmd - notaðu aðrar vefsíður sem innblástur; það er ekkert athugavert við að taka þætti frá öðrum síðum og gera þá að þínum eigin (sjá „donts“)

The Dont's

• ekki innihalda grafík eða liti (það er fyrir næsta stig) - ekki gera mockups þínar of "uppteknar"; einblína á hreint, vel skipulagt, notendavænt skipulag -ekki sleppa þessu stigi; það er alveg jafn mikilvægt og það fyrsta og það síðasta - ef þú tekur þætti frá öðrum vefsíðum, vertu viss um að þú ritstýrir ekki; það er munur á því að vera innblásinn af annarri vefsíðu til að búa til ákveðna þætti í hönnuninni þinni og að rífa burt uppsetningu þeirra og liti.

Stig 3: Framkvæmd
Á þriðja og síðasta stigi, framkvæmd, er áætlanagerð frá stigum 1 og 2 sameinuð til að aðstoða við að búa til lifandi, gagnvirka vefsíðu.
Þriðja stigið er langmest tímafrekt þar sem þú verður 1) að búa til grafíkina 2) búa til efnið og að lokum 3) breyta vefhönnuninni úr myndum í kóða sem netvafrar nota til að kynna vefsíðuna þína fyrir heiminum.

Þegar þú nærð þriðja stiginu ættir þú að hafa skýra hugmynd um:

• hvernig gestir þínir komast frá einum stað til annars (1. stig, flæðirit) - hvernig vefsíður þínar verða settar upp (2. stig, vírframe mockups)

Ef þú hefur ekki skýra hugmynd um þessa tvo hluti skaltu fara aftur í fyrsta og annað stig og halda áfram að þróa þá. Þú munt komast að því að þriðja stigið er auðveldast þegar þú hefur smíðað skýra, hnitmiðaða baráttuáætlun til að hanna vefsíðuna þína.

Slepptu pennanum og pappírnum
Í þrepi 3 þarftu að nota Photoshop eða annað myndvinnsluforrit þar sem þú munt nota liti og grafík til að búa til skipulag fyrir vefsíðuna þína.

Við byrjum venjulega að búa til „heima“ síðuna (vísitölu) fyrst. Notaðu vírrammana þína sem þú bjóst til á stigi 2 sem sniðmát fyrir hverja síðu sem þú býrð til. Hins vegar, í stað þess að nota solid kassa, notaðu grafík, liti og texta í staðinn. Hver síða verður að líta nákvæmlega út eins og þú vilt að hún líti út á netinu þar sem þetta er lokastig hönnunarferlisins.

Vertu viss um að hafa bakgrunninn fyrir leiðsögn þína (en ekki bæta textanum við myndina þína). Þegar umbreytt er með CSS (cascading style sheets) ætti leiðsögn þín að vera í formi texta en ekki mynda. Ekki er hægt að skríða myndir af leitarvélunum (leitarorðin sem notuð eru í flakkinu þínu verða ekki skráð á niðurstöðusíðum leitarvélarinnar, sem þýðir að færri geta fundið vefsíðuna þína).

Þegar þú ert ánægður með hönnunina þína og finnst að hún sé tilbúin til að vera sett á internetið, þá er kominn tími til að brjóta hönnunina í sundur svo þú getir búið til CSS byggt skipulag. Til að fá frekari upplýsingar um að breyta skipulagi þínu í CSS eða merkja vefsíðuna þína í CSS skaltu fara á w3schools.com. Eftir að hafa leitað í kringum okkur á netinu gátum við ekki fundið almennilega mynd-til-CSS kennsluefni – svo búist við einni frá okkur á næstu vikum. Að breyta hönnuninni þinni í CSS er afar mikilvægt þar sem töfluskipulag heyrir sögunni til.

Hér er dæmi um næstum fullgerða vefsíðu af útlitinu sem við gerðum að athlægi á stigi 2. Þetta var tekið beint úr vafranum okkar og eins og þú sérð er nú lógó, litir, fallegt leiðsögukerfi, fótur, og síðast en ekki síst, hreint, skipulagt skipulag.
Þökk sé skipulagningu á stigum 1 og 2 er skipulag okkar vel skipulagt og auðvelt í notkun.

Dos

• vísa til sniðmátanna sem voru búin til á stigi 2; þó það sé í lagi að víkja frá upprunalegu skipulaginu þínu, ættir þú ekki að þurfa þess
• gerðu nokkrar rannsóknir áður en þú býrð til raunverulega hönnun þína; fáðu hugmyndir frá öðrum síðum og gerðu þær að þínum eigin (án þess að ritstulda)
• innihalda lit og grafík til að búa til endanlegt útlit fyrir vefsíðurnar þínar - notaðu CSS (cascading style sheets) til að umbreyta hönnun þinni úr myndum í merkingu sem er skiljanlegt af vefvöfrum - vísaðu til flæðiritsins frá 1. stigi þegar þú kóðar síðurnar þínar með tengla; það er betra að nota fellivalmynd sem inniheldur alla (eða meirihluta) tengla á vefsíðunni þinni á hverri síðu; þetta mun gera þér kleift að fletta og gera síðurnar þínar auðveldari að skríða þegar köngulær leitarvélarinnar staldra við; frábær staður til að fá CSS fellivalmyndir er á DynamicDrive.com - klára hönnunina þína á meðan þú vinnur í Photoshop eða hvaða myndvinnsluforrit sem þú notar; það getur verið sársaukafullt að gera breytingar á hönnuninni þinni þegar henni hefur verið breytt í álagningu (kóða)

The Donts

• ekki hafa textann með í leiðsöguvalmyndunum þínum þegar þú umbreytir í CSS; í stað þess að nota myndtexta, notaðu venjulegan texta sem er læsilegur fyrir köngulær leitarvéla
• ekki nota töflur þegar þú umbreytir; jafnvel ef þú þarft að kaupa bók um CSS, þá mun það vera þess virði; borð eru dauð
• ekki sleppa fyrstu tveimur stigunum bara til að spara tíma; vefsíðan þín VERÐUR betri ef þú byrjar frá upphafi vefhönnunarferlisins (í stað þess að vera í lokin)
• ekki gleyma að þjappa myndunum þínum þegar þær eru klipptar í sundur fyrir CSS; það er ekkert verra en síða sem hleður hægt upp vegna stórra myndaskráa; Photoshop hefur valmöguleikann „Save Optimized For Web“ (CS3 – „Vista fyrir vef og tæki“)

Ferlið skapar meistarann
Með því að fylgja vefhönnunarferli eins og því sem sýnt er í þessari grein, eykurðu líkurnar á að búa til vefsíðu sem er vel skipulögð, auðveld yfirferð og mjög notendavæn. Við skulum horfast í augu við það - ef gestir týnast eða verða ruglaðir á meðan þeir reyna að vafra um vefsíðuna þína, gætu þeir ýtt á afturhnappinn og leitað að notendavænni vefsíðu. Fólki líkar ekki við að hugsa þegar kemur að því að rata um vefsíður. Ekki láta þá hugsa. Þú hugsar með því að skipuleggja vefsíðuna þína frá 1. stigi til 3. stigs og þú munt komast að því að fleira fólk mun njóta þess að heimsækja vefsíðuna þína.