tiistai 10. kesäkuuta 2014

Blogin värit kartalle

Visuaalinen ilme on kovassa kurssissa blogeissa. Kuvat eivät ole ainoita silmiin pistäviä elementtejä, vaan blogin ulkoasuun vaikuttavat oleellisesti myös kaikenlaiset fontit, sivupalkissa sekä postauksissa näkyvät muut kuvat ja kirjoitukset, sekä tietenkin värit. Joillekin blogin ulkonäön rukkaus on lempiharrastus, toiset eivät taas välitä lookista tuon taivaallista. Ajattelin kuitenkin jakaa teidän kanssanne hyvän idean, jonka sain eräästä webinaarista, jota äskettäin katselin. Siinä neuvottiin, miten omalle brändille (=blogille) saa yhtenäisen ja ammattimaisen ulkoasun suht helpolla.

Salainen ase, jolla ulkonäköasiat pysyvät kuosissa, on blogin värikartta.



Miksi  värikartta?
Kovin kirjava ulkoasu on tietenkin persoonallinen mutta se voi myös olla rasite lukijan silmille ja keskittymiskyvylle. Jos sinulla on selkeä ulkoasu, sivuillasi viihdytään ja se ehkä muistetaankin paremmin. Lisäksi kaikki muu kuin minimalistinen ulkoasu on nykyään vähän amatööriä, valitettavasti.

Omalle blogille kannattaa siis valita oma värimaailmansa, jota hyödynnetään niin teksteissä kuin kuvissakin. Värejä kannattaa valita noin yhdestä kolmeen. Tähän värien joukkoon ei kannata laskea mustaa ja valkoista, sillä ne ovat blogissa lähes joka tapauksessa leipätekstin ja taustan väreinä(ja niitä ei kannata muuttaa muuksi!). Näitä muita valitsemiasi värejä käytetään sitten esimerkiksi linkkien ja otsikoiden väreinä, sekä esimerkiksi sivupalkissa ja kuvissa näkyvissä teksteissä, ja ihan kaikkialla blogin jutuissa. Kaikkia valittuja värejä ei tarvitse käyttää yhtä paljon, vaan yksi väri voi dominoida ja toinen (tai pari muuta) vilahdella aina siellä täällä tarpeen mukaan.

Esimerkiksi jos tekisin nämä seurantapainikkeet blogiini, käyttäisin niissä systemaattisesti vaikkapa kahta blogini värikartan väriä. En siis lähtisi sooloilemaan ja värittämään kuvia muilla lempiväreilläni, sillä muutoin käsissäni olisi taas sateenkaari. Käyttäisin myös yhtä tiettyä fonttia, jonka olisin valinnut blogini muita tekstejä kuin leipätekstiä varten.

Vaikka kivat värit voi valita silmämääräisesti, täysin oikean sävyn löytäminen joka kerta on hankalaa. Lisäksi jos et ole päättänyt, mitä värejä blogissasi käytät, lähdet helposti hakoiteille ja värittelet millä sattuu, minne sattuu.

Tähän väliin voisin huomioida, että olen itse laiminlyönyt aika hyvin tämän blogin visuaalisen ilmeen kehittämisen, ja vaikka täällä on kaikki suht pinkkiä, sävy ei todellakaan ole aina sama. Lisäksi kuvissa vilahtelee sataa eri fonttia. Ehkä lipsun näin, koska tämä on harrastus, mutta olen näissä hommissa suht tarkka muissa työprojekteissani. Teinkin muita hommia varten tuollaisen värikartan (moodboardiksi sitä kai kutsutaan), ja se on helpottanut todella paljon esimerkiksi väkertelyä sellaisten kuvien kanssa, joihin tulee myös tekstiä.

Näin se tehdään!
Jotta valitsisit aina juuri oikeat värit, ne kannattaa laittaa johonkin muistiin. Tätä varten siis teemme sen värikartan. Oman kartan voi tehdä kätevästi vaikka Picmonkeyllä. Valitset jonkinlaisen suorakulmion pohjaksi (etusivulta Design ja jokin pohja) ja liität sen päälle niin monta suorakulmiota, kuin sinulle on värejä valittuna blogiasi varten.


Värität suorakulmiot valitsemiesi värien mukaan. Kirjoita värien numerot ylös johonkin. Numero löytyy sieltä värikentän oikeasta yläkulmasta. (Sillä ei muuten ole mitään väliä, teetkö suorakulmion muotoisen värikartan, vai vaikka neliön, jonka sisällä on erivärisiä palloja, tai mitä ikinä keksit!)




Tarvitset blogillesi ehkä myös fontin, jota käytät muualla kuin tekstissä. Nythän kun on päässyt käymään niin, että kaikenlaiset tekstit esimerkiksi asukuvissa ovat suuressa huudossa. Sen tekstin olisi myös hyvä olla aina samalla fontilla kirjoitettu lähes poikkeuksetta. Jos ajattelit tarvitsevasi yhden kivan fontin, valitse se nyt. Picmonkeystä löytyy paljon, mistä valita. Fonttia valitessa on hyvä huomioida, että samaa fonttia ei ehkä löydy muualta kuin Picmonkeystä. Eli jos esimerkiksi haluat runoilla asukuviisi jotain jatkossa äsken valitsemallasi fontilla, varaudu muokkaamaan niitä jatkossa Picmonkeyssä.



Sitten kirjoitat tuolla fontilla äsken ylös laittamasi värien numerot oikeille kohdille kuvaasi (eli oikeiden värien kohdille). Myös fontin nimi tulee kirjoittaa ylös, jotta löydät sen helposti seuraavalla kerralla. Jos et tarvitse mitään tiettyä fonttia, kirjoita millä haluat, mutta tärkeintä on, että kuvasta löytyy värien numerot. Sitten värikarttasi on valmis!

Siinä se on!

Tuon värikartan avulla et enää koskaan joudu etsimään sopivaa sävyä hakuammunalla. Sinulla on kaikki kätevästi ylhäällä. Jos esimerkiksi haluat muuttaa blogisi linkit vastaamaan uunituoreen värikarttasi maailmaa, se onnistuu vain kirjoittamalla vastaava numero Bloggerin ko. asetuksiin. Esimerkiksi menemällä Bloggerin hallintapaneelissa Malli -> Mukauta -> Lisäasetukset -> Linkit saat esiin linkkien nykyisen värin. Sitten vaan naputtelet nuo värikartan tiedot haluamiisi kohtiin # -merkin perään. Kas näin:


Vinkki värimaailman löytämiseksi
Jos et millään keksi, mitkä värit olisivat kivat blogiasi varten, webinaarissa neuvottiin selailemaan kuvia ja ottamaan malliksi sellaisen kuvan, joka väreiltään miellyttää silmääsi. Sitten vain etsit Picmonkeystä yllä esiteltyyn tyyliin vastaavat pari, kolme väriä kuvaa apuna käyttäen.

Noin! Ja eikun askartelemaan, jos tämä on yhtään sinun juttusi. Ei haittaa, vaikka blogisi olisi vähän varttuneempi tapaus, sillä koskaan ei ole liian myöhäistä tehdä pieniä muokkauksia.

13 kommenttia:

  1. Yksi työkalu värimaailmoiden etsimiseen on tämä
    http://colorbrewer2.org
    se on varsinaisesti suunniteltu karttojen värien valitsemiseen mutta sieltä voi esimerkiksi tarkistaa värisokeiden erottamat sävyt tai sellaiset jotka eroavat tulostaessa. Itse olen tehnyt niin että päräytän tuolta vaikka sequential multi-hue 8 sävyä, ja poimin niistä sitten pari kolme.

    VastaaPoista
    Vastaukset
    1. Ok, aikamoinen työkalu. Minulla meni pää pyörälle :) Mutta varmaan toimii.

      Poista
  2. Olen kanssasi tästä asiasta niin samaa mieltä! Eniten minun silmää ärsytää blogeissa kaikki liikkuvat ja vilkkuvat jutut. Toiseksi eniten, että taustana on kuva, jonka päällä on sitten valokuvia blogissa. Minusta todella sekavaa ja postauksessa esitellyt kuvat eivät saa ansaitsemaansa huomiota. Ja sitten se fontti... kaikki hienot fontit on hauskoja mutta minusta eivät kuulu postauksen tekstiin, vaan ennen kaikkea otsikoihin. Postauksen tekstin tulisi olla oikeasti helposti luettavaa ja selkeää.

    VastaaPoista
    Vastaukset
    1. Kyllä juu, juuri näin. Vaikka kaikkea hienoa voi tehdä, niin maltti on valttia.

      Poista
  3. En taitaisi osata kyllä tätä hommaa, vaikkei pahitteeksi olisikaan vähän siistiä blogin ulkonäköä. Käytän tässä samalla tilaisuutta hyväkseni kysyäkseni, että osaisitko neuvoa, miten saa blogiin sellaisen osion, johon saa printattavan osan erikseen, esim. just vaikka ruokaohjeelle, tai ostoslistalle? En tiedä käytetäänkö sen tapaista työkalua muuten paljon kuin ruokablogeissa, mutta niissä se on tosi kätevä. Ei tarvi koko jaaritusta (omanikin ovat joskus huomattavan pitkiä...) tulostaa, vaan vain se oleellinen. En nyt äkkiseltään löytänytkään esimerkiksi mitään kotimaista blogia, jossa sellaista olisi käytetty, tietenkään!

    VastaaPoista
    Vastaukset
    1. Tuommoinen printtausominaisuus kuulostaa kätevältä. En kyllä tiedä miten sellaisen valikoivan printtausmahdollisuuden saa blogiin. En ole kai sellaista nähnytkään :) Nopea googlailukaan ei tuottanut tulosta.

      Poista
    2. Hassua, minäkään en löydä vaikka olen ihan varmaan tämän nähnyt jossain suomeksikin.
      Erilaisilla ruokasivustoillahan noita tulosta-linkkejä on, esim. tässä
      http://www.kotikokki.net/reseptit/nayta/888/Mokkapalat/

      Esimerkiksi Pioneerwomanilla on jokaisen ruokaohjeen alussa linkki "Print recipe" mutta se menee samalla sivulla olevaan osioon. Jos tulostaa huolimattomasti, saa 46 sivua (!!!) ohjetta ja valokuvia. Pitää huomata että tuossa osiossa on toinen linkki joka vasta vie tulostettavan kokoiseen ja muotoiseen tiivistelmään.

      http://thepioneerwoman.com/cooking/2014/06/blackberry-cheesecake-squares/



      Poista
    3. Aa, nyt ymmärrän! Kätevä ominaisuus. WP:seen sen varmasti.

      Poista
  4. Perfektionistina innostuin heti!
    Mun ongelma vaan tällä hetkellä on, että bannerini on valokuva sinisestä taivaasta, ja tykkäisin käyttää tätä samaa sinistä sitten esim. otsikoissa. Nyt on otsikot on Bloggerin peruspohjassa olevalla sinisellä, joka on kyllä vähän sinne päin, mutta ei ihan... Osaatko sanoa, onko olemassa jotain kivaa työkalua, jonka avulla voisi saada olemassa olevalle värille sen koodin? Ja tällä koodilla voisi sitten Bloggerin fonteista saada oikean sävyisiä. (Olipahan vaikeasti selitetty ongelma :D)

    Vai pitääköhän mun alistua ja tehdä banneri uusiksi valmiin sävyn mukaan tai jotain...

    Pitänee myös tässä samalla testata tuota linkkausohjetta, joten tästä pääsee blogiini.

    VastaaPoista
    Vastaukset
    1. Hyvin selitit, ymmärsin ehkä. Oisikohan tämmöisestä työkalusta apua? Tuo tuli Googlesta ekana, eli niitä voi olla muitakin hyviä.

      Poista
  5. Hei
    Osaatko sanoa miten voi muutta vain linkkien väriä? Jos muutan "Bloggerin mallin suunnittelutyökalu"- kohdassa linkin värin, vaihtuu samalla myös teksin otsikon väri. Blogini löytyy
    täältä. Haluaisin että vain hyperlinkit ovat eri värisiä.

    VastaaPoista
    Vastaukset
    1. Ymmärrän! Kyllä varmaan osaan sanoa, kun tutustun aiheeseen. Taidan tehdä tästä pienen postauksen, jos jaksat odottaa hetken. Muitakin varmasti kiinnostaa.

      Poista
    2. Kiitos. Toki jaksan odottaa! Postauksesi ovat mainioita. Hienoa että bloggaat aiheista, joista on todella apua.

      Poista