Visuaalisen ilmeen uudistus

Yrityksen kasvaessa ja muuttuessa on myös sen visuaalista ilmettä usein syytä päivittää, jotta se kuvastaisi yritystä mahdollisimman hyvin ja ajankohtaisesti. Visuaalisen ilmeen uudistus luontuu hyvin verkkosivujen uusimisen yhteyteen, koska sisällön ja rakenteen lisäksi on myös ilmettä joka tapauksessa silloin mietittävä kokonaisvaltaisesti uudestaan.

Kaupallinen.fi-verkkosivustomme, jolla parhaillaan vierailet, on hiljattain uudistettu, ja samalla katsoimme parhaaksi päivittää yleisesti visuaalista ilmettämme.

Ennen kuin aloimme työstää uusia nettisivujamme, mietimme koko tiimin kanssa minkälaisia muutoksia haluaisimme tehdä. Se että sivusto päätettiin rakentaa kokonaan alusta uudelleen, antoi muutoksille huomattavasti enemmän vapautta ja joustavuutta vanhan sivuston muokkaamiseen verrattuna.

Visuaalisen ilmeen elementtejä

Logo

Olimme valmiita muuttamaan Kaupallinen.fi-brändin logoa ja värimaailmaa. Aloitimmekin suunnittelemalla logolle pari erilaista versiota. Itse kuvalogo päädyttiin pitämään samana brändi-identiteetin säilyttämiseksi. Ainoastaan sen väriä muutettiin vastaamaan uutta väripalettia.

Tekstilogon luominen oli pidempi prosessi. Kävimme läpi useampia eri luonnoksia, poimimme elementtejä joista pidimme ja hylkäsimme niitä joista emme pitäneet, ennen kuin päädyimme lopulliseen versioon. Halusimme logon ja brändin näyttävän modernilta ja yksinkertaiselta, joten myös logon fontin tuli kuvastaa tätä. Samaan aikaan sen tuli tyyliltään linkittyä myös kuvalogoon, ja siksi logossa käytetty kolmio tuotiin myös tekstilogoon.

Logo on visuaalisen ilmeen tärkeä elementti

Väripaletti

Vanhaa väripalettia käytettiin uuden perustana. Sininen pääväri haluttiin säilyttää, mutta sen sävy kuitenkin päivittää modernimmaksi. Uuden päävärin lukkoon lyömisen jälkeen oli aika valita loput värit väripalettiin. Kävimme läpi eri vaihtoehtoja ja väriyhdistelmiä. Lopulta päädyimme aiempaa paljolti muistuttavaan, mutta päivitettyyn värimaailmaan.

Väripalettia luodessa on tärkeä ottaa huomioon sekä värien harmonia että kontrasti toisiinsa. Vaikka värit näyttäisivätkin hyviltä yhdessä, niin huono kontrasti värien välillä vaikeuttaisi luettavuutta ja selkeyttä. Värikontrastin mittaamiseen löytyy netistä monia eri sivustoja ja ohjelmia, joita kannattaa hyödyntää. Kokeile esimerkiksi Coolorsin helppoa ja nopeaa kontrastin tarkistusta.

Väripaletti-esimerkki

Fontti

Fontin valitseminen sitoutui logon kehittämiseen yhtenäisyyden takaamiseksi. Tavoitteena oli valita fontti, joka erottaisi meidät kilpailijoista ja näyttäisi modernilta. Fontin tuli kuitenkin olla selkeä ja helppolukuinen. Nämä asiat mielessämme sukelsimme Google Fontsin tarjontaan ja valikoimme mieleisimmät fontit. Tässä vaiheessa oli hyvä varmistaa, että fontti sisältää myös Å, Ä ja Ö -kirjaimet.

Päädyimme valitsemaan kaksi eri fonttia, otsikoille ja leipätekstille. Näin pystyimme luomaan mielenkiintoisen ja ainutlaatuisen fontti-yhdistelmän, joka kuvastaa Kaupallinen.fi:tä. Fontteja tullaankin käyttämään nettisivujen lisäksi myös muissa aineistoissa.

Graafinen ohjeisto

Kun Kaupallinen.fi:n uusi logo oli luotu ja uudistetut brändivärit ja fontit valittu, tarkat tiedot niistä koottiin ja tallennettiin yrityksemme viralliseen graafiseen ohjeistoon. Tästä PDF-muotoisesta tiedostosta voivat niin nykyiset kuin tulevatkin työntekijät tarkistaa oikeat asetukset eri käyttötarkoituksiin. Graafinen ohjeisto on tärkeää välittää myös esimerkiksi yhteistyökumppaneille, jotta yrityksen ilme säilyy tunnistettavana ja yhtenäisenä myös ulkopuolisissa aineistoissa.

Yrityksen graafisesta ohjeistuksesta tulee käydä ilmi, missä yhteyksissä ja millä tavoin erilaisia logoversioita sekä brändivärejä ja -fontteja saa tai pitää käyttää. Brändivärit esitetään ohjeistossa visuaalisessa muodossa värilappuina (swatches), joihin on selkeästi merkitty koodit eri värijärjestelmissä niin digitaaliseen kuin tulostuskäyttöön. Ohjeisto voi sisältää myös lisäkuvia tai muita visuaalisia lisäelementtejä, kuten Kaupallisen oma ikonikokoelma-tausta.

Verkkosivuston ulkoasu ja kuvat

Nettisivun ulkoasua suunnitellessa keskustelimme ensin sen rakenteesta ja halutuista elementeistä. Halusimme, että ulkoasu kuvastaisi brändimme moderniutta ja selkeyttä. Muutoin suhteellisen yksinkertaisen ulkoasun kaveriksi päätimme tuoda sivuille persoonallisuutta kuvituksen kautta. Leikkisyydestä huolimatta halusimme kuvien olevan selkeän pelkistettyjä eli brändimme visuaalisen ilmeen mukaisia. Tärkeänä pidimme myös sitä, että kuvat olisivat sovussa uuden väripalettimme kanssa.

Sisältömme päätähti on ehdottomasti tarjoamamme palvelut, ja tämän halusimme huomioida sivuston ulkoasussa. Kuhunkin palveluun yhdistyy sitä kuvaava yksittäinen ikoni sekä isompi kuva, jossa on rykelmä asiaan liittyviä ikoneita. Toivomme, että vierailijan on siten helpompi hahmottaa palvelutarjontamme ja löytää nopeammin tarvitsemansa palvelu.

Muillakin kuin palvelusivuilla pääkuvan (ns. “hero”-kuvan) ikonien on tarkoitus kuvata sivun aihetta ja tuoda yhtenäisyyttä sivuston ilmeeseen. Kuvan asettelu sivun rakenteeseen sopivaksi vaati pari kokeilua. On aina tärkeää tarkistaa, että kuvien koko ja asettelu toimii riittävän hyvin eri laitteilla ja resoluutioilla. Kuva saattaa näyttää hyvältä yhdellä näytöllä ja aivan erilaiselta toisella.

Kotisivut yritykselle - visuaalisen ilmeen elementtejä

Nettisivujen ilmeellä on merkitystä

Oman yrityksemme kohdalla visuaalisen ilmeen uudistus lähti pitkälti nimenomaan verkkosivuston uudistamisen tarpeesta. Nettisivut ovat yrityksen näyteikkuna, sillä ne ovat erittäin usein asiakkaan ensikosketus yritykseen. Huono ensivaikutelma voi kääntää asiakkaan pois jo “ovelta”.

Sivuston ulkonäöllä on ihan käytännön merkitystä – selkeys, ilmavuus ja helppolukuisuus (esimerkiksi fontin koko ja kontrasti) ovat oleellisia tekijöitä verkkopalvelun käytettävyydessä. Kun selkeyden ohella pidetään huolta, että visuaalisen ilmeen elementit ja värimaailma toistuvat yhtenäisesti kautta sivuston ja ovat linjassa muun brändi-ilmeen kanssa, se antaa uskottavuutta ja luotettavuutta koko yritykselle.

Jos mietit verkkosivujesi ja niiden visuaalisen ilmeen päivittämistä, ota yhteyttä meihin. Paneudumme uudistusprojekteihin kokonaisvaltaisesti tuoden niihin niin luovuutemme kuin käytännönläheisen otteemme.