Mida teha ja mida teha suurepärast veebidisaini

Kui järgite, osutub see juhend üsna väärtuslikuks veebidisaini ressursiks, eriti kui kavatsete seda kasutada veebisaitide arendustarkvara tulevikus. Sellest juhendist leiab igaühele midagi, alates kogenematust kuni kogenuteni.

Suurepärase veebidisaini protsess Veendumaks, et oleme kõik samal lehel, alustame veebidisaini põhidefinitsiooniga. Wikipedia järgi on veebidisain:

"Interneti kaudu elektroonilise meedia edastamise kontseptualiseerimise, planeerimise, modelleerimise ja teostamise protsess märgistuskeele vormis, mis sobib tõlgendamiseks veebibrauseri abil ja kuvamiseks graafilise kasutajaliidesena" .

Veebidisaini protsessi võib võrrelda uurimistöö kirjutamise protsessiga. Kontseptualiseerimise/planeerimise etapis luuakse vooskeemid (konspekt), mis illustreerivad teie veebisaidi navigeerimisstruktuuri. Modelleerimisetapis luuakse staatilised traatraamid (umbes mustand), mis illustreerivad teie veebisaidi iga jaotise skeleti paigutust. Pärast traatraamide loomist kasutatakse teie veebilehtede kujunduse loomiseks traatraamide paigutuse alusel graafikat, värve ja teksti. Teostusetapis teisendatakse teie kujundus veebibrauserite toetatavasse vormingusse, lisatakse tekst ja sisu ning lõpuks avaldatakse teie veebisait Internetis reaalajas, et maailm seda saaks näha (lõplik mustand).

Kõik kolm projekteerimisprotsessi etappi on võrdselt olulised. Paljud veebidisainerid jätavad mõne etapi vahele, et säästa aega või kuna nad ei pea seda vajalikuks. Kõik kolm etappi on aga vajalikud, kui teie eesmärk on luua edukas disain ja austusväärne veebisait. Isegi kui kasutatakse kolme etappi, võivad veebidisainerid teha palju vigu, mille tulemuseks on halva kvaliteediga ja mittekasutajasõbralikud veebisaidid. On aeg puhastada kapp halbadest veebidisaini tavadest ja täiendada seda heade tavadega.

1. etapp: kontseptualiseerimine ja planeerimine
See etapp jäetakse vahele sagedamini kui kaks ülejäänud etappi. Enamikule kirjutajatest ei meeldi teadustööde kontuuride koostamine ja enamikule veebidisaineritele ei meeldi ka vooskeemide loomine. Ära ole laisk. Kui näete vaeva ja planeerite oma veebisaiti, siis leiate, et veebidisaini protsess kulgeb sujuvalt ja vähem vigu.

Veebisaidi tõhusaks kontseptualiseerimiseks ja planeerimiseks on vaja mõnda asja.

• aju
• pliiats ja paber
• (valikuline) vooskeemi tarkvara
• üldine ettekujutus teie veebisaidi erinevatest jaotistest

Alustamiseks haarake pliiats ja paber või käivitage oma lemmikvooskeemi tarkvara. Kasutame Mac OS X jaoks mõeldud OmniGraffle Professionat, mis maksab 150 dollarit litsentsi kohta, kuid on seda väärt, kui loote regulaarselt veebisaite. Kui kasutate arvutit, on SmartDraw suurepärane TASUTA vooskeemi tarkvara, mida saate kasutada. Pliiats ja paber töötavad aga hästi.

Vooskeemide loomiseks on palju meetodeid. Aja ja selle artikli pikkuse huvides näitame teile kõige lihtsamat viisi, kuidas seda teha. Kui soovite vooskeemide kohta lisateavet, otsige vooskeemi Google'ist või Yahoost.

Vaadake kromaatiliste saitide kontseptualiseerimisel loodud vooskeemi. (1) Vooskeemi ülaosas loetleme oma veebisaidi nime. (2) Järgmiseks lisame oma veebisaidi kõik peamised jaotised: Avaleht, Teave ja Teenused. Need jaotised on teie veebisaidi peamine navigeerimisseade. Iga jaotise nimed sõltuvad täielikult teie veebisaidi sisust. Proovige kasutada nii vähe jaotisi kui võimalik, et külastajad teie veebisaidil navigeerimisel ülekoormatud ei jääks.

(3) Järgmisena lisage kõik sekundaarsed lehed (alajaotised), mis on loetletud igal esmasel lehel. Kodu jaoks oleme kaasanud professionaalse veebidisaini, veebiarenduse ja otsingumootori optimeerimise. Teisene navigeerimine peab olema kirjeldavam kui esmane navigeerimine. Mida sügavamale teie veebisaitide navigeerimishierarhia läheb, seda kirjeldavam peaks iga silt olema.

Dos

• Vähem on rohkem; hoidke esmaste sektsioonide arv minimaalsena. Kasutame oma veebisaidil 6 jaotist, mis on enam kui piisav
• Olenemata sellest, kas kasutate pliiatsit ja paberit või vooskeemi tarkvara, hoidke asjad võimalikult puhtad ja organiseeritud. Kuigi teie (ja kõik, kes teiega koos töötavad) kasutate vooskeemi ainsad, peab see siiski olema mõistlik – teie esmased jaotised peaksid kasutama laiemaid termineid, samas kui teisesed ja kolmanda taseme terminid peaksid olema kirjeldavamad.

Donts
Vooskeemi loomine on üsna lihtne; Siiski on mõned vead, mida saab kergesti teha:

• Ärge kasutage oma peamises navigeerimises väga kirjeldavaid termineid, välja arvatud juhul, kui kogu teie veebisait keskendub ühele kitsale teemale – ärge proovige mitut teemat ühele lehele koondada. Looge nende teemade jaoks üldine jaotis ja looge sellest jaotisest alajaotised. See muudab alajaotise (kirjeldavate) veebilehtede parema asetuse otsingumootorites (Google, Yahoo, MSN, Ask). Kui olete koostanud lühikese ja kirjeldava vooskeemi, olete valmis liikuma teise etappi veebidisaini protsessist:

2. etapp: modelleerimine
Modelleerimisetapis luuakse staatilised "traatraami" maketid. Iga makett illustreerib iga teie veebisaidile lisatava veebilehe paigutuse paljast luustikku. See etapp on oluline, sest annab aimu, kuhu meie disainis erinevad elemendid paigutatakse. Mõned neist elementidest on järgmised:

• logo
• navigatsioonimenüü
• sisu
• pildid, videod

Nende makettide loomiseks võite kasutada pliiatsit ja paberit või eelistatud maketitarkvara. Varem oleme kasutanud Photoshopi, kuid viimasel ajal kasutame OmniGraffle Professionali. OmniGraffle ei ole nii ressursimahukas kui Photoshop ja see võimaldab meil traatraami makette palju kiiremini kokku panna.

Lisaks veenduge, et teil oleks läheduses loodud vooskeemi(d), kuna peate neile aeg-ajalt viitama, et veenduda, et mõnitate kõiki teie veebisaidil ilmuvaid lehti.

Siin on meie näide selle kohta, kuidas traatraami makett peaks välja nägema. Nagu näete, pole kaasas värve ega graafikat. Täpselt selline peaks olema traatraami makett – teie disaini skeleti paigutus. Eesmärk on saada üldine ettekujutus selle kohta, kuhu iga veebilehe element paigutatakse.

Tavaliselt alustame vasakust ülaosast ja liigume allapoole. Puudub kindel viis, kuidas traatraam välja peaks nägema. Kasuta oma kujutlusvõimet. Kuid veenduge, et raamide loomisel ärge unustage lisada veebisaidi kõige olulisemaid elemente (logo, navigeerimismenüü, sisu paigutus, pildid/video paigutus).

Kui mõned teie leheküljed kasutavad sama kujundust, pole vaja kõiki neid lehti üles mõnitada (kuigi kindlasti saate). Lihtsalt tehke kindlasti makett mis tahes ainulaadsest paigutusest, mis teie veebisaidil on. Sa tänad ennast hiljem.

Tegemised

• makett kõik unikaalsed lehed
• lisage olulised elemendid (logo, navigeerimine, sisu paigutus, pildid/video paigutus) - alustage ülalt ja liikuge allapoole - viidake oma 1. etapis loodud vooskeemile, et te ei unustaks ühtegi lehekülge maketeerimast - salvestage, salvestage, salvesta – nagu iga arvuti puhul, salvesta oma makett(id) iga 10 minuti järel
• keskenduge puhastele, kasutajasõbralikele paigutustele - märgistage oma elemendid, et te ei unustaks, mis need on, kui viitate neile 3. etapis, täitmisel - kasutage inspiratsioonina teisi veebisaite; pole midagi halba, kui võtate elemente teistelt saitidelt ja tehke need enda omaks (vt "ei ole")

Dont's

• ärge lisage graafikat ega värve (see on järgmise etapi jaoks) - ärge muutke oma makette liiga hõivatuks; keskenduge puhastele, hästi organiseeritud ja kasutajasõbralikele paigutustele – ärge jätke seda etappi vahele; see on sama oluline kui esimene ja viimane - kui võtate elemente teistelt veebisaitidelt, veenduge, et te ei plagieeri; on vahe, kas saada inspiratsiooni mõnelt teiselt veebisaidilt oma kujunduse teatud elementide loomiseks ja nende paigutuse ja värvide ilmselgelt ära rebimisel

3. etapp: teostamine
Kolmandas ja viimases etapis ühendatakse 1. ja 2. etapi planeerimine, et aidata luua elavat interaktiivset veebisaiti.
Kolmas etapp on kõige aeganõudvam, kuna teil on 1) graafika loomine 2) sisu loomine ja lõpuks 3) veebikujunduse teisendamine piltidest koodiks, mida veebibrauserid kasutavad teie veebisaidi tutvustamiseks maailmale.

Kolmandasse etappi jõudes peaks teil olema selge ettekujutus:

• kuidas teie külastajad ühest kohast teise jõuavad (1. etapp, vooskeemid) – kuidas teie veebilehti paigutatakse (2. etapp, traatraami maketid)

Kui teil pole nendest kahest asjast selget ettekujutust, minge tagasi esimese ja teise etapi juurde ning jätkake nende arendamist. Avastate, et kolmas etapp on kõige lihtsam, kui olete oma veebisaidi kujundamiseks koostanud selge ja kokkuvõtliku lahinguplaani.

Eemaldage pliiats ja paber
3. etapis peate kasutama Photoshopi või mõnda muud pilditöötlusprogrammi, kuna kasutate oma veebisaidi paigutuse loomiseks värve ja graafikat.

Tavaliselt alustame kõigepealt kodulehe (indeksi) loomist. Kasutage 2. etapis loodud traatraame iga loodava lehe mallina. Tahkete kastide asemel kasutage aga graafikat, värve ja teksti. Iga leht peab Internetis välja nägema täpselt selline, nagu soovite, kuna see on kujundamisprotsessi viimane etapp.

Lisage kindlasti navigeerimise taust (kuid ärge tegelikult lisage oma pildile teksti). Kui teisendate CSS-i (kaskaadlaadilehtede) abil, peaks teie navigeerimine toimuma teksti, mitte piltide kujul. Otsingumootorid ei saa pilte roomata (teie navigeerimisel kasutatud märksõnu ei indekseerita otsingumootori tulemuste lehtedel, mis tähendab, et vähem inimesi leiab teie veebisaiti).

Kui olete oma kujundusega rahul ja tunnete, et need on valmis Internetti panemiseks, on aeg kujundused osadeks lõigata, et saaksite luua CSS-põhise paigutuse. Lisateabe saamiseks oma paigutuste CSS-i teisendamise või veebisaidi CSS-is märkimise kohta külastage veebisaiti w3schools.com. Pärast Internetis ringi vaatamist ei leidnud me korralikku pilt-CSS-i õpetust – seega oodake seda meilt lähinädalatel. Disainide teisendamine CSS-i on äärmiselt oluline, kuna tabelipaigutused on minevik.

Siin on näide peaaegu valminud veebisaidist paigutusest, mida me 2. etapis pilkasime. See võeti otse meie veebibrauserist ja nagu näete, on seal nüüd logo, värvid, ilus navigeerimissüsteem, jalus, ja mis kõige tähtsam, puhas ja organiseeritud paigutus.
Tänu 1. ja 2. etapi planeerimisele on meie paigutus hästi organiseeritud ja hõlpsasti kasutatav.

Dos

• viidake oma mallidele, mis loodi 2. etapis; kuigi algsest paigutusest kõrvale kalduda on hea, ei peaks te seda tegema
• enne tegeliku kujunduse loomist uurige pisut; hankige ideid teistelt saitidelt ja tehke need enda omaks (ilma plagiaadita)
• kaasake oma veebilehtedele lõpliku välimuse loomiseks värve ja graafikat - kasutage CSS-i (kaskaadlaadilehti), et teisendada oma kujundused piltidest veebibrauseritele arusaadavaks märgistuseks - viitage 1. etapi vooskeemile, kui kodeerite oma lehti hüperlinkidega; parem on kasutada rippmenüüd, mis sisaldab kõiki (või enamikku) teie veebisaidi linke igal lehel; see hõlbustab navigeerimist ja muudab teie lehtedel hõlpsamini roomatavaks, kui otsingumootori ämblikud neile peatuvad; suurepärane koht CSS-i rippmenüüde hankimiseks on saidil DynamicDrive.com - viimistlege oma kujundus Photoshopis või mis tahes kasutatavas pilditöötlustarkvaras töötades; kujunduses muudatuste tegemine võib olla valus, kui see on teisendatud märgistuseks (koodiks)

Donts

• ärge lisage CSS-i teisendamisel teksti oma navigeerimismenüüdesse; pilditeksti asemel kasutage tavalist teksti, mis on otsingumootori ämblike poolt loetav
• ära kasuta teisendamisel tabeleid; isegi kui peate ostma CSS-i raamatu, on see seda väärt; lauad on surnud
• ärge jätke kahte esimest etappi lihtsalt aja säästmiseks vahele; teie veebisait ON parem, kui alustate veebidisaini protsessi algusest (mitte lõpust)
• ärge unustage pilte tihendada, kui need CSS-i jaoks lahti lõigatakse; pole midagi hullemat kui aeglane laadimine veebisait suurte pildifailide tõttu; Photoshopil on suvand „Salvesta veebi jaoks optimeeritud” (CS3 – „Salvesta veebi ja seadmete jaoks”)

Protsess teeb täiuslikuks
Järgides sellist veebidisaini protsessi, nagu selles artiklis illustreeritud, suurendate võimalust luua hästi organiseeritud, hõlpsasti navigeeritav ja väga kasutajasõbralik veebisait. Olgem ausad – kui külastajad eksivad või satuvad teie veebisaidil surfamise ajal segadusse, võivad nad vajutada tagasinuppu ja otsida kasutajasõbralikumat veebisaiti. Inimestele ei meeldi veebisaitidel orienteerumise osas mõelda. Ära sunni neid mõtlema. Kavandate oma veebisaidi 1. etapist 3. etappi ja avastate, et teie veebisaidi külastamine naudib rohkem inimesi.