Elämäni ensimmäinen asiakas nettisivusto

Sain ystävältäni Liikuntatiteiden Maisteri / Personal Treiner Vera Laszlolta mielenkiintoisen työtehtävän rakentaa nettisivusto sekä suunnitella logo hänen uudelle yritykselle VT Sportlaser Suomi Oy:lle, joka myy Safe Laser -tuotteita (Safe Laser 1800 Infra, Safe Laser 500 Infra,Safe Laser 150 ja Safe Laser Geeli) sekä lisäosia turvalliseen laserterapiaan kotioloissa. Nettisivusto verkkokaupan kera löytyy osoitteesta https://sportlasersuomi.fi . Nämä laitteet ovat unkarilainen keksintö.

Sain melko vapaat kädet sekä logon että nettisivuston ilmeen suunitteluun ja toteutukseen. Tekstit nettisivustolla on Veran käsialaa.

Logon suunnittelu

Tämän projektin ensimmäinen tehtävä oli suunnitella yritykselle logo. Sain muuten vapaat kädet suunnitteluun mutta logossa tuli käyttää punaista väriä, joka kuvastaa infrapunavaloa, jota laite heijastaa.

Päätin tehdä logosta musta-punaisen valkoisella taustalla, joka on helposti muokattavissa tummalle taustalle. Mustat värit vain muutetaan valkoiseksi tummalla taistalla. Sport Laser -sanassa o-kirjaimen kohdalla käytin kuviota, joka kuvastaa heijastusta, sädettä ja tähän kuvakkeeseen liitin punaisen värin. Sport Laser -sanan päätin kirjoittaa pienellä yhteen, jossa sport-sana vahvalla Monteserrat-fontilla, vahvuus bold ja koko 30 pt. Laser-sana puolesta Monteserrat light / 30pt. Sport-sanaa kuvaa fontin koon kautta vahvuutta kun taas laser-sana ohutta sädettä.

Värit fontissa olivat:
Musta Sport-sana: RGB; 29, 30, 27. CMYK; C: 74%, M: 65%, Y: 63%, K: 81%, #1D1E1B.
Musta laser-sana: RGB; 29, 30, 27. CMYK; C: 74%, M: 65%, Y: 63% K: 81%. #1D1E1B
Punainen kuviossa: RGB; 216, 26, 76. CMYK; C: 8%, M: 98%, Y: 56%, K: 1%. #D81A4C
Musta kuviossa: RGB; 29, 30, 27. CMYK; C: 74%, M: 65%, Y: 63%, K 81%. #1D1E1B
Valkoinen väri: RGB; 255, 255, 255. CMYK; C: 0%, M: 0%, Y: 0%, K 0%. #ffffff

 

Safe Laser
Safe Laser

Löysin https://sivututka.fi/millainen-hyva-logo/ -sivuilta erittäin hyvän artikkelin siitä, millainen on hyvä logo. Pidin näistä muutamaa hyvää pointtia mielessä suunnitellessani Sport Laser -logoa.

No mitä logon pitää sitten olla?

Logon tehtävä ei ole sivuston mukaan helppo, koska sen tehtävä on todella yhtäaikaa vaikea ja helppo. Tämän vuoksi Pepsi muun muassa maksoi uusimmasta logostaan yli miljoonan.

Logon tulee olla fiilikseltään sopia kuvaamaan yritystä. Tämän artikkelin mukaan hyvä jääkiekkojoukkueen logo voisi olla esimerkiksi voimakas, energinen ja räjähtävä. Muotivaatemerkin logo taas elegantti. Tärkeää on kun mietit sopivaa fiilistä, että pystyttelee tunnetasolla.

Millainen on hyvä logo?

Nokia: itsevarma, uskottava, vahva

Logon tulee olla myös helposti muistettava.
Hyvä logo on sellainen, että voit piirtää sen paperille nähtyäsi logon parin sekunnin ajan. Kovin monimutkaista ei ole helppo parissa sekunnissa muistaa!

Tämä seuraava vinkki jäi mieleni sopukoihin kuin takiainen. Logon tulee siis olla niin simppeli, että tukka nousee pystyyn! 😀 Tämän tärkeyttä ei voi korostaa liikaa. Parhaat logot todella ovat yksinkertaisia. Entä miltäpä kuullostaisi toive laittaa vaate- ja urheiluvälinebisnekselle logoksi merkki, joka muistuttaa katsojaa liikkeestä ja vauhdista?

Millainen on hyvä logo?

Ei firman nimeä eikä mitään.

Millainen logon ei sitten tule olla?

Logon ei tulisi olla liian monimutkainen. Tähän on kovin helppo kuitenkin langeta.  Ei kannata tunkea logoon liian paljon eri värejä tai fontteja. Logon tehtävä ei myöskään ole kertoa yrityksestäsi mitään. Hyvin harvoin myöskään logoon rakastutaan ensisilmäyksellä vaan sydämet ikään kuin lunastetaan ajan mittaan. Helposti sitä kuitenkin haluaa asiakkaan heti ihastuvan.

Logon tarkoitus artikkelin mukaan ei ole myöskään kirjaimellinen sanoma kuten ”me pesemme pyykkiä” tai ”kahvila”. Logon sopivuutta tulisi ylläolevan sijaan miettiä tunnetasolla. Urheiluseuran logo voisi olla esim. räväkkä, sporttinen ja rohkea. Naisten vaatemerkki voisi puolestaan olla elegantti.Alla esimerkki monimutkaisesta logosta:

Millainen on hyvä logo?

Koko firman stoori tunnettuna logoon

Nettisivuston suunnittelu ja toteutus

Webhotelli näiden sivujen osalta on Domainhotellin kautta eli paikka sivuille ja sivut kokosin WordPressillä, jonka asensin Domainhotellin sivuilla klik-asennusohjelman avulla. Teemana käytin maailman suosituinta teemaa Diviä, jonka endottomana etuna on helppokäyttöisyys Divi-builder drag and drop visuaalisen sivunrakentajan ansioista. Tämä teeman helppokäyttöisyys on lopulta myös asiakkaan etu. Toki aina jokainen uusi asia kuitenkin vaatii opettelua, ja totuttelua, jotta käytön oppii. Näin minäkin olen tehnyt näiden kahden vuoden aikana, jolloin olen nettisivuston rakentamiseen perehtynyt ja asiaa opiskellut! Oikotietä onneen ei ole!

Sain taas aika lailla vapaat kädet mutta toiveena oli selkeät sivut. Värimaailmaksi valitsin sivuille samat värit kuin logossa lisättynä violetilla #400063. Punainen oli #d81a4c. Kuvien päällä käytin liukuvärjäyksiä, mm. etukuvan päällä liukuvärjäys: rgba(216,26,76,0.75) rgba(67,6,99,0.74). Fontteina käytin Monteserratin eri leikkauksia. Sama fontti siis kuin logossa. Sivuja tein kaikkiaan 12 kpl, joten kyse oli laajasta nettisivustosta. Mukava asia tämän sivuston kohdalla oli sisällön ja kuvien runsaus. Oli helppo rakentaa, kun oli sisältöä, mistä rakentaa. Ei tarvinnut vedellä melkeistään pelkillä visuaalisilla elementeillä! 😀

Työvaiheet:

Nettisivun rakentaminen on monimuotoinen homma mutta työvaiheina verkkotunnuksen, webbihotellin hankinnan sekä Wordpessin ja teeman asennuksen jälkeen on mm. sivujen lisääminen ja sen jälkeen valikon rakennus ja valikkoon lisääminen. Sivuja Divillä tosiaan rakennetaan viusaalisella sivunrakentajalla Divi-builderilla. Divin hyötynä on se, että sivuja voi rakentaa itse mutta voi myös hyödyntää valmiita layoutteja tai niiden osia. Vaatii tietysti kuitenkin taitoa ja kekseliäisyyttä, jos valmista hyödyntää osana sivustoa. Kaikki tyyliasiat säädetään valikoista. Omaa CSS:ää ei välttämättä juurikaan tarvitse tehdä.

Sivut voi ja kannattaa tallentaa Divi-kirjastoon ja elementeistä voi tehdä myös globaaleja. Itse tallensin jokaisen sivun lukuunottamatta yhteystietosivua alalaidassa olevan footerin globaalina. Hyöty on siinä kun tekee muutoksen yhden sivun alareunassa olevaan footeriin, muutos tulee automaattisesti myös muille sivuille, linnkkejä lukuunnottamatta. Valikoista löytyy monenmoista työtä nopeuttavaa juttua mm. lohkojen, rivien tai moduulien kopioiminen tai vaikkapa moduulin tyylien kopioiminen ja liittäminen seuravaan moduuliin. Näin ilmeestä tulee vaivattomasti yhtenäinen, eikä aina ja aina tarvitse tehdä samoja tyylivalintoja seuraavaan samanlaiseen moduuliin tms.

Kun sivut ovat valmiit kannattaa sivut tallentaa Divi-kirjastoon sen varalta, että sivu jostain syystä katoaa. Myös varmuuskopio Domainhotellin sivulla kannattaa välijoin tehdä. Aikaa vievää hommaa nettisivujen rakentamisessa on kuvien optimointi ja nimeäminen hakukoneoptimoinnin kannalta. Kaikki kuvat itse käytin Photoshopin save for web -komennon kautta. Kuvia pystyy optimoida myös mediakirjastosta käsin. Jos kuvan laittaa liian isona tiedostona sivulle, se vie tilaa ja hidastaa sivun toimintaa. Samankokoisiksi piti paljon kuvia muutella, jotta eivät näytä eri kokoisilta ja hassuilta sivuilla. Hallintapaneelissa ulkoasun muokkaus -kohdassa voi mm. säätää sivuston identiteetin, ylävalikon, alavalikon ja tekstien tyyliseikkoja. Nämä valinnat ovat sitten valmiina sivuilla kun kirjoitetaan tekstiä. ym. Helpottaa työtä. Hallintapaneelin valikoista löytää myös paljon muita säädettäviä asioita.

Kun sivut muuten ovat valmiit Divissä on helppo optimoida sivut näkymään hyvin sekä työpöytä-, kännykkä- että tablettinäkymällä. Kun säätää esimerkiksi otsikko-fontin kokoa löytyy muotoiluvalikosta fontin säädon kohdalta kännykkä, tabletti ja työpöytäkuvakkeet, jossa pääsee katsomaan miten otsikkofontti vaikka näkyy missäkin näkymässä. Sivun alareunasta kun sivu on muokkaustilassa (Edit with Divi), näkyy myös nämä kuvakkeet, josta pääsee skrollaamaan sivut läpi eri näkymissä. Aikaa vievä toimenpide, kun haluaa hyvää jälkeä! 😀 Tämä tarkoittaa sitä kun puhutaan responsiivisista nettisivuista. Ja se on kyllä nykyään tärkeää kun selataan nettiä paljon muiltakin kuin työpöytänäytöltä. Lisäosina käytin Divi-teemaan liittyviä lisäosia sekä verkkokauppa lisäosaa Woocommerse sekä Yoast SEO -hakukoneoptimointilisäosaa. 

Tämä nettisivuprojekti oli siis omien sijujen jälkeen ensimmäinen asiakas nettisivuprojekti, joten laittoihan se jännittämään, miten selviydyn. Verkkokaupankin kokosin ihan ensimmäistä kertaa. Nyt kun kaksi vuotta opiskellut omien sivujen kautta nettisivujen tekoa, niin jatkoa toki seuraa. On meinaa sen verran haastava graafisen alan työ kyseessä. Elinikäistä projektia siis pukkaa ja sehän ei haittaa. Sen verta mukavan haastavaa hommaa ja opittavaa riittää! 😀

Nettisivut Sport Laser Suomi

Sport Laser Suomi -nettisivujen ulkoasua

0 kommenttia

Lähetä kommentti

Sähköpostiosoitettasi ei julkaista. Pakolliset kentät on merkitty *

Share This

Share this post with your friends!