Minimalistinen portfolio – Jaana Vuola

Tämä minimalistinen ja mobiiliystävällinen WordPress portfolio on suunniteltu taitavalle ja eläinystävälliselle valokuvaaja Jaana Vuolalle. Olen kirjoittanut tähän artikkeliin minimalistisen portfolion suunnitteluprosessista.

 

Minimalistinen portfolio

Muotoilussa on käytetty hyvin minimalistista tyyliä. Jaana Vuolan toive, joka on huomioitu kauttaaltaan portfoliossa, oli antaa mahdollisimman paljon tilaa hänen omille kuvilleen.  Sivut rakentuvatkin hyvin suurista valokuvaelementeistä, isosta määrästä puhdasta valkoista tilaa sekä muutamasta selkeästä väripisteestä. Minimalistinen tyyli kulminoituu erityisesti laskeutumissivulla.

Laskeutumissivuksi – yleisimmin etusivuksi – kutsutaan sivua joka aukeaa välittömästi silmiesi eteen saapuessasi sivuille. Laskeutumissivu on suora käännös englannin kielestä Landing page.

Portfolio käyttää nettimaailmassa harvinaisempaa vertikaalista navigointi aluetta. Sommittelu jakaantuu kolmeen pystytilaan, mikä tekee sivuista rakenteellisesti mielenkiintoiset. Sivun navigaatiopalkki ja suuri esittelykuva pysyvät paikoillaan vaikka viereistä sisältöä rullaa.

Muotoilin myös WordPress sisäänkirjautumisikkunan. Mielestäni se on asiakkaan kannalta kiva tehdä kauniiksi, koska sitä käyttää usein. Kaunista kirjautumisikkunaa voi verrata oman kodin ulko-oveen. Kotiin on aina mukava tulla kun ovi ja sen välitön ympäristö näyttää huolitellulta.

Käytettävyys ja mobiili

Sivujen käytettävyyttä ja mobiiliystävällisyyttä on mietitty hyvin paljon. Tarkkaan harkittu suunnittelu onkin palkittu, sillä Think with Google mobiilitesti antoi sivulle 100/100 pistettä.

Suurin osa ihmisistä käyttää puhelinta oikealla kädellä. Siksi mobiilivalikon avausnäppäin on sijoitettu ruudun oikealle puolelle, jotta sitä olisi helpompi painaa yhden käden peukalolla (anteeksi vasurit 😅). Kyseiseen navigointinäppäimeen on lisätty myös hieno animaatio. Painaessa näppäintä VALIKKO sana liukuu kohti aukeavaa valikkoa ja näppäin muodostaa jäljellä olevasta kahdesta palkista X merkin. Painaessa näppäintä uudestaan valikko sulkeutuu. Tämä on osoitus hyvin yksinkertaisesta mutta tehokkaasta keinosta kertoa käyttäjälle sivujen toimivuudesta.

Sivuilla navigointi on tehty erittäin helpoksi. Sosiaalisen median mainokset on minimaalisuudessaan jätetty pieneksi ja perinteisen infosivun sijasta kaikki tärkeimmät tiedot on laitettu navigaatio palkkiin. Tämä tarkoittaa tietojen välitöntä huomaamista ja vaivatonta selauskokemusta – sekä vähemmän painalluksia ja sivuilla edes takas surffaamista.

WooCommerce kauppa

Sivut ovat myös WooCommerce valmiit. Eli tulevaisuudessa Jaana voi myydä sivuillaan valokuviensa tulosteita käyttäen maailman suosituinta WordPress kauppaa.

SSL-salaus

Jaanavuola.com on kokonaan SSL suojattu. SSL-salauksella tarkoitetaan protokollaa, jolla suojataan tietoliikennettä internet verkkojen yli. Kyse on vastaavasta suojasta mitä esimerkiksi verkkopankkisi käyttää. Huomaat SSL suojan pienestä lukon kuvasta selaimesi osoiterivin vasemmalla puolella. SSL suojaus on tulossa internetin standardiksi. Google mm. kehottaa suojaamaan kaikki sivut ja lupaa paremman hakutuloksen suojatuille sivuille.

Suunnitteluprosessi

Tässä muutama kuva siitä millaista materiaali käytin ja näytin asiakkaalle suunnitteluprosessin aikana.

 

Ensin oli selvitettävä millaista tunnetta ja tyyliä Jaana portfoliostaan toivoo. Näytin hänelle kourallisen verran tunnetilatauluja, joista hän valitsi kuvassa näkyvän seikkailunhaluisen taulun. Sen jälkeen näytin muutaman tyylitaulun joista valittiin minimalistinen tyyli juuri sen vuoksi kun tämä tyyli antaa paljon tilaa kuville.

Sitten suunnittelin paperille mobiilikokoiset rautalankamallit. Tässä on kyse mobiili ensin lähestymistavasta jota käytän aina kun suunnittelen sivuja. Vaikka kyseinen esitetty rautalankamalli ei toteutunutkaan, niin siinä oli jo selvästi havaittavissa se valinnan selkeys mitä lähdin sivujen suunnittelussa tavoittelemaan. Esitetty paperi oli näkymä mobiililaskeutumissivusta.

Edellä mainitut suunnitelmat sopivat Jaanalle, joten siirryin prosessin seuraavaan vaiheeseen. Nyt oli aika tehdä tarkempia tyylitauluja. Näissä tauluissa mietin näppäimien värejä, sommittelin kuvia ja kokeilin erilaisia otsikoiden ja leipätekstin fonttipareja.

Ennen sivujen rakentamista internetiin tein tarkat graafiset suunnitelmat sivujen ulkonäöstä.

Prosessin viimeinen vaihe oli muotoilla suunnitelma Genesis Framework rakenteen päälle. Jos olet kaltaiseni nörtti niin sitten tämä viimeinen kuva aukeaa sinulle 😇. Kaikille teille muille kyse on siis sivun rakentamisen alkuvaihe jossa moduulit ja palikat ovat juuri asetettu paikoilleen. Ne ovat hassun värisiä koska välillä on vaikea hahmottaa mihin mikäkin moduuli loppuu. Paremman hahmottamisen vuoksi väritän moduulit räikeillä väreillä, kuten aquamarinebisque ja darksalmon.

Valmistuessaan jaanavuola.com on täysin räätälöity WordPress portfolio joka on turvallinen, mukava ja kaunis käyttää.

jaanavuola.com

Jaana kirjoittaa sivuilla blogia, jossa hän jakaa tarinoita kuvien takaa ja siitä miten hän kuviaan käsittelee. Eläinkuvaajana hän on erityinen, joten suosittelen lämpimästi seuraamaan hänen blogia – erittäin mielenkiintoista tekstiä. Jaanan portfolio löytyy osoitteesta jaanavuola.com.

Kannattaa kokeilla käyttää sivua myös puhelimella 😉.

Projektissa on tehty seuraavia asioita:

  • Tunnetilataulut ja tyylitaulut
  • Käyttöliittymä suunnittelu
  • Sivujen layout eli sivusuunnitelmat
  • Internetsivut
  • Graafinen suunnittelu
  • Minimalistinen

 

Ei vielä kommentteja.

Vastaa