Parvien kuvat

Parven kuvituskuva näkyy sekä parvisivun suurena taustakuvana että parvikorteissa eri puolilla Skillhiveä. Hyvin valittu kuva tekee sisällöistä helpommin tunnistettavia ja palvelun kokonaisuudesta rauhallisemman ja viimeistellymmän.

Miksi parvien kuvat ovat tärkeitä?

Hyvä kuvituskuva auttaa:

  • tunnistamaan sisällön nopeasti

  • erottamaan eri parvet ja sisältötyypit toisistaan

  • tukemaan sisällön aihetta ja tunnelmaa

  • vahvistamaan organisaation omaa visuaalista ilmettä

  • tekemään palvelusta yhtenäisen ja ammattimaisen

Yksittäisen kuvan näyttävyyttä tärkeämpää on kokonaisuus. Jos organisaatiossa käytetään paljon parvia, kannattaa kuville määritellä yhteinen visuaalinen tyyli.

Millainen kuva toimii parhaiten?

Suosittelemme kuvia, jotka ovat:

  • vaakasuuntaisia

  • visuaalisesti selkeitä

  • rauhallisia ja suhteellisen vähäeleisiä

  • helposti ymmärrettäviä myös pienessä koossa

  • tyyliltään yhtenäisiä muiden parvikuvien kanssa

Kuvan ei tarvitse kuvata aihetta kirjaimellisesti. Esimerkiksi koulutusta voi kuvata oppimisen, etenemisen tai uuden oivaltamisen metaforalla.

Hyvä periaate

Yksi kuva – yksi selkeä visuaalinen idea.

Vältä liian montaa pientä yksityiskohtaa, voimakkaita kontrasteja ja kuvan sisään sijoitettua tekstiä.

Huomioi kuvan päälle tulevat tekstit ja painikkeet

Skillhive lisää kuvan päälle käyttöliittymän omia elementtejä.

Parvikortissa:

  • parven nimi näkyy kuvan alaosassa valkoisena tekstinä

  • tekstin taustalla on tumma väriliuku

Parvisivulla:

  • kuvan alaosassa voi olla yksi tai kaksi riviä toimintopainikkeita

Tämän vuoksi kuvan alaosan kannattaa olla rauhallinen ja riittävän tumma, jotta valkoinen teksti ja käyttöliittymäelementit erottuvat hyvin.

Vältä erityisesti:

  • täysin valkoista tai hyvin vaaleaa alaosaa

  • voimakkaita yksityiskohtia kuvan alaosassa

  • kuvan sisään kirjoitettua tekstiä

  • logoja tai muita tärkeitä elementtejä kuvan alareunassa

Kuvan koko ja rajaus

Parven kuva mukautuu automaattisesti eri näyttökokoihin. Tämän vuoksi yhtä tarkkaa pakollista pikselikokoa ei ole.

Hyvä lähtökohta on laadukas vaakasuuntainen kuva, esimerkiksi noin 16:9-kuvasuhteessa.

1. Parvikortti

Listausnäkymässä:

  • kuva rajataan vaakasuuntaiseksi

  • rajaus tapahtuu kuvan keskeltä

  • kortin leveys on noin 360 px tai vähemmän

  • kuvan minimikorkeus on noin 125 px

  • korkeus voi kasvaa, jos parven nimi vie useamman rivin

  • kuvan alaosassa näkyy parven nimi

Leveämmillä näytöillä yksittäistä korttia ei kasvateta, vaan näytölle tulee useampia kortteja rinnakkain.

2. Parvisivu

Parvisivulla kuva näkyy suurena header-kuvana:

  • kuvan leveys mukautuu käytettävissä olevaan näyttötilaan

  • kuvan korkeus on noin 50 % näytön korkeudesta

  • rajaus tapahtuu kuvan keskeltä

  • kuvan alaosassa näkyvät parven toimintopainikkeet

Yksi painikerivi vie noin 50 px ja kaksi painikeriviä noin 90 px kuvan alaosasta.

Huomioi eri näyttökoot

Sama kuva voi näkyä hyvin eri tavalla tietokoneella, tabletilla ja puhelimella.

Kuvasta voidaan rajata pois:

  • ylä- ja alareunaa

  • oikeaa ja vasenta reunaa

Siksi:

  • sijoita tärkein sisältö kuvan keskialueelle

  • älä sijoita tärkeää kohdetta aivan kuvan reunaan

  • vältä kuvia, joiden ymmärtäminen riippuu yhdestä pienestä yksityiskohdasta

  • varmista, että kuva toimii myös voimakkaasti rajattuna

Yhtenäinen kuvamaailma helpottaa palvelun käyttöä

Jos organisaatiossa on paljon parvia, kuville kannattaa muodostaa yhteinen visuaalinen kieli.

Eri sisältötyyppejä voidaan erottaa esimerkiksi värien avulla:

  • koulutukset ja oppiminen: turkoosi ja sininen

  • perehdytys: vihreä ja turkoosi

  • projektit ja kehittäminen: sininen ja violetti

  • kehityskeskustelut ja coaching: lämpimät keltaisen ja oranssin sävyt

  • yhteisöt ja ideointi: organisaation omaan ilmeeseen sopiva korostusväri

Tämä ei ole pakollinen värikoodaus. Tärkeintä on, että kokonaisuus tuntuu johdonmukaiselta.

Organisaation omia brändivärejä ja visuaalisia elementtejä voi luonnollisesti hyödyntää.

Kuvan luominen tekoälyllä

Parvikuvan voi tehdä myös esimerkiksi ChatGPT:n tai muun kuvageneraattorin avulla.

Alla olevaa promptia voi käyttää lähtökohtana.

Muokkaa hakasulkeissa olevat kohdat oman parvesi mukaan.

Esimerkkiprompti

Luo Skillhive-palvelun parvelle laadukas vaakasuuntainen kuvituskuva.

Parven aihe: [KIRJOITA PARVEN AIHE TAI NIMI]

Parven tyyppi: [ESIM. KOULUTUS / PEREHDYTYS / PROJEKTI / KEHITYSKESKUSTELU / YHTEISÖ / IDEAPARVI]

Kohderyhmä: [VALINNAINEN – ESIM. KOKO HENKILÖSTÖ / ESIHENKILÖT / UUDET TYÖNTEKIJÄT]

Organisaation värit tai brändi: [VALINNAINEN – KIRJOITA VÄRIT TAI MUU TOIVE]

Luo rauhallinen, moderni ja ammattimainen Nordic B2B editorial illustration.

Kuvan tulee olla selkeä, lämmin ja inhimillinen. Käytä yhtä selkeää visuaalista ideaa ja mieluummin hieman metaforista kuin täysin kirjaimellista kuvaustapaa.

Käytä rajattua ja harmonista väripalettia. Kuvan tulee sopia työelämän, oppimisen ja osaamisen kehittämisen ympäristöön.

Sommittele tärkein sisältö kuvan keskialueelle, koska kuvaa rajataan automaattisesti eri näyttökoissa.

Jätä kuvan alin noin 30 % rauhalliseksi ja suhteellisen tummaksi alueeksi, jotta Skillhiven valkoinen otsikkoteksti ja käyttöliittymän painikkeet erottuvat sen päältä.

Älä sijoita tärkeitä yksityiskohtia kuvan reunoille tai alaosaan.

Älä lisää kuvaan tekstiä, otsikoita, numeroita tai käyttöliittymäelementtejä.

Vältä geneerisiä stock-kuvamaisia bisneskuvia, kädenpuristuksia, kokoushuonekliseitä ja liian runsasta yksityiskohtien määrää.

Tee kuva ensisijaisesti vaakasuuntaiseksi, noin 16:9-kuvasuhteessa.

[VALINNAINEN: Lisää organisaation logo hienovaraisesti kuvan oikeaan yläkulmaan. Käytä logoa täsmälleen alkuperäisessä muodossaan äläkä muuta sen värejä tai mittasuhteita.]

Jos käytät organisaation logoa tai muuta brändimateriaalia, varmista, että sinulla on oikeus käyttää sitä.

Esimerkkejä

Alla olevat kuvat havainnollistavat yhtä mahdollista yhtenäistä kuvamaailmaa.

Henkilöstökoulutus
Oppimista ja kehittymistä kuvataan yhteisenä matkana. Pääaihe sijaitsee keskellä ja kuvan alaosa on jätetty rauhalliseksi Skillhiven käyttöliittymää varten.

Kehityskeskustelu
Kahden ihmisen keskustelu on kuvan pääaihe, mutta ympäristö ja polku tuovat mukaan kehittymisen ja tulevaisuuden näkökulman.

Ideaparvi
Ideoiden syntymistä ja jakamista kuvataan yhteisenä visuaalisena tapahtumana. Tyyli säilyy samana kuin muissa parvikuvissa.

Organisaation omaan brändiin sovitettu koulutuskuva
Samaa kuvitustyyliä voidaan sovittaa organisaation omiin väreihin ja täydentää organisaation logolla.

Muistilista hyvälle parvikuvalle

  • Kuva toimii sekä suurena että pienenä.

  • Tärkein sisältö on keskellä.

  • Alaosa on rauhallinen ja riittävän tumma.

  • Kuvassa ei ole tarpeetonta tekstiä.

  • Kuva kestää rajautumisen eri näyttökoissa.

  • Kuvan tyyli sopii yhteen muiden parvikuvien kanssa.

  • Kuva tukee parven aihetta ilman, että siitä tulee liian kirjaimellinen.

Valmiina käyttöön

Tällä sivulla olevat esimerkkikuvat on luotu ChatGPT:llä, ja Skillhive-asiakkaat voivat käyttää niitä vapaasti omassa Skillhive-ympäristössään. Voit ladata kuvan ja käyttää sitä sellaisenaan tai hyödyntää sitä inspiraationa oman kuvamaailman luomisessa.

Lähdemerkintää ei tarvita.