Layout-suunnitelma portfolio-sivustolla

Layout-suunnitelma portfolio-sivustolla

Sivuston visuaalinen ilme

Layout-suunnitelma on valmis koottavaksi kun sivuston informaatiorakenne on pohdittu ja järjestetty palvelemaan sivuston käyttötarkoitusta. Portfiolion suunnittelulla on silti taipumus nojata näyttävään ulkoasuun ja aloittelevan WordPress-toteuttaja ei malta olla selailematta lukuisia ulkoasuteemoja heti tehtävänannon kuultuaan. Käytännössä oman leiskan suunnittelu onnistuu varmimmin kun tietää tarkkaan mitä on hakemassa. Samaa pätee valmiin teeman valintaan, vaikka teema näyttääkin todellisen luontonsa vasta jonkin aikaa käytössä kuluttuaan. Testaaminen » on avuksi teemankin valinnassa.

Layout-suunnitelma ja portfoliosivuston graafinen ilme

Lähtökohtaisesti leiskan suunnittelussa portofoliosivustolle oli vain kourallinen vaatimuksia:

  • Blogipohjainen muoto vähitellen kasvatettavalle sisällölle
  • Toimivuus yhden sivun vieritettävänä verkkosivustona
  • Mahdollisuus käyttää kuvia  koko sivun levyisinä
  • Some-linkkien helppo lisäminen

Sivuston layout-suunnitelman visuaalinen ilme nojasi valittuun teemaan ja oman pdf-CV:n ulkoasuun. Yhtenäisyyden vuoksi värit ja tekstityyppi ovat molemmissa samoja. Samaa tuttua ilmettä on käytetty myös sivuston ensimmäisen version tuotantokäsikirjoituksessa » josta löytyy myös sivuston värimaailma.

Marjutus-logo toimii porfoliosivuston tunnuksena

Portfoliosivuston visuaalista ilmettä pyörittelee tasasivuinen marjutus-logo sivuston vasemmassa ylänurkassa. Logo ei syntynyt sivuston suunnitteluvaiheessa, mutta sille löytyi sopivasti käyttöä sivustoprojektin tarpeisiin. Niin mieluista kuin logosuunnittelu onkin, portofolioprojektin aikatauluihin ei mahtunut oma brändäys, logon graafisesta ohjeistuksesta puhumattakaan. Keskeneräisiä ideoita varten voi toki aina kehittää jatkosuunnitelmia.

Layout-suunnitelma Sirius-teeman pohjalta

Sivuston pohjaksi valittu Sirius teema » vaikuttaa selkeästi yrityssivupohjalta, mutta taipuu moneen käyttöön – etenkin kun sen eri elementtien asentaminen lopulta onnistuu. Sivuston vaatima toiminallisuus löytyy teemasta itsestään: varsinaisessa suunnitteluvaiheessa ylimääräisiä lisäosia piti ladata vain lomaketta ja sivuston optimointia varten.

Teeman CSS-tiedoston olisi suonut olevan järjestelmällisemmin tehty, jotta esimerkiksi värien yhteinäinen muokkaus ei olisi ollut niin hajallaan ja työlästä tehdä. Ilmeisesti kyseinen ominaisuus on lisätty käyttäjäystävällisemmässä muodossa teeman maksulliseen versioon. Sen sijaan ulkoasun rakenteen suunnittelua helpotti eri elementtikokonaisuuksien vaivaton järjestely. Periaatteessa saattaisin kuvitella käyttäväni samaa pohjaa toistekin.

Sirius-teeman lisäksi sivustolla oli alunperin linkit myös suomen- ja englanninkieliseen CV-sivuun. Teema oli yksinkertainen yhdensivun staattinen CV-sivu nimeltä MyResume ». Kyseistä teemaa voin suositella vain responsiivisuuden vuoksi ja sen muokkaaminen oli pääosin mahdollista vain kooditasolla. CV-sivut oli luotu hyödyntämällä WordPressin multisite-ominaisuutta. Ikävä kyllä kyseistä ominaisuutta ei kaikki palveluntarjoajat tue. Esimerkiksi Marjun portfolio 2017 ei ole enää multisite-sivusto. Alkuperäiset cv-sivut sekä Frames-kurssin » aikana Foundation Framework -pohjalle tehty sivusto on jäänyt pois webhotellin vaihdon yhteydessä.

Oma versioni Sirius-teemasta tapahtui alla kuvaamaani rakennemallin mukaisesti. Selkeimmät irtiotot alkuperäisen teeman ulkoasusta näkyy värien käytössä ja sivun yläosan suunnittelussa: Halusin rajoittaa header-kuvan korkeutta niin, että osa sivun otsikoista ja teksteistä on näkyvissä sivua vierittämättä. Ajatusta puoltaa käytettävyyteen ja sivuston optimointiin » liittyvät näkökohdat komeiden kuvien viehätyksestä huolimatta.

Oma valintani on siis vain yksi versio lukemattomista vaihtoehdoista. WordPress-kurssimme päätteeksi tekemiemme vertaisarvioden parhaimpiin anteihin kuuluivatkin kurssitoverien teemavalinnat. Miten erilaisia portfoliosivustoista tulikaan ja kuinka teemavalinnat vaikuttivat ulkoasun lisäksi myös taloudellisempaan lisäosien lataukseen.
Millaisia kokemuksia itsellesi on WordPress teemoista ja mitkä ovat omia suosikkejasi? Jaa vinkkiä » tai kerro lisää.