Kaikki irti nettisivuista: Mitä graafikon pitäisi tietää?

Me kun niitä paljon puhuttuja nettisivuja väsäillään, kuuluu tälläiseen projektiin olennaisena osana nettisivujen suunnittelu etukäteen kuvina ennen varsinaisen koodaustyön alkamista. Hyvin suunniteltu on puoliksi tehty, varsinkin näin nettisivuprojektin kohdalla pitää todella hyvin paikkansa. Hyvät suunnitelmat, näkikset - leiskat ovat niin yrityksen brändin mukaisia ja niiden pohjalta on helppo aloittaa tekeminen.

Huolella tehdyt suunnitelmat ovat usein hyvin nopeaa tehdä nettisivuiksi asti eli niin sanotusti taittaa. Jos kuitenkaan kaikki suunnitelmissa ei ole ihan justiinsa, tekemisen vauhti laskee kuin lehmän häntä, jos jotkin seikat ovat vain “vähän sinne päin”. Nettisivujen graafinen suunnittelu vaatii designsilmän lisäksi jonkin verran teknistä tietotaitoa.

Kuvien koko nettisivuilla

Liian pieniä, liian suuria vai juuri oikean kokoisia? Minkä kokoisia kuvia toimitatte eteenpäin? Kuvien ja videoiden merkitys nettisivuilla on valtava, niiden tulee olla (semiobjektiivisesti) hyvännäköisiä, mutta myös fyysiseltä olemukseltaan sellaisia, etteivät ne pilaa käyttökokemusta.

Muista median resoluutio. Selain piirtää kuvasta jokaisen pikselin ja voi jopa kaataa sivustolla vierailijan tietokoneen, jos sivusto yrittää piirtää vaikkapa järjettömän isoa 10 000px x 10 000px kuvaa. Vaikka kyseessä olisikin “pieni” kuva (eli esimerkiksi vaikkapa 500 x 500 pikseliä), voi se tiedostona olla hillitön järkäle. Jos kuvaan on tallennettu kaikki webin kannalta epäolennainen metadata, tai se on tilanteeseen nähden väärän muotoinen, on se tiedostokooltaan helposti megatavuja, kun pitäisi puhua kilotavuista. Nettisivuilla ladattavan median määrän olisi hyvä huomioida myös mobiilikäyttäjät. Olisiko sinusta kiva vierailla sivustolla, joka jokaisella sivulla lataisi kuukauden mobiilidatakatostasi 10% vain sen takia, että saat hienon 4k header videon, jota varten et varsinaisesti ehkä sivulle tullut? Kyllä, video voi olla todella hieno, mutta ei kuitenkaan ehkä kuitenkaan palvele tarkoitustaan. Kannattaa joskus myös harkita videon vaihtamista kuvaan, kun liikutaan mobiiliresoluutioissa.

Kuvien kohdalla voit kokeilla pienentää kuvan tiedostokokoa tinypng.com sivuston avulla, joka poistaa kuvatiedostosta turhaa metadataa ja pakkaa kuvan, pienentämättä kuvaa itsessään!

Netti ei halua bleedejä!

Kuvien koossa on tärkeää on huomioida myös kuvan kunnollinen rajaus. Rajaa siis koodariasi varten kuvat ja ikonit oikein. Kaikki ylimääräinen “tyhjä” tila kuvassa vaikeuttaa asettelua koodissa merkittävästi, koska se tyhjä tila ON kuvaa ja hankaloittaa varsinaisen kuvan sisällön asettamista linjaan muun sisällön kanssa, koska varsinainen kuvan sisältö vie koko kuvaa. Esimerkiksi Photoshopissa on työkalu Trim, jolla ohjelma automaattisesti ehdottaa kuvan rajaamista niin, että tyhjä tila kuvan ympäriltä poistuu. Jos designissa halutaan antaa kuvalle ympärille tilaa, se hoidetaan paljon mielummin koodilla itsessään (padding).

Tee esimerkiksi ikoneista (tai muista toistuvista kuvista) samankokoisia: ota esim. 1000 px x 1000 px kokoinen projekti, lisää ikonisi, asettele ikoni niin isoksi kuin mahdollista tälle alueelle (esim. ylhäältä ja alhaalta jää 1px ennen kuvan rajoja) ja käytä vielä Photoshopin omia työkaluja ikonin keskittämiseen vertikaalisesti ja horisontaalisesti. Ja jos teet ikoneita, toimita näistä svg-tiedostot, sillä niitä on koodarin mahdollista hyödyntää suoraan "koodina". Joskus kuitenkin on hyvä hyödyntää valmiita ikonikirjastoja, esimerkiksi Font Awesome ja Material Icons ovat oikein mainioita ilmaisia sellaisia.

Toimitus

Jos käytät suunnitelmissasi maksullista fonttia, toimita se fontti muiden materiaalien mukana koodarille ja jos fontti löytyy esimerkiksi Google Fontsista, toimita linkki. Koodareilla ei ole mystistä pohjatonta materiaalikaivoa, josta ammennetaan fonttia fontin perään. Fontin valinnassa ylipäätään on hyvä huomioida myös skandit (ä, ö, å), joita kaikkiin fontteihin ei ole tehty.

Jotta vielä varsinaisen teknisen puolen jälkeen tekeminen suunnitelmien pohjalta on sujuvaa, tulisi grafikon vielä toimittaa nämä tehdyt suunnitelmat ja materiaalit kaikkine hyvineen koodarille. Nettisivut taitetaan pääsääntöisesti käyttäen CSS ja HTML kieliä, joten kannattaa helpottaa koodarin työtä toimittamalla suoraan tekstimuotoisena osa tyylittelystä esimerkiksi näin:

otsikko_1 { font-family: 'Roboto', sans-serif; font-weight: 600; color: #123456; }

Esimerkin kaltaisella tekstin pätkällä koodari voi nopeasti ja näppärästi kopioida jonkin elementin tyylin, niin että, ei tarvitse arpoa mikä nyt olikaan värin oikea sävy tai fontin paksuus.

@it_ankka best!

Suunnittele nettisivut loppupeleissä niin, että leiska on toteutettavissa. Tai ehkä enemmänkin käytettävissä.  Joskus idearikkaus voi johtaa niin sanotusti idiotismiin, jos mielikuvikselle ei anneta rajoja ja teknistä osaamista ei löydy tarpeeksi. Suosittelen kaikille graafikoille koodaamiseen jonkinlaista tartuntapintaa, jotta suunnittelu helpottuu ja voit ymmärtää mikä on “mahdollista”.