Verkkoja vesille - yhteistyöprojektina web-sivut

Aiemmin kirjoittelin projektista, joka minulla oli työn alla. Niinhän sitä sanotaan, että vierivä kivi ei sammaloidu, joten kannattaa pitää itsensä liikkeessä ja kohdata uusia haasteita tasaisesti. Jos ei muuten, niin tehdä vaikkapa projektiluonteisia toteutuksia, joissa pääsee hiomaan omia taitojaan ja tutustumaan uusiin asioihin. Tästä voi olla hyötyä tulevaisuudessakin. Projektin tarkoituksena oli uudistaa Kauneushoitola Evan nettisivut ja teimme tämän tiiviissä yhteistyössä yrittäjän kanssa.

www.kauneushoitolaeva.com - Etusivun yläpalkki

Valmis materiaali muokataan ja tuunataan

Projektissa minulla oli käytössäni yrittäjän selkeä visio sekä hänen omistamansa kuvamateriaali. Tämä nopeutti projektin valmistumista huomattavasti, sillä käytännössä taitoni tai aikani eivät olisi riittäneet materiaalin kuvaamiseen. Eikä amatöörikuvaajan tuotokset olisi edes olleet tarpeeksi korkealaatuisia, vaikka mielenkiintoa ja intoa olisi kuvaamiseenkin löytynyt.

Kuitenkin välillä kannattaa oikaista muutama kohta, jotta projekti valmistuisi ajallaan Tässä asiassa apuna ovat netissä olevat kuvapankit, joista valmiita ammattikuvaajien otoksia voi ostaa. Tähän asiaan en ole perehtynyt tarkemmin ja palveluntarjoajia on lukuisia (laadultaan vaihtelevia), joten asiaa en ala tässä sen kummemmin analysoimaan, mutta sanahaulla google saattaa asiaa avata.

Kun materiaali on kerätty ja käyttövalmiina, on aika ryhtyä hommiin. Käytössäni oli webhotellin palveluntarjoajan pakettiin kuuluva RVSiteBuilder -ohjelmisto, jolla sivusto tehtiin. Aiemmin muilla ohjelmilla sivustoja tehtyäni huomasin heti, että tämä ohjelmiston versio oli aika alkeellinen. Käytössä oli useita valmiita pohjia sivustoille, mutta niiden asetuksia ei päässyt kunnolla säätämään. Lisäksi ohjelmassa oli välillä virheitä ('bugeja'), joten sivuston luominen ei ollut täysin kivutonta.

Asiaa vielä hankaloitti se, että kesken projektin ohjelmaan ajettiin päivitys, joka sekoitti vanhemmalla versiolla tehdyn diaesityksen täysin. Palautteen ja virheilmoituksen jälkeen asia saatiin onneksi nopeasti korjattua, mutta hetken aikaa minut valtasi puristava tunne kurkussa ja luulin aiemman työni valuneen täysin hukkaan. Onneksi näin ei ollutkaan.

Kirjasimet kuntoon

Sivustoa suunnitellessa tekstin sisällöllä ja ulkoasulla on suuri merkitys lopputuloksen kannalta. Itse tekstit olivat yrittäjän itsensä luomia, joten minun osuuteni oli lisätä ne sivustolle ja muokata ne ulkoasultaan sopivaksi ja helppolukuiseksi. Alkuvaiheessa kannattaa tehdä vain parin sivun kokoisia testiversioita vaikkapa useampikin, jolloin tekstin fontit, kokoasetukset sekä sijainnit voidaan päättää.

Tässä on olennaista se, että tämä toteutetaan heti alkuvaiheessa. Tällöin sisällön rakentaminen on huomattavasti helpompaa ja nopeampaa, kun varsinaisen sivuston tekstit saadaan heti määriteltyä oikein. On paljon työläämpää alkaa muuttaa koko sivuston fontteja ja asetteluja jälkikäteen kuin päättää ne heti aluksi.

Korvaamattomana apuna tässä toimii muistivihko: kun fontit, koot ja sijainnit sekä otsikointi on päätetty, kirjaa kaikki asetukset ylös helposti saataville. Itselläni oli käytössä pinkkimustekynä ja ruutuvihko. Yksinkertaista ja helppoa. Monesti sitä kuvittelee, että asetukset voi helposti ja nopeasti tarkistaa luoduilta sivuilta, mutta tämä surffaaminen sivustojen tekovaiheessa on työlästä, turhaa ja aikaavievää. Sama asia hoituu yhdellä vilkaisulla ruutuvihkoon. Lisäksi monet ohjelmistot saattavat jumiutua, mikäli liian monta kohdetta on samaan aikaan auki.

Kuvien muokkaus

Yhtälailla kuvien muokkauksessa on otettava huomioon se, että kaikki kuvat ovat korkealaatuisia sekä samankokoisia. Jos esimerkiksi diashowssa on yhtäkkiä muita kuvia pienempi kuva joukossa, tämä antaa epäammattimaisen vaikutelman. Lisäksi se sekoittaisi diashown seuraamista sekä sen muodostamaa harmonista kokonaisuutta. Siihen vihkoon siis ylös myös kuvakoot ja muut säädökset, joita kaikkien kuvien tulee noudattaa.

Valmiin kuvamateriaalin perusteella valitsimme mielestämme parhaat ja sopivimmat kuvat sivuille. Sivuille valittiin tuotekuvia sekä tunnelmakuvia ja näissä oli tärkeätä saavuttaa oikeanlainen henki, maanläheinen mutta raikas. Lisäksi yrittäjä halusi sivuston ulkoasun olevan yksinkertainen ja selkeä, mikä toteutettiin mustavalkoisilla elementeillä sekä selkeillä navigointilinkeillä.

Sivustossa käytettiin pohjaa ('template'), mutta käytännössä se muokattiin täysin uusiksi. Vaihdoin värit, kuvat, navigoinnin asetuksia, taustavärejä ja kaiken, mitä ohjelmisto antoi säätää. Sivupohjan käyttö oli kannattavaa, sillä sen avulla turvattiin toimiminen muillakin laitteilla ja esimerkiksi kuvien reagoiminen näytön kokoon, sillä näiden asetusten määritykseen html-taitoni eivät olisi riittäneet. Jokainen kuva muokattiin erikseen sivustoon sopivaksi värimaailman ja muiden ominaisuuksien säädöillä.

Pääosin työskentelin kuvien rajauksen, värien säätöjen, reunojen häivytyksen sekä kuvien yhdistämisen parissa. Käytin kuvien käsittelyyn ohjelmistoa, joka mahdollistaa kerrosten käyttämisen. Tällöin voi säätää tarkasti kuvien elementtejä yksi kerrallaan haluamansa näköiseksi, mikä olikin erittäin tarpeellista. Näin ollen pystyin säätämään värimaailman, kääntelemään kuvia sekä rajaamaan niitä haluamallani tavalla.

Näkymä kolmen kuvan diasta muokattaessa. Jokainen kuva on rajattu ja liitetty erikseen omaksi kerrokseksi. Kerrokset näkyvät oikeassa reunassa ja niitä on lukuisia. Näkyvillä ovat ne aktiiviset kerrokset, joiden kanssa juuri työskentelin eli nuo, jotka on merkitty silmä-ikonilla. Muut kerrokset ovat piiloitettuina, mutta samassa kuvassa, jotta jatkokäsittely myöhemmin on helppoa.

Esimerkiksi diashowssa oli yksittäisten kuvien lisäksi kolmen kuvan dioja. Nämä oli toteutettu siten, että tein kehyksen, johon kuva kerrallaan siirsin omiin kerroksiin valitut pikkukuvat. Käytännössä siis tausta- ja kehys-kerrosten lisäksi muita kerroksia tuli vielä yhdeksän ja näin sain kaiken olennaisen tallennettua samaan kuvaan. Kun tein dioja valmiiksi, määritin näkyviin haluamani kerrokset ja vein näkyvän kuvan jpg-tiedostoksi.

Lisäksi kaikki muut kuvat sivustolla tuli käsitellä niin, että ne sointuisivat valkoiseen taustaan. Koska kehyksiä ei haluttu kuvilla käyttää, häivytin alkuperäisiä kuvia valkoiseen taustaan, jolloin ne tulivat harmonisemmin esiin - sen sijaan että olisivat pompsahtaneet silmille sellaisenaan.

Toimivuus myös mobiililaitteilla

Kiinnitimme huomiota myös sivuston toimimiseen mobiililaitteilla, joten pelkän hinnaston pudotusvalikon lisäksi laitoimme hinnasto-sivulle näkyville myös perinteiset linkit. Tämä siksi, että pudotusvalikoiden käyttäminen kosketusnäytöllisellä laitteella on äärimmäisen ärsyttävää ja turhauttavaa, sillä linkkeihin ei ehdi sohaista sitten millään ajoissa.

Käytännöllisyyden kannalta valmiin (vaikkakin täysin uudistetun) sivupohjan käyttö oli hyödyksi myös tässä asiassa, sillä sivusto oli perusasetuksiltaan tehty myös mobiililaitekäyttöön soveltuvaksi. Kuitenkin älypuhelimien yleistyttyä noin puolet verkkoliikenteestä tulee mobiililaitteilta (lähteenä oman blogin tilastot) kotikoneiden sijaan ja siksi kannattaa alusta asti huomioida käyttömukavuus myös uudenlaisella laitteistolla.

Omat taidot kehittyivät

Itselleni oli projektista suunnattoman paljon hyötyä. Unohduksiin jääneet kuvankäsittelytaidot tuli elvytettyä kertaheitolla sekä samalla takataskuun jäi paljon uuttakin tietotaitoa. Projekti oli aika suuritöinen ja vaati keskittymiskykyä, joten tein sitä osissa taaperon vedellessä päiväunia tai ollessa jonkun muun valvovan silmän alla. Koska jouduin pätkimään työajan osiin, oli tärkeätä siihen ruutuvihkoon kirjoittaa, mistä seuraavalla kerralla jatkaa. Siten ei tarvinnut aikaa kuluttaa muisteluun seuraavalla kerralla. Työskentelytehokkuudenkin sain nostettua siis aivan uudelle tasolle!

Viikonloppuisin, kun meillä oli sivuston rakenne ja visio selvillä, tein pidempiä maratoneja eli saatoin viettää sen 8 tuntia koneella. Projektin aikana esiin tuli ajanhukkaamisen syyt (huono suunnittelu, ajatusvirheet yms), joihin projektin edetessä pystyin kiinnittämään enemmän huomiota ja eliminoimaan turhaa koneella koomailua pois. Näin nopeuteni ja näppäryyteni kasvoi uusiin ulottuvuuksiin!

Useimmiten uppoiduin työhön niin kovasti, että unohdin syödä ja pitää taukoja. Eipä se mitään, tämän homman sai kyllä aina paikattua myöhemmin! Oli nimittäin ihanaa ja palkitsevaa työskennellä projektin parissa, josta oli konkreettista hyötyä myös hyvälle Ystävälleni. Kauneushoitola Evan yrittäjän kanssa olemme tutustuneet jo ammattikorkeakoulussa ja tehneet siitä lähtien yhteistyötä mitä omituisimmissa projekteissa ja toteuttaneet sellaisia asioita, minkä ei pitäisi olla edes mahdollista! Luovuus ja ideointi ovat aina olleet tekemässämme tiiviisti mukana.

Projektin myötä taivuttelin kaksi uutta tietokoneohjelmistoa omaan käyttööni sopiviksi sekä sain rutkasti kokemusta lisää web-sivuston rakentamisesta (tämä oli kolmas sivusto, jonka tein, mutta tekniikka on muuttunut aikaisemmista hurjasti!).

Eli olkaahan hyvä, rakkaat lukijani, ja klikkailkaa Kauneushoitola Evan sivustolle. Mielipiteitä sivustosta voitte jättää kommentin muodossa minulle tämän tekstin yhteyteen.

Jälkikirjoituksena työnhakutilanneraportti

Mikäli teitä kiinnostaa työnhakuni edistyminen, joudun ikäväkseni toteamaan, etten saanut hakemaani paikkaa asiakaspalvelutehtävissä. Jostain syystä ammatikorkeakoulututkinto sekä 10 vuoden asiakaspalvelukokemus (myös esimiestehtävät) eivät tällä kertaa riittäneet. Tai sitten pelästytin rekrytoijan, marssimalla haastatteluun markkinointisuunnitelman kanssa. Tällä kertaa se saattoi olla kohtalokas virhe, mutta tulipahan testattua. Nyt sitten uutta suunnitelmaa tekemään ja miettimään eri vaihtoehtoja.

---

Mikäli pidit tästä tekstistä, kerrothan siitä myös kavereillesi esimerkiksi Facebookin, Twitterin tai Instagramin kautta. Alla olevilla painikkeilla tai linkillä se käy kätevästi. 

Kiitos! 

Facebook: https://www.facebook.com/luovaaelamaa

Twitter:  https://twitter.com/Sanya__S

Instagram: http://instagram.com/sanya__s