Graafinen ohjeisto – mitä se sisältää ja miten teet sellaisen?

Lyhyesti: graafinen ohjeisto on dokumentti, joka kertoo, miten yrityksen visuaalista ilmettä käytetään. Siihen kirjataan logon versiot ja käyttösäännöt, värit värikoodeineen, fontit, kuvatyyli ja valmiit pohjat. Ohjeiston ansiosta verkkosivut, tarjoukset, somepäivitykset ja auton teippaukset näyttävät saman yrityksen tekemiltä, vaikka niitä tekisi moni eri ihminen.

Mitä graafiseen ohjeistoon kuuluu?

Ohjeiston laajuus riippuu yrityksen koosta ja siitä, kuinka monessa kanavassa se näkyy. Pienelle yritykselle riittää usein selkeä, parinkymmenen sivun dokumentti, kunhan sitä oikeasti käytetään. Seuraavat osat löytyvät lähes jokaisesta ohjeistosta.

Logo ja sen käyttösäännöt

Logo voi olla tekstilogo, kuvatunnus tai näiden yhdistelmä. Ohjeistossa esitellään kaikki versiot, kuten vaaka- ja pystyversio, pelkkä tunnus sekä versiot vaalealle ja tummalle taustalle. Yhtä tärkeitä ovat säännöt: pienin sallittu koko, suoja-alue logon ympärillä ja kielletyt muutokset.

Hyvä esimerkki on Spotifyn julkinen ohjeistus. Sen mukaan logo ei saa koskaan olla digitaalisesti alle 70 pikseliä eikä painettuna alle 20 millimetriä, logon ympärille jätetään suoja-alue, joka on puolet tunnuksen korkeudesta, eikä logoa saa kääntää, venyttää tai värittää uudelleen (Spotify for Developers). Säännöt kuulostavat tiukoilta, mutta juuri niiden ansiosta logo näyttää kaikkialla samalta.

Värit

Väripaletissa on yleensä yksi tai kaksi pääväriä, muutama tukiväri ja neutraaleja sävyjä tekstiin ja taustoihin. Mailchimp kertoo brändiohjeissaan, että Cavendish Yellow on brändin päävärin roolissa ja Peppercorn toimii korostusvärinä (Mailchimp). Spotify sallii vihreän logonsa vain mustalla tai valkoisella taustalla (Spotify for Developers).

Jokainen väri määritellään kaikissa tarvittavissa järjestelmissä: HEX ja RGB näytöille, CMYK tai Pantone painotuotteisiin. Kirjaa myös, mitkä yhdistelmät ovat tekstille riittävän luettavia. WCAG 2.1 -ohjeet edellyttävät tavalliselle tekstille vähintään kontrastisuhdetta 4,5:1 ja suurelle tekstille 3:1 (W3C, WCAG 2.1). Vaaleanharmaa teksti valkoisella pohjalla näyttää esityksessä tyylikkäältä, mutta jää usein tämän rajan alle.

Typografia

Ohjeisto kertoo, mitä fonttia käytetään otsikoissa ja mitä leipätekstissä, missä koossa ja millä painolla. Mukaan kuuluu myös korvaava fontti toimisto-ohjelmiin, joissa yrityksen omaa fonttia ei ole. Tarkista lisenssi: painotuotteisiin ostettua fonttia ei välttämättä saa käyttää verkkosivujen web-fonttina.

Kuvatyyli ja graafiset elementit

Kuvatyyli kattaa valokuvat, kuvitukset, ikonit ja muut graafiset muodot. Ovatko kuvat lämpimiä ja spontaaneja vai asiallisia ja viileitä? Käytetäänkö omia työntekijöitä vai kuvapankkikuvia? Ovatko ikonit viivapiirroksia vai täytettyjä? Jos tätä ei kirjata, jokainen valitsee kuvat omalla tavallaan, ja jokainen sivu näyttää erilaiselta.

Taitto ja pohjat

Lopuksi ohjeistoon kootaan sommittelun perussäännöt, kuten palstoitus, välistykset sekä painikkeiden ja lomakkeiden tyyli verkkosivuilla. Valmiit pohjat tekevät ohjeistosta käytännöllisen: kirjepohja, tarjouspohja, esityspohja, somekuvien formaatit ja sähköpostin allekirjoitus. Alkuperäiset tiedostot (logo SVG- ja PNG-muodossa, fontit, pohjat) säilytetään paikassa, josta kaikki löytävät ne.

Kuka ohjeistoa käyttää?

Ohjeisto kirjoitetaan niille, jotka eivät olleet mukana suunnittelussa: uusille työntekijöille, markkinointitiimille, mainostoimistolle, verkkosivujen kehittäjälle, painotalolle ja vaikkapa yhteistyökumppanille, joka tarvitsee logosi messuesitteeseen. Siksi sen pitää olla helppolukuinen ja konkreettinen. Pelkkä kuvaus "raikas ja moderni" ei auta ketään, mutta värikoodi, pienin sallittu logon koko ja esimerkki onnistuneesta somekuvasta auttavat. Hyvä nyrkkisääntö on, että ulkopuolinen tekijä pystyy tekemään ohjeiston avulla brändin mukaisen esitteen kysymättä mitään.

Mikä ero on graafisella ohjeistolla, visuaalisella ilmeellä ja brändi-identiteetillä?

Sanoja käytetään usein ristiin, mutta ne tarkoittavat eri tasoja:

Puhekielessä visuaalinen ilme ja graafinen ohjeisto menevät usein sekaisin, ja moni puhuu myös visuaalisesta identiteetistä. Erottelu on silti hyödyllinen. Jos logo tilataan ennen kuin brändi-identiteetti on selvä, tuloksena on kaunis merkki, joka ei kerro mitään. Jos strategia on selvä mutta ohjeisto puuttuu, ilme hajoaa vähitellen jokaisen uuden esitteen myötä.

Miten rakennat visuaalisen ilmeen vaihe vaiheelta?

Visuaalisen ilmeen suunnittelu ei ala värikartasta. Tämä järjestys säästää aloittamasta alusta kesken projektin:

1. Määritä brändin perusta. Missio, arvot ja persoonallisuus: lähestyttävä vai eksklusiivinen, leikkisä vai vakava? Näiden valintojen perusteella arvioit myöhemmin, sopiiko väri tai fontti.
2. Tunne kohderyhmä ja kilpailijat. Pk-yrityksiä palveleva tilitoimisto tarvitsee erilaisen ilmeen kuin nuorille pelaajille suunnattu brändi. Katso myös, miltä kilpailijat näyttävät. Jos alallasi kaikki ovat sinisiä, toinen väri erottaa sinut heti.
3. Suunnittele logo. Luonnostele useita suuntia ja testaa niitä pienenä ja suurena, värillisenä ja mustavalkoisena. Valitse tunnistettavuuden ja käytettävyyden perusteella, ei pelkän maun mukaan.
4. Valitse värit ja fontit. Rakenna paletti pää-, tuki- ja neutraaleista väreistä ja tarkista kontrasti. Valitse fontit, jotka ovat luettavia näytöllä ja joiden lisenssi kattaa verkkokäytön.
5. Määritä kuvatyyli. Kokoa moodboard kuvista, kuvituksista ja ikoneista, jotka sopivat brändiin, ja niistä, jotka eivät sovi.
6. Testaa oikeissa käyttökohteissa. Tee etusivu, tarjous, somepäivitys ja käyntikortti. Vasta silloin näet, toimiiko kokonaisuus.
7. Kokoa graafinen ohjeisto. Kirjaa säännöt esimerkkeineen ja jaa tiedostot keskitetysti.

Verkkosivut ovat yleensä paikka, jossa visuaalinen ilme näkyy useimmin ja hajoaa nopeimmin. Ota ne mukaan alusta asti, myös painikkeet, lomakkeet ja mobiilinäkymä. Jos sivusto on joka tapauksessa uusimisen tarpeessa, katso oppaamme verkkosivujen uudistuksesta. Logon uudistamisesta kerromme lisää artikkelissa brändi-identiteetin uudistaminen logon suunnittelulla.

Mitkä ovat yleisimmät virheet?

• Aloitetaan logosta. Ilman strategiaa logoa arvioidaan maun mukaan, ja jokainen kommenttikierros vie sitä eri suuntaan.
• Ohjeisto puuttuu. Ilme on olemassa, mutta kukaan ei tiedä, miten sitä käytetään. Vuoden päästä liikkeellä on useita logoversioita, ja jokainen osasto valitsee omat värinsä.
• Ajatellaan vain painotuotteita. Logo ei erotu pienenä profiilikuvana, värit ovat näytöllä liian heikkokontrastisia tai fonttia ei saa käyttää verkossa.
• Liikaa elementtejä. Viisi pääväriä ja kolme fonttiperhettä eivät rikasta ilmettä vaan tekevät siitä levottoman.
• Muutetaan ilman syytä. Tunnistettavuus syntyy toistosta. Uudistus kannattaa, kun yritys on muuttunut, ei vain siksi, että logoon on kyllästytty.

Milloin kannattaa käyttää toimistoa?

Jos olet vasta aloittamassa ja budjetti on pieni, voit päästä alkuun itse: yksinkertainen logo, kaksi väriä ja yksi hyvin valittu fontti, joita käytetään aina samalla tavalla, ovat jo hyvä pohja. Toimistosta on eniten hyötyä, kun yritys kasvaa, kun verkkosivut uusitaan, kun mukana on useita ulkopuolisia tekijöitä, jotka tarvitsevat selkeät säännöt, tai kun nykyinen ilme ei enää vastaa sitä, mitä teette. Brändi-ilme-palvelussamme suunnittelemme logon, visuaalisen ilmeen ja graafisen ohjeiston ja viemme ne suoraan verkkosivujen web designiin.