Visuaalinen ilme: logo, värit, fontit ja valikko

Moduuli 4: Sivut, ulkoasu ja toiminnot · Lukuaika: 8 minuuttia

Oppimistavoite: Tämän oppitunnin jälkeen osaat asettaa Visuaalinen ilme -paneelissa nimen ja logon, faviconin, tyylin, valikon ulkoasun, värit, fontit, tumman tilan ja liikkeen. Osaat myös tarkistaa, että sivustosi tekstit ovat hyvin luettavia.

Keskeiset käsitteet: visuaalinen ilme, tyyli (look), logo, kuvamerkki, sanamerkki, favicon, valikkopalkki, pääväri, kontrasti, kontrastisuhde, WCAG, verkkolisenssi, tumma tila, liike

Miksi visuaalinen ilme on muutakin kuin kaunis ulkonäkö

Visuaalinen ilme on logon, värien ja fonttien vakiintunut yhdistelmä, josta ihmiset tunnistavat sinut. Verkkosivustolla se tekee yrityksestäsi tunnistettavan (samat värit pakettiautossa, tarjouksessa ja sivustolla), ja sen on pysyttävä luettavana: vaaleanharmaa teksti valkoisella näyttää rauhalliselta, mutta moni kävijä lukee sitä huonosti, varsinkin puhelimella auringonpaisteessa.

Kaikki Visuaalinen ilme -paneelin asetukset ovat maksuttomia ja näkyvät heti esikatselussa. Vasta kun napsautat Tallenna, niistä tulee uusi versio (oppitunti 3.5). Jos haluat palata takaisin, napsauta Palauta tai palauta vanhempi versio.

Paneelissa on nämä osiot: Tyyli, Värit, Fontit, Valikkopalkki, Nimi ja logo, Kuvat, Muoto ja välit, Fontit ja koot, Tumma tila ja Liike.

Nimi, logo ja favicon

Kohdassa Nimi ja logo on sivustosi nimi sellaisena kuin se näkyy ylä- ja alatunnisteessa. Sen alla on logo:

• Lataa oma logo: PNG läpinäkyvällä taustalla, SVG, JPG tai WebP, enintään 2 MB. Vaakasuuntainen logo toimii valikkopalkissa parhaiten.
• Jos sinulla ei ole logoa, sivustoeditori on tehnyt sanamerkin: nimesi omalla fontillasi ja omissa väreissäsi. Se mukautuu itsestään, kun muutat niitä.
• Anna tekoälyn suunnitella logo: kuvaile lyhyesti yritystäsi ja tunnelmaa ("maalausliike pienellä paikkakunnalla, käsityömäinen ja luotettava") ja napsauta Suunnittele kolme logoa. Saat kolme kuvamerkkiä (tunnus ilman tekstiä) omissa väreissäsi, ja niiden vieressä on nimesi omalla fontillasi. Yhteensä se maksaa 1 muokkauksen. Valitse yksi painikkeella Käytä tai kirjoita, mitä voisi parantaa ("ensimmäinen, mutta pyöreämpi"), ja napsauta Suunnittele kolme uutta logoa. Se on taas uusi kierros, joka maksaa 1 muokkauksen.
• Näkyminen valikossa ja alatunnisteessa: Logo ja nimi, Vain logo tai Vain nimi sekä Koko (Pieni, Normaali, Suuri).

Sivustoeditori varoittaa, jos logossa on ohuita viivoja tai vähän kontrastia valikkopalkkiin nähden: pienenä palkissa se voi silloin hukkua.

Tarkista tekoälyn tekemä logo itse: eihän se muistuta liikaa jonkin toisen yrityksen logoa?

Favicon on pieni kuvake selaimen välilehdessä ja kirjanmerkeissä. Valitse Automaattinen: alkukirjain omissa väreissäsi, Oma logosi tai Oma tiedosto (neliö, PNG, SVG tai ICO, enintään 512 KB).

Tyyli ja valikkopalkki

Tyyli (sivustoeditorissa myös look) määrittää yhdellä napsautuksella fontit, muodot, painikkeet, kortit, valikon ja koristeet. Tyylejä on kaksitoista, esimerkiksi Raikas, Lämmin, Asiallinen, Luonto, Ateljee ja Yö. Omat värisi säilyvät, kun vaihdat tyyliä. Jos haluat myös tyylin värit, napsauta Myös tämän tyylin värit. Yö-tyyli on aina tumma.

Kohdassa Valikkopalkki valitset jokaisen sivun yläreunassa olevan palkin muodon viidestätoista vaihtoehdosta: koko leveys, keskitetty, jaettu, kaksi riviä, väripalkki, reunustettu, pilleri, yläpalkilla, läpinäkyvä, minimaalinen, kelluva, osastot, segmentti, koko näyttö ja sivuvalikko. Valikon sisältö (oppitunti 4.1) pysyy samana. Muutama huomio sivustoeditorin omista ohjeista:

• Läpinäkyvä näyttää hyvältä vain, jos jokaisella sivulla on tumma hero tai kuvahero.
• Minimaalinen näyttää vain nimesi ja yhden painikkeen. Sivujen linkit ovat silloin alatunnisteessa.
• Yläpalkilla näyttää puhelinnumeron ja aukioloajat kapeassa palkissa valikon yläpuolella. Onhan puhelinnumero oikein?

Kohdassa Valikkopalkin väri valitset Automaattinen (seuraa tyyliä), Valkoinen, Vaaleanharmaa, Tumma tai Korostusväri. Muuta väriä voit pyytää chatissa.

Värit ja kontrasti

Kohdassa Värit asetat päävärin (painikkeet, korostukset), toisen värin väriliukumia varten sekä taustan (valkoinen, kerma, viileä, harmaa tai oman värisi sävy, tai valitse itse). Asetuksella Painikkeet väriliukumalla kaikkiin pääpainikkeisiin tulee liukuma väristä toiseen.

Tässä kohtaa tulee vastaan kontrasti: tekstin ja taustan välinen kirkkausero. Se ilmaistaan kontrastisuhteena, joka vaihtelee välillä 1:1 (ei eroa) ja 21:1 (musta valkoisella). Saavutettavien verkkosivustojen kansainvälinen ohjeistus, W3C:n WCAG, edellyttää AA-tasolla vähintään 4,5:1 tavalliselle tekstille ja 3:1 suurelle tekstille (noin 18 pistettä tai 14 pistettä lihavoituna). Painikkeiden ja muiden käyttöliittymän osien on yllettävä vähintään suhteeseen 3:1 ympäristöään vasten.

Sivustoeditori valvoo tätä puolestasi. Jos valitset värin, jonka päällä teksti ei erotu hyvin, se muuttaa väriä ja kertoo, mitä muuttui, esimerkiksi: "Tekstin väri ... on nyt ..., koska teksti ei muuten erottuisi hyvin." Jos haluat pitää täsmälleen omat värisi, ota käyttöön Säilytä täsmälleen nämä värit: värisi säilyvät, ja niiden päällä oleva teksti saa itsestään luettavan värin. Myös osioissa, joita tekoäly tekee omalla muotoilullaan, sivustoeditori korjaa tekstivärit, jotka jäävät alle suhteen 4,5:1 (suuressa tekstissä 3:1).

Mitä sivustoeditori ei arvioi: tekstiä kuvassa tai logossasi eikä otsikkoa kirjavan kuvan päällä. Tarkista ne itse, puhelimella. Jos olet epävarma jostain väriparista, syötä kahden värin värikoodit kontrastin tarkistustyökaluun (katso Lisälukemista).

Sudenkuoppa: painotalon tai pakettiauton teippauksen väri (esimerkiksi kirkas keltainen) sopii harvoin tekstin väriksi. Käytä sitä korostuksena tai pintana ja pidä teksti tummana.

Fontit ja oma fontti

Kohdassa Fontit valitset fontin Otsikot-tekstille ja toisen Leipäteksti-tekstille. Fontit ovat tiedostoina omalla sivustollasi, eikä mihinkään ulkopuoliseen fonttipalveluun muodosteta yhteyttä. Kohdassa Fontit ja koot säädät liukusäätimillä koko sivustolle tekstin ja otsikoiden riviväliä ja merkkiväliä, merkkejä riviä kohti, sisällön leveyttä ja otsikoiden painoa. Tyylin mukaan palauttaa liukusäätimen. Kohdassa Tekstin koko valitset Normaali, Suuri tai Erittäin suuri. Voit tehdä tämän myös chatissa ("suurenna fontteja").

Myös oma fontti on mahdollinen: lataa se kohdassa Fontit tai chatin paperiliittimellä muodossa .woff2, .woff, .ttf tai .otf, enintään 2 MB tiedostoa kohden (useampi paino on sallittu). Sen jälkeen valitset, mihin sitä käytetään: otsikoihin, tekstiin vai molempiin. Se ei maksa mitään. Adobe Fontsin kaltaisen palvelun fonttia ei voi käyttää.

Tärkeää: lataa vain fontti, johon sinulla on verkkolisenssi. Fontti on ohjelmisto, jolla on lisenssi. Lisenssi, joka sallii käytön omalla tietokoneellasi (painotuotteiden tekemiseen), ei läheskään aina salli tiedoston sijoittamista verkkosivustolle, josta jokainen kävijä lataa sen. Tarkista lisenssiehdoista, onko verkkokäyttö sallittu. SIL Open Font License -lisenssin fontteja saa upottaa ja levittää.

Tumma tila ja liike

Kohdassa Tumma tila valitset Pois (aina vaalea), Aina tumma tai Laitteen mukaan. Viimeisessä vaihtoehdossa kävijä, jonka puhelin tai tietokone on tummalla, näkee omista väreistäsi tumman version. Tumman tilan taustan, tekstin ja päävärin voit valita itse. Painiketta, jolla kävijät voisivat itse vaihtaa tilaa, ei ole. Esikatselu seuraa omaa laitettasi: vaihda puhelimesi tai tietokoneesi tummaan tilaan nähdäksesi tumman version, ja tarkista silloin myös logosi.

Kohdassa Liike valitset koko sivustolle Päällä, Rauhallinen tai Pois ja tarvittaessa poikkeuksen sivukohtaisesti. Täällä valitset myös Hiiriefekti tietokoneella -asetuksen (ei mitään, magneetti tai valotäplä). Esikatselussa kaikki on paikallaan. Toista animaatio näyttää liikkeen kerran. Jos kävijä on asettanut laitteeseensa vähemmän liikettä, kaikki pysyy paikallaan. Liika liike vie huomion. Sivulla, jolla on paljon tekstiä, Rauhallinen tai Pois on usein parempi.

Sivustoeditorissa: näin teet sen

1. Avaa Visuaalinen ilme, osio Nimi ja logo. Napsauta Lataa oma logo tai Anna tekoälyn suunnitella logo.
2. Valitse kohdassa Favicon logosi tai automaattinen alkukirjain.
3. Kokeile kahta tai kolmea tyyliä kohdassa Tyyli. Katso myös näkymää Puhelin.
4. Valitse kohdassa Valikkopalkki ulkoasu ja väri.
5. Aseta pääväri kohdassa Värit. Lue sivustoeditorin ilmoitukset.
6. Tarkista kohdista Tumma tila ja Liike, mitä haluat.
7. Napsauta Tallenna ja julkaise sivustosi uudelleen.

Yhteenveto

• Visuaalinen ilme -paneeli on maksuton. Tallenna luo uuden version.
• Tekoälylogo maksaa 1 muokkauksen kolmesta ehdotuksesta. Faviconin sivustoeditori tekee itse, tai voit ladata oman.
• Kaksitoista tyyliä ja viisitoista valikon ulkoasua. Valikon sisältö pysyy samana.
• WCAG edellyttää vähintään kontrastia 4,5:1 tavalliselle tekstille ja 3:1 suurelle tekstille. Sivustoeditori valvoo tätä, paitsi kuvissa ja logossasi.
• Oman fontin saa käyttää vain verkkolisenssillä. Tumma tila ja liike asetetaan sen mukaan, mitä kävijäsi tarvitsevat.

Tietovisa

Tehtävä

Tehtävä D4.2: Ilmeesi ja kontrasti. Määritä visuaalinen ilmeesi ja mittaa tärkeimpien väripariesi kontrasti.

Tarkistuslista:

• [ ] logo ladattu tai valittu tekoälyn ehdotuksista;
• [ ] favicon asetettu ja nähty julkaistun sivustosi selainvälilehdessä;
• [ ] tyyli ja valikon ulkoasu valittu ja katsottu Puhelin-näkymässä;
• [ ] pääväri asetettu ja sivustoeditorin ilmoitukset luettu;
• [ ] tekstivärin kontrasti taustaa vasten ja painiketekstin kontrasti painikkeen väriä vasten mitattu kontrastin tarkistustyökalulla;
• [ ] tumma tila ja liike valittu harkiten;
• [ ] visuaalinen ilme tallennettu ja sivusto julkaistu uudelleen.

Kysymykset:

1. Mitkä kontrastisuhteet mittasit tekstille taustaa vasten ja painiketekstille painiketta vasten, ja yltävätkö ne suhteeseen 4,5:1?
2. Missä kohdassa sivustoasi teksti on kuvan päällä, ja onko se hyvin luettavaa puhelimella?
3. Käytätkö omaa fonttia? Missä kohdassa lisenssiä sanotaan, että verkkokäyttö on sallittu?

Kun olet merkinnyt tehtävän tehdyksi, näet esimerkkivastauksen: Schildersbedrijf Example mittasi tummanharmaalle valkoisella suhteen 14,5:1 ja valkoiselle tekstille vihreällä painikkeella 5,1:1, molemmat yli 4,5:1. Hero-kuvan päällä oleva otsikko erottui huonosti, joten yritys valitsi tummemman kuvan. Omaa fonttia ei ole, joten lisenssiä ei tarvita.

Lisälukemista

• Understanding Success Criterion 1.4.3: Contrast (Minimum) (W3C, englanniksi): https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html
• Understanding Success Criterion 1.4.11: Non-text Contrast (W3C, englanniksi): https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html
• Contrast Checker (WebAIM, englanniksi): https://webaim.org/resources/contrastchecker/
• SIL Open Font License, virallinen teksti (englanniksi): https://openfontlicense.org/open-font-license-official-text/