Projektin alussa keskustelimme ominaisuuksista ja verkkosivuston sisällöstä, ja esittelin myös asiakkaalleni joitain nopeita rautalankamalle, joiden avulla pystyin antamaan paremman käsityksen keskustelemistamme ominaisuuksista. Keskustelumme jälkeen minulla on melko hyvä käsitys asiakkaan tarpeista ja siitä, millaisen verkkosivuston hän tarvitsee. Projektin tavoitteena on luoda käyttäjäystävällisemmät ja nykyaikaisemmat, mutta tyylikkään näköiset nettisivut samalla kun rakennetaan kennelin brändiä. Tavoitteena on luoda verkkosivusto, jossa kävijöiden on helppo navigoida ja luoda samalla luotettava kuva kennelistä.
Kävin lisäksi katsomassa muiden koirankasvattajien nettisivuja saadakseni käsityksen yleisimmistä ominaisuuksista ja vertailin myös niiden käytettävyyttä. Ei kestänyt kovin kauan tajuta, että kennelsivustoilla on melko paljon sotkuista ulkoasua ja navigointi voi olla hämmentävää ja vierailijoilta voi kestää jonkin aikaa löytää etsimänsä. Nämä ovat asioita, joita haluamme välttää asiakkaideni verkkosivuilla. Löysin kuitenkin myös hienosti tehtyjä kennelsivustoja inspiraation lähteeksi.
Persoona on fiktiivinen hahmo, jonka loin suunnitteluprosessin tueksi. Persoonan tehtävänä on auttaa käyttäjien ymmärtämisessä sekä tukea hyvän käyttäjäkokemuksen suunnittelua.
Seuraavaksi vuorossa on sivuston rakenteen hahmottaminen rautalankamallien ja sivukartan avulla. Tässä vaiheessa sivujen suunnitelmat ovat tylsän näköiset, mutta nyt rakenteeseen tehtävät muutokset on vielä erittäin helppo ja nopea tehdä.
.png)
Tässä vaiheessa päästään pohtimaan värejä ja fontteja. Keskustelimme asiakkaani kanssa sivuston tyylistä ja väreistä sekä mahdollisesta logosuunnittelusta. Suunnitteluprosessissa minulla oli melko vapaat kädet, sillä asiakkaallani oli vain yksi toive väriin nähden: verkkosivun bannerin tekstilogon tulisi olla vaaleansininen, joka muistuttaa zirkon- jalokiveä ja näytetyäni joitain vaihtoehtoja päädyimme käyttämään väriä #1CD3FF, joka on vähemmän vihertävä kuin perinteinen "zirkonisininen" #57FEFF, joka on lähempänä turkoosia. Muuten minulla oli melko vapaat kädet suunnitella sivuston väripaletti
Ennen kuin sukelsin syvemmälle värisuunnitteluun, ensimmäinen askel käyttöliittymän suunnitteluprosessissa oli päättää sovelluksen kirjasintyyli ja koko. Pienen tutkimuksen ja fonttivertailun jälkeen päädyin käyttämään roboto-fonttia alaotsikoissa sekä leipätekstissä ja Roboto Slabia otsikoissa.
.png)
Sivuston väripalettia päätettäessä tein parhaani varmistaakseni, että värit sopivat hyvin asiakkaan aiemmin päättämiemme banneritekstien väriin. Tämän tavoitteen saavuttamiseksi käytin Coolorsin väripalettigeneraattoria hyödyllisenä työkaluna.
Otin myös esteettömyyden huomioon valittaessa sovelluksen värejä. Contrast Checkerilla varmistin, että tekstit sekä kojootinruskealla että kermanvalkoisella värillä ovat saatavilla. Tarkistimen mukaan kojootin (#8A7660) ja taustan (#06070E) kontrastisuhde on 4,63:1 ja se läpäisee WCAG AA:n normaalissa tekstissä ja iso teksti läpäisee WCAG AA ja WCAG AAA ja koska tätä tekstin väriä käytetään vain suurissa otsikoissa, se läpäisee saavutettavan värin. Leipäteksti on kermanvalkoisella värillä (#EEE9E5), ja sen kontrastisuhde taustalla (#06070E) on 16,68:1, mikä ohittaa WCAG AA:n ja WCAG AAA:n sekä normaalissa että suuressa tekstissä.
Asiakkaan kanssa keskusteltani päätimme, että suunnittelen logon kennelin käyttöön. Tyylistä, väreistä ja ideoista keskusteltuamme tein tekstilogosta nopean suunnittelun, jonka muotoilin sitten saamani palautteen mukaan vastaamaan asiakkaan toiveita. Sen jälkeen suunnittelin kuvalogon tai "maskottikuvan" käytettäväksi heidän verkkosivuillaan. Vaikka minulla ei ole paljoa kokemusta logosuunnittelusta, pystyin hahmottamaan, mitä asiakkaani toivoi, vaikka hän ei osannut pukea unelmiaan sanoiksi. Asiakkaani oli tyytyväinen suunnitelmaani ja oli innoissaan voidessaan käyttää suunnitelmiani kennelin verkkosivuilla.Logosuunnittelun tavoitteena oli tuoda esiin kennelin nimi (Celastrina), joka viittaa holly blue -perhoseen, joka on itse asiassa Suomen kansallisperhonen.
.png)
Värien ja fonttien valinnan jälkeen oli aika luoda lopulliset suunnitelmat verkkosivulle. Suunnittelun jälkeen pidimme asiakkaan kanssa palaverin, jossa varmistimme että ulkoasu ja sivun toiminnallisuudet vastaavat odotuksia. tarvittaessa tein pieniä muutoksia suunnitelmaan.
.png)
.png)
Kaikkien suunnittelun ominaisuuksien kehittämiseksi piti löytää mahdollisimman paljon joustavuutta mahdollistava alusta verkkosivujen rakentamiseen. Koska en ole kovinkaan kummoinen ohjelmoija, koodin kirjoittaminen itse jäi vaihtoehdoista pois. Huolellisen tutkimuksen ja eri alustojen, kuten WIX, Wordpress, Squarespace jne., vertailun jälkeen päädyin webflow:hin, sillä vaikka se vaatikin melko paljon oppimista, se antoi minulle vapaat kädet kehitysprosessissa ilman rajoituksia, joita muilla alustoilla saattaa olla. Pidin myös mahdollisuudesta varmistaa, että verkkosivusto on täysin responsiivinen.
Keskustelin asiakkaan kanssa ja hän oli tyytyväinen päätökseeni ja he myös pitivät Webflow-sivuston hintaa varsin sopivana itselleen.Ja kyllä! Tämä oli ensimmäinen kerta kun työskentelin webflowin parissa. Eli opittavaa oli paljon!Opittuani Webflown perusteet Webflow Universityssä, päätin alkaa rakentaa verkkosivustoa ja oppia loput siitä, mitä tarvitsen prosessissa. Tämä toimi minulle tässä projektissa ja onnistuin saamaan sivuston valmiiksi julkaistavaksi ajoissa, itse asiassa viikkoa ennen määräaikaa. Toki kehitysprosessi oli aluksi todella hidasta ja tein paljon pieniä virheitä, mutta kun tajusin kuinka kaikki toimii, prosessi muuttui paljon nopeammaksi.
Verkkosivut julkaisitiin asiakkaan domainille ja julkaisun jälkeen varmistin että kaikki toimii niinkuin pitääkin.