• et

Plaanid oma kodulehte? Õppetunnid kodulehe kujundamisest PiNA näitel

Kodulehe puhul ei ole küsimus vaid selles, mis info leidub lehel, vaid ka see, kas ja kuidas külastaja selle infoni jõuab.

Veebileht, et kaasas käia ajaga ja tegevusvaldkonna arengutega

Mõni aeg tagasi aitas PBA agentuur PiNA organisatsioonil üles ehitada oma uut kodulehte. Esiteks oli nende vana leht tehniliselt ajale jalgu jäänud. Teiseks oli organisatsiooni tegevusvaldkond aastatega laienenud, mistõttu vajas kogu kodulehe struktuur ümberkorraldamist. Lihtsustamaks lehe edasist haldamist, valiti aluseks sobiv WordPressi template, mida siis PBA meeskond nende vajadustele vastavaks aitas kohendada, visuaalne identiteet oli PiNAl juba olemas. Tulemuseks oli täiesti omanäoline, tehniliselt ja sisuliselt PiNA vajadustele vastav ja lihtsalt arendatav kaasaegne koduleht, mis on organisatsioonile tema töös oluliseks töövahendiks.

Jagades PiNA kodulehe ülesehitamise kogemusi, tooksime järgnevalt välja mõningad tähelepanekud, mida arvesse võtta enda kodulehekülge või muud ettevõtte infomaterjali kujundades.

Tahtsime, et uus veebileht teeks neile, kes meie tegevustest kasu saavad olulise info kättesaamise lihtsaks; panustada kolmanda sektori ja selle tähtsuse nähtavuse tõusmisele; viimaks soovisime julgustada aktiivset osalust meie uudistes ja tegevustes. Tänan PBA meeskonda aja ja pingutuse eest, et need eesmärgid saaksid teoks. Oleme väga rahul tööga, mida tegite ja tulemusega, mille saime.

– Kaja Cunk, PiNA

 

Mõne sõnaga PiNAst

Sloveenias tegutseva MTÜ PiNA eesmärgiks on tõsta oma tegevustega ühiskonna teadlikkust keskkonna, hariduse, kultuuri, multimeedia ning inimõiguste ja poliitika valdkondadest, korraldades ja vahendades üritusi ja projekte ning edastades teemakohaseid uudiseid. Lisaks rendivad nad välja oma tehnikat ja ruume, pakuvad koolitusteenuseid ning annavad välja trüki- ja videomaterjale.

PiNA uue kodulehe eesmärgiks oli mitte üksnes esindada oma mitmekülgseid tegemisi võimalikult hoomataval kujul, vaid näidata oma kodulehega eeskuju ka teistele sarnastele asutustele, tõstmaks seeläbi kogu tegevusvaldkonna kvaliteeti ja tõhusust. Tutvu meie postitusega, mis aitab sul oma turunduskanalite eesmärkide seadmises.

Külastajate suunamine kujunduse ja struktuuriga.

Kui kohalikud teavad isegi, millise kurvi tagant sisse keerates jõuab kohaliku vaatamisväärsuseni, siis uutele külastajatele on vaja viitasid, mis neid sinna suunaks. Kasulik on oma koduleht aegajalt üle vaadata esmakülastaja pilgu läbi. Kuhu ja kui palju viitasid sel juhul oleks mõistlik üles panna?

Vaata üle oma koduleht (või muu ettevõtte infomaterjal)

web1

  • Mida suunab see külastajaid tegema?
  • Millist infot ettevõttest annab selle esmamulje ja struktuur?
  • Kui palju tuleb vaatajal endil vajaliku info leidmiseks ringi tuhnida?
  • Kas veebileht on ettevõtte visuaalse identiteediga kooskõlas?

Kui lehekülje funktsioon on viia külastaja teatud tegude või informatsioonini, peab lehe struktuur ja kujundus selleni jõudmist märkamatult suunama.

Alates fontide valikust, piltide suurustest menüüriba paigutusteni, mõjutavad kujundusvalikud lehe külastust. Väga suur tähtsus on siinkohal avalehel. Avalehe kujundus peab olema paeluv ja piisavalt selge, sest see loob esmamulje kogu ettevõtte kuvandist.

Vaata üle, kas sinu avalehelt on koheselt välja loetav:

  1. Tegevusvaldkond – Millega ettevõtte tegeleb?
  2. Sihtgrupp – Kellele on lehekülg suunatud?
  3. Eesmärk – Mida leht külastajale pakub?
  4. Struktuur – Kust, millist infot on võimalik leheküljelt leida?
  5. Kontakt – Kuidas ettevõttega ühendust saab?

web2

PiNA lehe puhul annavad tegevusvaldkonnast aimu esmalt bännerid, mis tutvustavad nii pildis kui tekstis organisatsiooni kolme põhilist tegevusvaldkonda. Sihtgrupi indikaatoriks on lisaks sisulistele viidetele ka kujunduselemendid. Välja sai valitud pildid, mis illustreeriks noorte kaasamist. Samuti lisab värskendav oranž toon ja minimalistlik struktuur lehele noortepärasust. Noorte kõrval on PiNA lehe sihtrühmaks ka teised partnerid, ametiasutused ning toetusfondid, kellega koostööd tehakse. Seetõttu pidi leht jätma lisaks nooruslikkusele ka autoriteetse mulje. Selleks sai oranži kõrvale valitud ka metalne halltoon, mis lehele tõsidust lisab.

Lehe peamiseks eesmärgiks on kaasata külastajaid organisatsiooni tegemistesse. Seega oli oluline esilehel välja tuua viimased uudised ja lähenevate ürituste kava. Visuaalselt on esile tõstetud ka uudiskirjaga liitumine ning „Cooperate“ menüünupp. Ka sotsiaalmeedia lingid on esilehel kahekordselt esindatud. Selleks et organisatsiooni muude materjalide, meeskonna, pressikajastuste ja tehtud projektidega täpsemalt tutvuda, tuleb siseneda juba konkreetsele alamlehele.

Kasutajasõbralikkus

Kasutajasõbralik kujundus on loogiline ja ootuspärane, kus on olemas kõik vajalik ja eemaldatud kõik üleliigne.

Pina lehe menüüde kujunduse osas on lähtutud harjumuspärasest asetusest:

  • kontaktandmed ja sotsiaalmeedia viidad on olemas päises ja jaluses;
  • päises logol klikkimine viib tagasi avalehele;
  • põhiline sisukaart on esitatud ka jaluses;
  • peamenüü säilitab oma asukoha kõikidel alamlehtedel;
  • alamlehtede külgmenüüdes on otseviidad sama kategooria lehekülgedele;
  • sama kategooria alalehed on ülesehituselt ja kujunduselt ühtlustatud (vt nt projektid, kalendri üritused, meeskonnaliikmete tutvustused).

Järgides hea tava reegleid, peaks kogu info olema külastajale kättesaadav kuni kolme klikiga.

Et vajaliku infoni jõudmine toimuks kiirelt ja peavaluta, on sisu optimeerimine ja kategoriseerimine ning selle järgi menüü struktuuri koostamine suureks abiks. Selleks, et kõik vajalik õiges kohast kättesaadav oleks, on mõistlik koostada sisukaart, mille puhul tasuks lisaks menüü struktuurile läbi mõelda ka alamlehtede kohustuslikud elemendid ja külgmenüüde sisu, lihtsustamaks külastajate navigeerimist.

Näide PiNA lehe esialgsest sisukaardist:

PiNA veebilehe sisukaart

PiNA veebilehe sisukaart

Ehitada leht nullist või kasutada olemasolevat kujundusmalli?

Kui on läbi mõeldud lehekülje vajalikud funktsioonid, olemas kujunduse visioon ja paika pandud detailne sisukaart tuleks otsustada, kas programmeerida lehekülg nullist või võtta aluseks olemasolev template ehk kujundusmall. Mõlemal variandil on omad plussid ja miinused. PiNA lehe puhul otsustati kasutada malli. WordPress valiti tema haldamise lihtsuse pärast, et edasise sisuhaldusega saaksid vabalt hakkama organisatsiooni liikmed ise, kaasamata selleks programmeerijat. Malli kasuks otsustades tasuks kindlasti julgelt aega varuda, sest valikud on suured. Samuti on kasuks, kui oled leidnud mõne veebilehe, mis sulle ülesehituselt väga meeldib – see on heaks aluseks ja sisendiks nii kujundajale kui programmeerijale.

Õige malli leidmine ja struktuuri paikapanek on suur töövõit!

Kui on leitud enda vajadustele sobiv template, on lehe üles sättimine ja oma seadistuste rakendamine hõlbus. Kahjuks PiNA lehe puhul kõik siiski nii kerge ei olnud. Näiline sarnasus template ja kavandatud lehe kujunduse vahel ei tähenda alati, et oma seadistuste rakendamine ilma ümberprogrammeerimiseta iga template puhul võimalik oleks. Nii tuli ka meil mitmed näiliselt lihtsad muudatused suure kodeerimise kaarega paika loksutada. Kui WordPressi ja muude tasuta platvormide eelis on, et igaüks saab justkui hakkama, siis siinkohal ongi oluline kaasata professionaalse programmeerija abi, kes takistused ületab.

Et templatele ülesehitatud leht vastaks ettevõtte kuvandile, tuleks kõik lehe seadistused hoolega üle vaadata ja enda järgi kohandada ning vajadusel internetis ringi surfata, et leida sobivaid lisapluginaid. PiNA lehe puhul oli väga olulise tähtsusega ürituste kava esitamine. Lisakriteeriumiks kalendri juures oli erinevate sündmus-kategooriate eristamine, et tuleks selgemini välja PiNA enda organiseeritud üritused, nende ruumides korraldatavad üritused ja kanditeerimiste tähtajad. Selleks tuli leida sobiv kalendriplugin. Lihtsustamaks pildialbumite ühildamist facebooki albumitega, tuli ka projektide lehtede jaoks leida sobiv albumi plugin.

pina_web

Testida! Testida! Testida!

Kui leht on valmis, on aeg see risti põiki läbi klikkida, leidmaks näpuvigadest tekkinud erroreid, või silmariivavaid pisidetaile. Enne lehe avaldamist tuleb veenduda, et kõik viidad said ikka õigesse kohta ja leht täidab oma funktsiooni. Siin on hea, kui saab kaasta oma meeskonnaliikmeid, kes aktiivselt veebiga ei tegelenud ning ka “võõraid”, kes pole varem veebi näinud. PiNA meeskond jäi valminud tulemusega väga rahule, nii lehe halduse kui vormi suhtes. Uus leht on neile kaasamise tööriistaks, projektirahadele kandideerides portfoolioks ning eeskujuks ka teistele sarnastele asutustele.

Veebilehe tegija ja kujundaja valik

Kui sa kaasad oma veebi tegemisel kujundajat ja/või programmeerijat, siis tegija valik on samuti üks väga olulisi samme. Enne PiNA veebi tegemist Agentuuris igapäevaselt veebiga tegijat ei olnud ja õige programmeerija leidmiseks oli ka meil vaja ületada kivid ja kännud. Meie õnneks leidsime hea programmeerija, kes:

  • keskendus tegudele, lahendustele ja võimalustele, kuidas veebi kliendile kõige lihtsamalt ja soodsamalt ja samas hea tulemusega valmis teha;
  • kes omas kogemust väga erinevat tüüpi veebilehtedega ja oskas ette näha tekkivaid keerulisi nüansse;
  • kelle “stiil” oli sobiv kliendi stiiliga;
  • kes oli avatud suhtleja, oskas keerulisi asju lihtsalt seletada;
  • kes võttis tööd hingega.

Sellest lähtuvalt soovitame sul veebilehe tegija valikul jälgida:

  1. Milline on tema enda veebileht ja portfoolio – kas tema käekiri on sarnane selle stiiliga, mida sina soovid? PS: on neid, kes on nökaks ühes, kujundaja ja programmeerija koos, samuti neid programmeerijaid, kes ei kujunda. Nii võib sul vaja minna kahte inimest – ühte, kes kujundab ja teeb sulle sobiva kujunduse, mille programmeerija siis veebis rakendab. Seega mõtle, kas
  2. Vajad kujundajat või programmeerijat ja kumb on sinu valitud veebilehe pakkuja?
  3. Kuidas on ta sinu kirjadele, päringule vastates? Kas ta mõistab sinu küsimust, oskab esitada lisaküsimusi ja enne töö algust juba selgitab, mis võib hakata probleeme tekitama ja mis on lihtsam?
  4. Mida ta tegelikult määratud tasu eest pakub? Kui teed mitu päringut, siis jälgi, mis on summade taga tegelikult, mis saab siis, kui sa tulemusega rahul ei ole, jne.

 

Loodame, et see info on sulle abiks oma kodulehte uuendades või seda alles luues. Kui vajad ka oma kodulehe või ettevõtte infomaterjali loomisel abi, kontakteeru julgelt PBA meeskonnaga.

Jäta oma kommentaar